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

body {
    background-color: tan;
    color: #486;
    font-family: verdana;
    margin: 0;
    padding-bottom: 80px; /* padding added to account for fixed footer */
    }

header {
    text-align: center;
    border-top: 2px solid #222;
    border-bottom: 2px solid #222;
    padding: 20px 0;
    }
    
    header h1 {
        text-transform: capitalize;
        font-size: 4em;
        letter-spacing: 8px;
        text-shadow: 2px 3px 4px #222;
        margin-bottom: 0;
        }
        
    header h1 + p {
        color: #222; font-weight: bold;
        margin-top: -20px;
        text-transform: uppercase;
        }
    
    .mighty_oak_div {
        position: relative;
        width: 100%;
        text-align: center;
    }

    .mighty_oak_div img {
        width: 100vh;
        max-width: 85%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    nav {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 20px;
        z-index: 10;
        }

    nav a {
        display: inline-block; text-align: center;
        padding: 12px 16px;
        text-decoration: none;
        background-color: rebeccapurple;
        color: #EEE; font-weight: bold;
        border: 8px groove #222;
        font-size: 1em;
        margin: 0;
        }
        
    nav a:hover {
        background-color: orangered;
        color: #000;
        }
    
    
    footer {
        background-color: #222;
        color: #EEE;
        position: fixed;
        bottom: 0px; left: 0px;
        width: 100%; height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        }
        
    .dropbtn {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rebeccapurple;
        color: #eee;
        font-weight: bold;
        border: 8px groove #222;
        padding: 8px 12px;
        font-size: 0.9em;
        cursor: pointer;
        z-index: 10;
    }

    .dropbtn:hover {
        background-color: orangered;
        color: #000;
    }

    /* Hide the Checkbox */
    .dropdown-toggle {
        display: none;
    }

    /* dropdown content (hidden by default */
    .dropdown-content {
        display: none;
        position: absolute;
        bottom: 70px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(102,51,153,0.9);
        min-width: 180px;
        max-height: 80vh;
        overflow-y: auto; /* adds scroll to drop down if necessary */
        border: 8px groove #222;
        z-index: 15;
        text-align: center;
    }

    /* places links inside dropdown */
    .dropdown-content a{
        color: #eee;
        padding: 8px 10px;
        text-decoration: none;
        display: block;
        font-weight: bold;
        font-size: 0.9em;
        line-height: 1.3;
    }

    .dropdown-content a br {
        display: none;
    }

    /* alternative to <br> - add spacing between line */
    .dropdown-content a.multi-line {
        line-height: 1.8; /* only for links needing 2 lines */
        padding: 6px 10px;
    }

    /* hover effect for dropdown links */
    .dropdown-content a:hover {
        background-color: orangered;
        color: #000;
    }

    /* desktop: show on hover */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    .credit {
        font-size: 0.8em;
        color: #aaa;
        margin-top: 5px;
    }

    /* mobile: show when checkbox is  checked */
    @media (max-width: 768px) {
        .dropdown-content {
            width:90%;
            max-width: 250px;
            bottom: 65px;
        }

        .dropbtn {
            padding: 6px 10px; /* even smaller on mobile */
            font-size: 0.85em;
        }

    /* hide on hover (mobile) */
    .dropdown:hover .dropdown-content {
        display: none;
    }

    /* show when checkbox is checked */
    .dropdown-toggle:checked ~ .dropdown-content {
        display: block;
    }
    }