html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  background: #000;
  color: #111;
  overflow-x: hidden;
  overflow-y: auto;
}

.xp-desktop {
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xp-window {
  width: min(920px, 100%);
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid #1b4f9c;
  border-radius: 9px 9px 5px 5px;
  background: #ece9d8;
  box-shadow:
    0 22px 45px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px #ffffff;
  transform-origin: center;
}

.xp-titlebar {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 12px;
  color: #fff;
  background: linear-gradient(to bottom, #2f82ff 0%, #0754d6 55%, #003c9e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);
}

.xp-title {
  font-size: 0.98rem;
}

.xp-window-buttons {
  display: flex;
  gap: 4px;
}

.xp-window-buttons button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #ffffff;
  border-radius: 4px;
  color: #fff;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 20px;
  background: linear-gradient(to bottom, #79b6ff, #1d63d8 55%, #0642aa);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55);
  cursor: default;
}

.xp-window-buttons button:last-child {
  background: linear-gradient(to bottom, #ff9a7a, #e5411e 55%, #a91505);
}

.xp-menu-bar {
  display: flex;
  gap: 22px;
  padding: 7px 12px;
  background: #ece9d8;
  border-bottom: 1px solid #c9c5b4;
  color: #222;
  font-size: 0.92rem;
}

.xp-menu-bar span::first-letter {
  text-decoration: underline;
}

.xp-header {
  padding: 24px 16px 12px;
  text-align: center;
}

.xp-header h1 {
  margin: 0;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  color: #123d8f;
  letter-spacing: -0.04em;
  text-shadow: 2px 2px 0 #fff;
}

.xp-header p {
  margin: 8px 0 0;
  font-size: 1.08rem;
  color: #333;
}

.container {
  flex: 1;
  width: min(720px, calc(100% - 32px));
  margin: 8px auto 12px;
}

.card {
  padding: 18px;
  text-align: center;
  background: #fffef5;
  border: 2px solid #7f9db9;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #aca899,
    4px 4px 0 rgba(0, 0, 0, 0.12);
}

.card h2 {
  margin: 0 0 14px;
  color: #0b4fb3;
  font-size: 1.55rem;
}

.card p {
  max-width: 560px;
  margin: 0 auto;
  color: #222;
  font-size: 1.03rem;
  line-height: 1.55;
}

.xp-button {
  margin-top: 16px;
  padding: 8px 28px;
  min-width: 130px;
  border: 1px solid #003c74;
  border-radius: 3px;
  color: #111;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 1rem;
  background: linear-gradient(to bottom, #ffffff 0%, #f4f1e6 45%, #d8d2bd 100%);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #8b8878;
  cursor: pointer;
}

.xp-button:hover {
  background: linear-gradient(to bottom, #fff7d7 0%, #f1dc8b 50%, #d6b84e 100%);
}

.xp-button:active {
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.25);
  transform: translate(1px, 1px);
}

.site-footer {
  margin-top: auto;
  padding: 8px 12px;
  text-align: center;
  border-top: 1px solid #c9c5b4;
  color: #555;
  font-size: 0.9rem;
}

.site-footer p {
  margin: 0;
}

.site-footer a,
.site-footer a:visited,
.site-footer a:hover,
.site-footer a:active {
  color: inherit;
  text-decoration: none;
}

 .site-footer a:hover {
   color: #0b4fb3;
 }

.wizzing .xp-window {
  animation: wizz-shake 0.6s linear !important;
  will-change: transform;
}

@keyframes wizz-shake {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  10% {
    transform: translate3d(-12px, 5px, 0) rotate(-1.2deg);
  }
  20% {
    transform: translate3d(12px, -5px, 0) rotate(1.2deg);
  }
  30% {
    transform: translate3d(-14px, 4px, 0) rotate(-1deg);
  }
  40% {
    transform: translate3d(14px, -4px, 0) rotate(1deg);
  }
  50% {
    transform: translate3d(-10px, 6px, 0) rotate(-0.8deg);
  }
  60% {
    transform: translate3d(10px, -6px, 0) rotate(0.8deg);
  }
  70% {
    transform: translate3d(-6px, 3px, 0) rotate(-0.5deg);
  }
  80% {
    transform: translate3d(6px, -3px, 0) rotate(0.5deg);
  }
  90% {
    transform: translate3d(-2px, 1px, 0) rotate(-0.2deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@media (max-width: 640px) {
  body {
    overflow-y: auto;
  }

  .xp-desktop {
    padding: 8px 8px 24px;
    align-items: flex-start;
  }

  .xp-window {
    height: calc(100svh - 32px);
    border-width: 2px;
  }

  .xp-title {
    font-size: 0.82rem;
  }

  .xp-window-buttons button {
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
  }

  .xp-menu-bar {
    gap: 10px;
    padding: 6px 8px;
    font-size: 0.76rem;
    overflow: hidden;
  }

  .xp-header {
    padding: 16px 10px 8px;
  }

  .xp-header h1 {
    font-size: 2.1rem;
  }

  .xp-header p {
    font-size: 0.82rem;
  }

  .card {
    padding: 14px;
  }

  .card h2 {
    font-size: 1.2rem;
  }

  .card p {
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .xp-button {
    margin-top: 12px;
    padding: 7px 20px;
    font-size: 0.9rem;
  }

  .site-footer {
    font-size: 0.72rem;
    padding: 8px;
  }
}