@font-face {
   font-family: Poppins;
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
}

@font-face {
   font-family: Questrial;
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/questrial/v18/QdVUSTchPBm7nuUeVf70viFl.woff2) format('woff2');
}

:root {
   font-family: Poppins, Questrial, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   justify-content: center;
   text-align: center;
   color: #fff;
   background: #201d2d url(bg.svg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   font-size: 1.4rem;
   box-sizing: border-box;
}

h1 {
   font-size: 3.5em;
   font-weight: 500;
   margin-bottom: 7vh;
   font-family: Questrial, Poppins, sans-serif;
}

body {
   margin: 0;
   overflow-x: hidden;
   width: 100%;
   min-height: 100vh;
}

main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-top: 5vh;
   min-height: 95vh;
}

.desktop-ul {
   color: #fff;
   display: inline-block;
   -webkit-user-select: none;
   user-select: none;
   padding-left: 0;
   text-align: center;
   width: 100vw;
   line-height: 2.85rem;
   width: fit-content;
   margin: 1rem 4rem;
}

@media (max-width: 820px) or (max-height: 500px) {
   h1 {
      font-size: 2.5em !important;
   }
   .desktop-ul {
      margin: 1rem 0.2rem;
   }
}

.desktop-ul li {
   background-color: #00000061;
   border-radius: 100px;
   padding: 0.6rem 1rem;
   margin: 0 0.1rem;
   display: inline;
   transition: background-color 0.2s;
   z-index: 10000;
   box-shadow: 0 0 15px #0000002c;
   user-select: none;
}

.desktop-ul li:hover {
   background-color: #000000bb;
}

.desktop-ul li a {
   color: #fff;
   text-decoration: none;
   display: inline-block;
   position: relative;
   z-index: 1;
   padding: 0 1em;
   margin: -0.9em;
   line-height: 2.7rem;
}

a.button {
   color: black;
   padding: 15px 25px;
   background-color: white;
   border: solid 2px black;
   font-size: 0.7em;
   text-decoration: none;
   box-shadow: #000 5px 5px 0;
   transition: box-shadow 0.2s ease, background-color 0.2s ease;
   margin: 0 1rem;
   margin-top: 1rem;
   display: inline-block;
}

a.home {
   position: absolute;
   top: 0.7rem;
   left: 0.7rem;
   margin: 0;
   font-size: 0.8em;
   padding: 12px 22px;
}

a.button:hover {
   background-color: #ccc;
   box-shadow: #000 2px 2px 0;
}

a.button:active {
   background-color: #aaa;
   box-shadow: #000 0 0 0;
}

noscript {
   color: #aa0e0e(110, 19, 19);
}

input[type='text'] {
   font-family: inherit;
   background: rgba(255, 255, 255, 0.1);
   border: none;
   font-size: 20px;
   color: #fff;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
   cursor: text;
   padding-left: 20px;
   border-radius: 1000px;
   height: 2rem;
   width: 14rem;
   margin-bottom: 4vh;
}