@font-face {
    font-family: 'GothicByte';
    src: url(fonts/GothicByte.ttf);
  }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(35px);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .content {
        text-align: center;
        color: white;
        font-size: 24px;
    }
    body {
        background-color: black;
        font-family: 'GothicByte', sans-serif;
    }
    .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .a {
      color: #FFFFFFB3;
    }

    .a:hover {
    color: white;
    }

    .textbox {
        width: 700px;
        color: #FFFFFFB3;
        font-size: 18px;
        font-weight: 200;
        line-height: 30px;
        margin: 20px 0 20px;
    }
    .links {
        color: #FFFFFFB3;
        text-align: center;
        width: 700px;
        margin: 10px 0 10px;
    }
    .links a {
        text-decoration: none;
        color: #FFFFFFB3;
        font-weight: 600;
        font-size: 20px;
    }
    .links a:hover {
        color: white;
    }

#logo {
margin-top: 20px;
text-align: center;
animation-fill-mode: forwards;
}

    @font-face {
        font-family: 'GothicByte';
        src: url('GothicByte.ttf') format('truetype');
    }
    @keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    @media only screen and (max-width: 768px) {

        .links a {
            font-size: 18px;
        }
      }
    @-webkit-keyframes flicker
    {
        0% {opacity:0;}
        9% {opacity:0;}
        10% {opacity:.5;}
        13% {opacity:0;}
        20% {opacity:.5;}
        25% {opacity:1;}
    }