@import url('https://fonts.googleapis.com/css?family=Montserrat:700,400&display=swap');

:root {
  --sdnog-red: #C41617;
  --sdnog-dark: #860e10;
  --sdnog-accent: #FFDC00;
  --web01-bg: linear-gradient(135deg, var(--sdnog-red) 0%, #f44336 100%);
  --web02-bg: linear-gradient(135deg, #fff 0%, var(--sdnog-red) 100%);
}

body {
  font-family: 'Montserrat', Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sdnog-red);
  color: #fff;
  transition: background 0.5s;
}

body.web01 {
  background: var(--web01-bg);
}

body.web02 {
  background: var(--web02-bg);
  color: var(--sdnog-dark);
}

.container {
  background: rgba(255,255,255,0.95);
  border-radius: 22px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.20);
  padding: 48px 32px 32px 32px;
  text-align: center;
  width: 350px;
  border: 3px solid var(--sdnog-red);
}

.logo {
  width: 110px;
  margin-bottom: 18px;
  margin-top: -30px;
}

h1 {
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0 0 18px;
  letter-spacing: 1px;
  color: var(--sdnog-red);
  text-shadow: 1px 1px 0 #fff, 0 0 6px #c4161744;
}

.server-name {
  font-size: 2.4rem;
  color: var(--sdnog-accent);
  letter-spacing: 2px;
  text-shadow: 1px 1px 4px var(--sdnog-dark);
}

body.web02 .server-name {
  color: var(--sdnog-red);
  text-shadow: 1px 1px 4px #fff;
}

.server-icon {
  font-size: 4rem;
  margin: 30px 0 16px;
  color: var(--sdnog-red);
  animation: bounce 1.4s infinite alternate;
}

.highlight {
  color: var(--sdnog-red);
  font-weight: bold;
  text-shadow: 1px 1px 2px #fff;
}

footer {
  margin-top: 30px;
  font-size: 0.95em;
  color: var(--sdnog-dark);
}

footer a {
  color: var(--sdnog-red);
  text-decoration: none;
  font-weight: bold;
}

@keyframes bounce {
  from { transform: translateY(0);}
  to { transform: translateY(-16px);}
}