:root{
    --main-color:white;
    --main-bg-color:black;
    -webkit-font-smoothing: antialiased;
}


body{
    background-color: var(--main-bg-color);
    overflow: hidden;
    height: 100%;
    width: 100%;
    color: white;
    font-family: 'Helvetica-Neue';
}

h1{
   text-align: center;
   font-size: 45px;
   font-family: 'Snell Roundhand';
   color: white;
   margin: 15px;
   -webkit-font-smoothing: antialiased;
  
}

#text-box p{
   font-family: plain,'Helvetica-Neue';
   color: #e5e5e5;
   font-weight: 400;
   text-align: center;
   font-size: 25px;
   letter-spacing: -0.5px;
   margin: 0;
   padding: 0;
   animation: slide-up 3s ease-in-out;
   line-height: 45px;
   text-rendering: optimizeLegibility;
}

#creatortag{
   text-align: center;
   font-size: 22px;
   cursor: pointer;
}

#creators{
   text-align: center;
   visibility: hidden;
   font-size: 20px;
}

/*@keyframes slide-up{
   0%{
      line-height: 100px;
   }
   100%{
      line-height: 45px;
   }
}*/

a {
   text-decoration: none;
   color: var(--main-color);
}

a:hover {
   cursor: pointer;
   color: #90e0ef;
}

#back-arrow{
   text-align: center;
}

@media only screen and (max-device-width: 768px) {
   * {
       background-color: black;
       -webkit-font-smoothing: antialiased;
   }

   header p {
      color: white;
      font-style: 'Akkurat-Mono';
      font-size: 15px;
      font-weight: 400;
      text-align: center;
   }

   #text-box{
      position: fixed;
      width: 100%;
      height: 100%;
   }

   #text-box p{
      position:fixed;
      font-family: plain,'Helvetica-Neue';
      color: #e5e5e5;
      font-weight: 400;
      text-align: center;
      font-size: 13px;
      text-rendering: optimizeLegibility;
   }
}