@font-face {
    src: url(../../fonts/frank/FrankfurterChrD/FrankfurterChrD.ttf);
    font-family: frank;
}
body, html {
    height: 100%;
    width: 100%;
}

body {
    background: url(images/beach_3.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: scroll;
}

@media screen and (min-width:320px) {
    .nav-wrapper {
        height: 100vh;
        width: 100vw;
        position: fixed;
        overflow-x: scroll;
    }
    .project-wrapper {
       /* width: fit-content; */
       height: fit-content;
       display: grid;
       align-items: center;
       justify-items: center;
    }
    .dead-wrapper {
        height: 25vh;
    }
    a {
        grid-row-start: 1;
        grid-column-start: 1;
        text-decoration: none;
    }
    
    .project-icon {
        width: 8em;
    }
    p {
        grid-row-start: 1;
        font-family: frank;
        color: #f7e18a;
        grid-column-start: 1;
        font-size: 35pt;
        filter: drop-shadow(0px 0px 7px blue);
        text-align: center;
    }
    p:hover {
        color: #4f0;
        filter: drop-shadow(0px 0px 7px #97ff00);
    }
}

@media screen and (min-width:700px) {
    p {
        font-size: 40pt;
    }
}