.center-text {
   text-align: center;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column; 
   align-items: center;
   flex-wrap: wrap;
  }

.left-text {
   text-align: left;

  }

.grid-container {
   display: grid;
   place-items: center;
   align-items: center;
   gap: 10px;
   padding: 10px;
}

.desktop-only {
   display: grid;
}

a.back-link {
  color: #d689ff;
}

a.back-link:active {
  color: #eac3ff;
}

a.back-link-aliz {
  color: #c40000;
}

a.back-link-aliz:active {
  color: #ff0000;
}

a.back-link-alli {
  color: #0088ad;
}

a.back-link-alli:active {
  color: #00b8d4;
}

a.back-link-mari {
  color: #6c7bcf;
}

a.back-link-mari:active {
  color: #acb9ff;
}

a.back-link-oil {
  color: #00f7ff;
}

a.back-link-oil:active {
  color: #affcff;
}

a.back-link-greg {
  color: #ffca85;
}

a.back-link-greg:active {
  color: #ffdbab;
}

a.back-link-Flug {
  color: #ffc862;
}

a.back-link-Flug:active {
  color: #ffe7ba;
}

a.back-link-Ed {
  color: #245ca5;
}

a.back-link-Ed:active {
  color: #3c8af1;
}

a.back-link-Oliv {
  color: #658cbe;
}

a.back-link-Oliv:active {
  color: #abcfff;
}

a.back-link-Rest {
  color: #8f88ee;
}

a.back-link-Rest:active {
  color: #c6c2ff;
}

a.back-link-Sock {
  color: #87fdb1;
}

a.back-link-Sock:active {
  color: #dcffe8;
}

a.back-link-Var {
  color: #00ff00;
}

a.back-link-Var:active {
  color: #bcffbc;
}

a.back-link-Clo {
  color: #ffcbb3;
}

a.back-link-Clo:active {
  color: #fff8f4;
}

p {

   color:#ffffff;
   font-size: clamp(14px, 4vw, 18px);
   font-family: Lucida Console, monospace;
   text-align: center;
   align-items: center;
   word-spacing: 5px;
   border-color: #a5a5a5; 
   border-width: 5px; 
   border-top-style: double; 
   border-bottom-style: double; 
   border-left-style: solid; 
   border-right-style: solid; 
   width: 100%;
   max-width: 1000px;
   padding: 10px;
   margin: 20px auto;
   box-sizing: border-box;

  }

h6 {

   color:#000000;
   font-size: clamp(14px, 4vw, 18px);
   font-family: Lucida Console, monospace;
   text-align: center;
   align-items: center;
   word-spacing: 1px;
   border-color: #a5a5a5; 
   border-width: 5px; 
   border-top-style: double; 
   border-bottom-style: double; 
   border-left-style: solid; 
   border-right-style: solid; 
   width: 100%;
   max-width: 1000px;
   margin: 20px auto;
  }

h1 {
   color:#ffffff;
   font-size: clamp(18px, 6vw, 25px);
   font-family: Lucida Console, monospace;
   text-align: center;
   align-items: center;
   padding: 0 10px;
   margin: 10px auto;

  }

h2 {
   color:#ffffff;
   font-size: clamp(24px, 8vw, 40px);
   font-family: Lucida Console, monospace;
   text-align: center;
   align-items: center;
  }
 
h3 {
   color:#232323;
   font-size: clamp(10px, 3vw, 12px);
   font-family: Lucida Console, monospace;
   text-align: center;
   align-items: center;

  }


.p1 {
   width: 100%;
   max-width: 1000px;
  }

body {
   padding: 0;
   margin: 0;
   width: 100%;
   background-color: #000000;
   line-height: 23px;
  }

a {
   text-decoration: none;
   font-size: clamp(16px, 5vw, 25px);
   font-family: Lucida Console, monospace;
   color:#e0e0e0;
   margin: 5px;
   display: inline-block;
   padding: 8px 12px;
   border-radius: 4px;
   transition: all 0.3s ease;
  }

a:hover {
   text-decoration: underline;
   transform: scale(1.02);
  }

a:active {
   text-decoration: underline;
   font-family: Lucida Console, monospace;
   color:#ffffff;
   margin: 5px;
  }

@media (max-width: 768px) {
   p, h6 {
      width: 100%;
      margin: 15px auto;
      border-width: 3px;
   }
   
   h1 {
      font-size: clamp(16px, 5vw, 22px);
   }
   
   h2 {
      font-size: clamp(20px, 6vw, 32px);
   }
   
   a {
      font-size: clamp(14px, 4vw, 20px);
      margin: 4px 3px;
      padding: 6px 10px;
   }
   
   .center-text {
      flex-direction: column;
   }
   
   .center-text h1 {
      word-break: break-word;
   }

    .desktop-only {
       display: none;
    }
}

@media (max-width: 480px) {
   p, h6 {
      width: 100%;
      margin: 10px auto;
      border-width: 2px;
      padding: 8px;
      font-size: clamp(12px, 3.5vw, 16px);
   }
   
   h1 {
      font-size: clamp(14px, 4vw, 18px);
      margin: 8px auto;
   }
   
   h2 {
      font-size: clamp(18px, 5vw, 26px);
   }
   
   a {
      font-size: clamp(12px, 3vw, 16px);
      margin: 3px 2px;
      padding: 5px 8px;
   }
   
   body {
      line-height: 20px;
   }
   
   .grid-container {
      gap: 8px;
      padding: 8px;
   }
}