@font-face {
    font-family: 'Action Man Shaded';
    src: url('ActionManShaded.woff2') format('woff2'),
        url('ActionManShaded.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Action Man';
    src: url('ActionMan-BoldItalic.woff2') format('woff2'),
        url('ActionMan-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}


img {
    width: 100%;
}

.sidenav {
    background-color: #b9b9b9;
    padding: 30px 20px 10px;
}

.sidenav a:link {
    color: black;
}

.sidenav a:visited {
    color: darkslategrey;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav a:active {
    color: lightskyblue;
}


.home {
    font-family: 'Action Man Shaded', Arial, sans-serif;
    font-size: 3.5em;
    color: black;
    text-decoration: none;
    margin: 10px;
    padding: 2px;
    cursor: pointer;
}

.menu {
    font-family: 'Action Man', Arial, sans-serif;
    font-size: 1em;
    color: black;
    text-decoration: none;
    margin: 10px;
    padding: 2px;
    cursor: pointer;
}

#active{
    background-color: whitesmoke;
}

.sidenav a:link {
    color: black;
}

.sidenav a:visited {
    color: darkslategray;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav a:active {
    color: lightskyblue;
}

.bio {
    font-family: 'Cabin', sans-serif;
    font-size: 1.5em;
    margin: 30px;
}



@media screen and (min-width:1000px) {
   .sidenav {
        height: 100%;
        width: 160px;
        position: fixed;
        background-color: #b9b9b9;
        overflow-x: hidden;
        padding-top: 20px;


    }

    .sidenav a {
        padding: 8px 0;
        text-decoration: none;
        color: black;
        display: block;
    }


    .home {
        font-size: 45px;

        margin: 0;
        padding: 0;
    }

    .menu {
        font-size: 20px;
    }

    .main {
        margin-left: 200px;
        /* Same as the width of the sidenav */
        font-size: 28px;
        /* Increased text to enable scrolling */
        padding: 0px 10px;
        overflow: hidden;
        background-color: white;
    }
    .bio{ font-size: 25px;}
    
}

    @media screen and (min-width:1800px ) {

         .sidenav {
            height: 100%;
            width: 200px;
        }

        .home {
            font-size: 40px;
        }

        .menu {
            font-size: 24px;
        }

        .main {
            margin-left: 240px;
            /* Same as the width of the sidenav */
            font-size: 28px;
            /* Increased text to enable scrolling */
            padding: 0 10px;
            overflow: hidden;
            background-color: white;

        }
bio{ font-size: 30px;}

    }