/* Fonts */
@font-face {
  font-family: "Bohemian Typewriter";
  src: url('../fonts/bohemian_typewriter.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Friday13";
  src: url('../fonts/friday_13.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Root colors */
:root{
  --bg:#0b0d10;
  --muted:#9aa3ad;
  --accent-server:#790000;
  --accent-server-hover:#a30000;
  --text:#e6eef6;
  --btn-text:#fff;
}

*{box-sizing:border-box;}
html, body {
  margin:0;
  height:100%;
  font-family:"Bohemian Typewriter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Main container */
.container{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:64px 32px 32px 32px;
  text-align:center;
}

/* Title */
.brand{
  font-family: "Friday13", serif;
  font-size:clamp(4rem, 10vw, 8rem);
  margin-bottom:64px;
  color: var(--accent-server);
  letter-spacing:0.02em;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  cursor: default;
  user-select: none; 
}

/* Buttons */
.actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:32px;
}

.btn{
  font-family: "Bohemian Typewriter", serif;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:12px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  font-weight:600;
  transition: all 0.2s ease;
  font-size:1rem;
}

.btn-primary{
  background-color: var(--accent-server);
  color: var(--btn-text);
}

.btn-primary:hover{
  background-color: var(--accent-server-hover);
}

.btn-secondary{
  background:transparent;
  border:1px solid var(--accent-server);
  color: var(--accent-server);
}

.btn-secondary:hover{
  background-color: var(--accent-server);
  color: var(--btn-text);
}

/* Footer */
.site-footer{
  padding:16px;
  text-align:center;
  font-family: "Bohemian Typewriter", serif;
  font-size:1.2rem;
  color: var(--muted);
  cursor: default;
user-select: none; 
}