* {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
    }
    
    body {
        font-size: 15px;
        line-height: 1.6em;
        font-family: 'Nunito', Helvetica, sans-serif;
        color: rgb(237, 248, 250);
        /*subject to change*/
        background-color: #121212;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        min-width: 320px;
        position: relative;
        z-index: 1;
    }
    
    header li {
        list-style: none;
    }
    
    header li a:link {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
    }
    
    header li a:visited {
        color: rgba(255, 255, 255, 0.9);
    }
    
    header li a:hover {
        color: rgb(255, 255, 255);
    }
    
    header li a:active {
        color: rgba(238, 226, 226, .4);
    }
    
    .current_nav {
        /* CHANGE BRUH */
        text-decoration: underline;
    }
    
    nav.topnav {
        font-size: 20px;
        color: rgba(4, 21, 37, 0.89);
        /*subject to change*/
        background-color: #292929;
        display: flex;
        justify-content: flex-end;
        padding: 10px 15px 10px 15px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, .6);
    }
    
    nav.topnav ul {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    
    nav.topnav li {
        padding-left: .4em;
        padding-right: .4em;
    }
    
    nav.topnav li:first-child {
        padding-left: 0em;
    }
    
    nav.topnav li:last-child {
        padding-right: 0em;
    }
    
    .page {
        background-color: #121212;
        z-index: -100;
        position: relative;
        overflow: hidden;
        /* margin-top: 40px; */
        letter-spacing: .06em;
    }
    
    .description {
        /* border: 1px solid blue; */
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
    }
    
    .description-wrapper {
        padding-top: 75px;
        padding-bottom: 75px;
        padding-left: 25px;
        padding-right: 25px;
    }
    
    .description-wrapper {
        height: 80vh;
        margin-top: 10%;
        margin-bottom: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    
    .intro {
        font-size: 1.6em;
        font-weight: 500;
        line-height: 1.6em;
        word-spacing: 0.35em;
        text-align: left;
    }
    
    section li {
        list-style: none;
    }
    
    .container {
        margin: 0 auto;
        padding-bottom: 140px;
        padding-top: 10px;
        display: flex;
        justify-content: center;
        width: 80vw;
    }
    
    .cards {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .card-item {
        /* border: 1px dotted red; */
        width: 300px;
        height: 430px;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        margin-bottom: 10px;
        margin-top: 10px;
        margin-left: 25px;
        margin-right: 25px;
        box-shadow: 0 2.5px 5px 0 rgba(0, 0, 0, .6);
        transition: .03s;
        background-color: #1d1d1dc5;
    }
    
    .card-item a {
        text-decoration: none;
        color: inherit;
    }
    
    .card-item p {
        padding-top: 5px;
        padding-right: 10px;
        padding-left: 10px;
        text-align: justify;
    }
    
    .card-item h2 {
        text-align: center;
    }
    
    .card-item:hover {
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .6);
    }
    
    .card-wrapper {
        position: relative;
    }
    
    .card-image {
        object-fit: cover;
        width: 100%;
    }
    
    footer li {
        list-style: none;
    }
    
    nav.bottomnav {
        display: flex;
        justify-content: center;
        padding: 25px 15px 10px 15px;
        position: relative;
    }
    
    nav.bottomnav ul {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: center;
    }
    
    nav.bottomnav li {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    nav.bottomnav i {
        font-size: 1.8em;
        padding-right: 5px;
        padding-left: 5px;
        padding-bottom: 10px;
        color: white;
        text-shadow: 0 0px 5px rgba(0, 0, 0, .6);
    }
    
    .signature {
        text-align: center;
        padding-bottom: 20px;
        text-shadow: 0 0px 5px rgba(0, 0, 0, .6);
    }
    
    @media only screen and (max-width: 320px) {
        .intro {
            font-size: 1.3em;
        }
    }
    
    @media only screen and (min-width: 961px) {
        .description {
            max-width: 80%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        nav.topnav {
            font-size: 25px;
            padding: 13px 17px 15px 17px;
        }
        nav.topnav li {
            padding-left: .6em;
            padding-right: .6em;
        }
        .intro {
            font-size: 2.5em;
        }
    }