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

/* PHONE STYLES AND LARGER */

body {
    background-color: rgba(33, 135, 50, 0.8);
    color: #000;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 1.5;
    font-size: 14pt;
}

    header {
        text-align: center;
        color: rgb(40, 40, 39);
        font-family: "Bitcount Prop Single Ink", system-ui;
        font-style: normal;
        letter-spacing: 5px;
        border: 5px solid #373a38;
        border-radius: 5px;
        margin: 10px;
    }

    header nav {
        font-size: 14pt;
        padding-bottom: 10px;
    }

    main {
        float: center; 
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap;
    }

    a {
        letter-spacing: 1px;
    }

    nav a:hover {
        color: #a6a5a5;
    }

    div nav {
        text-align: left;
        color: #2d2c2c;
        line-height: 25px;
    }

    div h2 {
        color: #2d2c2c;
        font-size: 16pt;
        font-weight: bold;
    }

   main div {
        border: 4px solid blue;
        border-radius: 5px;
        padding: 10px 25px;
        background-color: rgb(85, 154, 177);
        margin: 10px 20px;
        min-width: 300px;
        padding-left: 30px;
        margin-left: 100px;
    }

    .studious-img {
        float: bottom; 
        display: block; 
        max-width: 300px;
        height: auto;
        border: 5px solid #960;
        border-radius: 10px;
        box-shadow: -5px 10px #595b46;
        margin: 20px auto;
    }

    footer {
        text-align: center;
        margin-top: 50px; 
        border: 3px solid #616060;
        color: #000000;
        float: bottom;
        margin-bottom: 10px;
        border-radius: 5px;
    }

/* LANDSCAPE AND LARGER */

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

    body {
    background-color: rgba(33, 135, 50, 0.8);
    color: #000;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 1.5;
    font-size: 14pt;
    }

    header {
        text-align: center;
        color: rgb(40, 40, 39);
        font-family: "Bitcount Prop Single Ink", system-ui;
        font-style: normal;
        letter-spacing: 5px;
        border: 5px solid #373a38;
        border-radius: 5px;
    }

    header nav {
        font-size: 14pt;
        padding-bottom: 10px;
    }

    main {
        float: center; 
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap; 
        gap: 10px;
        padding: 10px;
    }

    a {
        letter-spacing: 1px;
    }

    nav a:hover {
        color: #a6a5a5;
    }

    div nav {
        text-align: left;
        color: #2d2c2c;
        line-height: 25px;
    }

    div h2 {
        color: #2d2c2c;
        font-size: 16pt;
        font-weight: bold;
    }

    main div {
        min-width: 450px;
        margin-top: 50px;
        margin-left: 20px;
        padding: 20px 30px;
    }

    .studious-img {
        float: right; 
        display: block; 
        width: 250px;
        height: auto;
        border: 5px solid #960;
        border-radius: 10px;
        box-shadow: -5px 10px #595b46;
        margin: 20px auto;
    }

    footer {
        text-align: center;
        margin-top: 200px; 
        border: 3px solid #616060;
        color: #000000;
        float: bottom;
    }

}