html{
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
}




   .header{
        min-height: 100vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.35), rgba(4,9,30,0.35)),url(images/IMG_1403.JPG);
    
        background-position: center;
        background-size:cover;
        position: relative;
      }

        h1{
        font-family:silkscreen;
        /*display: inline-block; - doesnt really di much for phone and makes weird format*/
        padding-top: 20%;
        font-size: 3rem;
        font-family: "press start 2p";
        text-align: center;
        color: antiquewhite;
        /* offset-x | offset-y | blur-radius | color */
        text-shadow: 4px 4px 6px rgb(21, 37, 6);
    }
    




    nav{
        display: flex;
        padding: 1% 4%;
        justify-content: space-between;
        align-items:center;
        font-family: "silkscreen";
    }

        .nav-links{
            display: block;
            flex: 1;
            text-align: right;
        }
        .nav-links ul li{
            list-style: none;
            display: inline-block;
            padding: 8px 12px;
            position: relative;
        }
        .nav-links ul li a{
            color:antiquewhite;
            text-decoration: none;
            font-size: 13px;
        }
        .nav-links ul li::after{
            content: '';
            width: 0%;
            height: 2px;
            background: rgb(57, 102, 6);
            display: block;
            margin: auto;
            transition: 0.5s;
        }
        .nav-links ul li:hover::after{
        width: 100%;
        }



  
    body {
        font-family: Nokora;
        padding: 20px;
        background: rgb(252, 244, 234);
    }
    h2 {
        font-family: silkscreen;
    }
    h3 {
        font-family: Bytesized;
    }