*{
        margin: 0; padding: 0; box-sizing: border-box;
    }

    /* ======Mobile styles and bigger===== */

    body{
        background-color: #DDC3C3;
        color: black;
        font-family: "Comic Relief", sans-serif;
        line-height: 1.8;
        margin: 0px 30px;
    }

     h1{
        text-align: center;
        font-family: "Pacifico", sans-serif;
        font-size: 30px;
        color: #3B9797;
        padding-bottom: 8px;
        border: 4px solid #FFF58A;
        margin: 8px 0px;

    }

    header > h1, h2{
        color: #774e74;
        padding-bottom: 10px;
        padding-top: 15px;
    }

    p{
        padding-bottom: 15px;
    }

    .me-photo{
        position: relative;
    }

    .me-photo figure{
        background-image: url(../images/astoria2.jpg);
        min-height: 200px;
        background-size: 150%;
        background-position: 50% 53%;
        border: 2px solid #FFF58A;
        border-radius: 30px;
        box-shadow: 10px 10px 25px  #3B9797;
        margin-bottom: 15px;
    }

    #navigation{
        border: 4px solid #FFF58A;
        display: flex;
        flex-flow: row wrap;
        gap: 5px;
        margin-bottom: 10px;
        justify-content: center;
    }

    nav{
        max-width: fit-content;
        flex-grow: 1;
        flex-basis: 20%;
        background-color: #3b979789;
        padding: 3px;
        text-decoration: none;
    }

    nav:hover{
        border: 3px solid #FFF58A;
        color: #FFF;
        transition: 150ms linear;
    }

    #tennis-nav{
        background-color: #DDC3C3;
        color: black;
    }

    footer{
        position: relative;
        background-color: #6B3F69;
        opacity: .7;
        color: #EEE;
        text-align: center;
        font-size: 12px;
        padding: 2px;
    }


    /* ======= Landscape Tablet and Bigger ======= */

    @media screen and (min-width: 1020px){
        
    body{
        margin: 0px 100px;
     }

    h1{
        font-size: 36px;
    }

    .me-photo figure{
        width: 350px; height: 450px;
        float: right;
    }

    footer{
        margin-right: 360px;
    }
    }