body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
}
/* link code */
    a {
        color: white;
        text-decoration: none;
        padding-bottom: 2px;
        border-bottom: 1px white;
    }
    a:link, a:visited {
        border-bottom-style: dotted;
    }
    a:hover, a:active {
        border-bottom-style: solid;
    }
/* no more link code :(*/
    .text {
        font-family: "Nunito", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        position: absolute;
        top: 70px;
        color: white;
        z-index: 2;
        min-height: 100vh;
        width: 100%;
        max-width: 700px;
        padding-top: 50px;
        background-color: rgba(0,0,0,0.3);
        border-radius: 50px;
        text-align: center;
        display: table;
    }
    .bg {
        background-color: #000000;
        background-image: url("images/synthwave.jpg");
        height: 100%;
        z-index: 1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .topnav {
        overflow: hidden;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 140px;
    }
    .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-family: "Syne", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: 17px;
        border-bottom: none;
        background-color: rgba(0,0,0,0.2)
    }
    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }
    .topnav a.active {
        background-color: rgba(0,0,0,0.5);
        color: white;
        border-bottom: 1px solid white;
    }
    @keyframes fadeIn {
        0% {opacity: 0;}
        100% { opacity:1;}
    }