html {
  height: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 70, 229, 0.3) transparent;
  font-family: "Newsreader", Georgia, "Times New Roman" !important;
}

body {
  overscroll-behavior: none;
  min-height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Inter", sans-serif;
  background-color: #f0ede5;
  display: flex;
  flex-direction: column;
  position: relative;
}

body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background-color: rgba(79, 70, 229, 0.3);
  border-radius: 20px;
}

h1,
h2,
h3,
h4,
.serif {
  font-family: "Newsreader", serif;
}

.page-container {
  background-color: #f9f6f0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  position: relative;
  border-left: 1px solid rgba(0, 0, 0, 0.03);
  border-right: 1px solid rgba(0, 0, 0, 0.03);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.01em;
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .page-container {
    max-width: 85%;
    margin: 1rem auto;
    border-radius: 0.5rem;
  }
}

/* Letter-sized dimensions - 8.5" x 11" proportions */
@media (min-width: 992px) {
  .page-container {
    max-width: 8.5in;
    /* Using aspect ratio close to US Letter */
    min-height: 11in;
    margin: 2rem auto;
  }
}

.page-texture {
  position: relative;
}

/* Enhanced paper texture with multiple layers */
.page-texture::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d9ccb0' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-attachment: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* Enhanced paper texture with noise */
.page-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAFGElEQVR4Xu2dT06jQBTGHyVuPIDegCN4A9I3qCeoPUGNJ7BuXBETTTSu3XkDNyYmutM76A1k4wmc9hVMTJsRQf6Uee+bmTApyfQVvvfer3zzZgjHC/pfZYFxZdGIYArEsUkQQAgkMAs4Fo7sEAJxzAKOhSM7hEAcs4Bj4cgOIRDHLOBYOLJDCMQxCzgWjuwQAnHMAo6FIzuEQByp5Ytnvz6/zv9G96Nf+Ru26w+jh5ub69/9QOP60g39f/Pz6W3+avjw+fFYWJ/dbE5OTrL79+/hR1Vda7AJRCLSx7Ov+bMsKy4E4G3Z+PZ2kZbhyPUQCEcZkZALdggUODIOMBAZlPzLb+tnUyLl8/NjLnO/6loCkcgDOp+UWCk0Z1l2qmVbg/nIQABjMpnk86Jp2mjaXQQim5RwYsJoKiVrAxjSJfD35XIZHFeJY1a3HxAXhUYgdQsw4oWf0Fwf9MMsKwsowkDyXM2zqvF4nM3n87xbFTRVNdCqz9nKspp2Aq5JMFSIYEqDoOrqkzuEQGrrCu0XFmJsOkIKpCYg5Q8rqIBqAUkgVYPwyBOoJGrskFAqfJ1q49ghHC3EiQ3NlMbTdgJhe4RrDrGwCcTCypxYCMTCyhoccoE4sLPAZ4lAWGbhGEMgHKvQ2QBiVkIgdN5jQS8QBFKRxS1pXfYzqHVIZmVNT2KDulUgsNBiBlEFUhWr1hxyiUBW+5I+gGjNshDEcrnM9yf7gKEKpAwi5h5lX51yzTlkFQY+3yUMlUCqYNScQ5ATshZENkj1UZdohQJgYM4QwNjb28v7Vd6jFg4OzH72hUAmk0nd1OqGAZUKKw2Xy2WjrYNiGGrtkKokjmuN3pHPF4tF/nvUbvZA63yl3hZIl0OEfR0KM5Dye7tgYN5AdxQjv/hKtQ6pAwhiZXt7e42+0nOTqMpnWQaC34sSUZaVYCxSDiSuhQZXGOIe5lAIowsGTqrZJVgcgCwCEYHAYOsOlbe1OQDGBQadAtURnxZ8VFhqBFLXTEg4UGdUiTl1HUJZVpvZFx8TH4JZeXJyzAspBwcdgjfcBiNxEMhuLpdLLfOljSzQaIfENcbVAYS5c2xuZTkCPdlZVldtMZ1Os9ls1rkbagCxK3ZPfXI88+7urqNUWXstgfQjnYUjdR0S15K2eoeAQteh8WQyyW1WfmQDH9LlQFk3p10Aglg2NjayKhh4ZnwTAucZB+xWnE7qc1udQxAEFgu4Fj8iwZcwmqSo7ZeuQGRbx3cCj1uIqzRaImqcWDfFlCcJCKt8yBtvHXRVXdImELZ5qgMj31kMUQQVINRxnUC6wMAu6AJhvctiR3jRIU11gy0geBFkVwiDXXPs7e3lLwmvxRyLIMz2ywdMnNd8PveqNLcGpC4FblP0bTCsA1Fb85QnITp/Y2MjW19fz6/HxdbRGF+L323iuiMMnTfIo+zKRF0lIZWAhFWFnVGXrpZTzaZ/O2Z5YioHUvcBbemcVgHRBkPLxGwLgj3RKgAp+s9p3H29XMZ1FUFonpiWgWifkDbNvqqhlPc5dR1GnSfaGIgLMDRPLK1AXILR9RiImjrD6DmiLmVTW9zYAowxOqNQx7oyYaxzrEsGsT55NoGUOyROWTfpH3VuAgjtizUgIRCXYSClhbwRSEDZ/zeQ6XRa28mq2qSLrU9KkW0YYYf09/mq+vxWdoirRnY1biepbKvRXI3LuiH8A/4N/BXyn+RjAAAAAElFTkSuQmCC");
  opacity: 0.15;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}

/* Subtle paper lines */
.page-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    rgba(99, 102, 241, 0.05) 31px,
    rgba(99, 102, 241, 0.05) 32px
  );
  pointer-events: none;
  z-index: 1;
}

/* Paper color tint overlay */
.page-tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 248, 230, 0.7) 0%,
    rgba(255, 250, 240, 0.7) 100%
  );
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: overlay;
}

/* Paper edges with soft shadow */
.page-container {
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* Subtle paper edge effect */
.paper-edge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.03));
  z-index: 4;
}

/* Paper edges */
.page-edge-left:before,
.page-edge-right:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 5;
}

.page-edge-left:after,
.page-edge-right:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 4;
}

.page-edge-left:before {
  left: 0;
  background-color: rgba(0, 0, 0, 0.04);
}
.page-edge-left:after {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0));
}

.page-edge-right:before {
  right: 0;
  background-color: rgba(0, 0, 0, 0.04);
}
.page-edge-right:after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0));
}

/* Paper top and bottom edges */
.page-container:before,
.page-container:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 5;
}

/* Content and footer wrappers */
.page-outer-wrapper {
  flex: 1;
  position: relative;
  z-index: 10;
  padding: 1.5rem;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .page-outer-wrapper {
    padding: 2.5rem;
  }
}

.content-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
}

.footer-wrapper {
  position: relative;
  z-index: 10;
  margin-top: 2rem;
}

/* Letterhead watermark */
.letterhead-watermark {
  position: absolute;
  top: 5%;
  right: 5%;
  font-size: 5rem;
  opacity: 0.05;
  transform: rotate(-15deg);
  font-weight: bold;
  font-family: "Newsreader", serif;
  pointer-events: none;
  z-index: 0;
}

/* Letterhead watermark */
.letterhead-watermark-bottom {
  position: absolute;
  bottom: 5%;
  left: 5%;
  font-size: 5rem;
  opacity: 0.05;
  transform: rotate(-15deg);
  font-weight: bold;
  font-family: "Newsreader", serif;
  pointer-events: none;
  z-index: 0;
}

/* Paper fibers texture */
.paper-fibers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeBlend mode='overlay'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
  opacity: 0.85;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: multiply;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Simple footer style */
.footer {
  border-top: 1px solid rgba(107, 114, 128, 0.2);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.75rem;
  color: rgba(107, 114, 128, 0.7);
  height: 2.5rem;
}

/* Logo container on top */
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-top: 1rem;
}

/* Responsive navbar */
.navbar {
  position: relative;
  z-index: 20;
}

/* Improved scrollbar for mobile */
@media (max-width: 767px) {
  html {
    scrollbar-width: thin;
  }

  body {
    overflow-y: auto;
  }
}

/* Custom select dropdown styling */
#host-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238f8fd2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  background-size: 0.65em auto;
  padding-right: 1.5em;
}

#host-select::-ms-expand {
  display: none;
}