:root {
    --header-size: 5.5em;
    --partner-mobile-size: 9em;
    --nav-size: 3em;
    --footer-size: 1.5em;
    --content-padding: 2.5vw;

    --dsc-red: rgb(205, 16, 19);
    --dsc-red-darker: rgb(155, 16, 19);
}

* {
    box-sizing: border-box;
}

body {
    display: grid;
    grid-template-columns: 2fr 6fr 2fr;
    grid-template-rows: var(--header-size) var(--nav-size) var(--partner-mobile-size) auto var(--footer-size);
    grid-template-areas: 
                        "logo          header        clubs        "
                        "nav           nav           nav          "
                        "partner       partner       partner      "
                        "content-area  content-area  content-area "
                        "footer        footer        footer       ";
    column-gap: 3vw;
    row-gap: 1vh;

    font-size: 3.25vmin;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

    margin-top: 1vh;
}

.content-width {
    padding: 0 var(--content-padding);
}

#logo {
    grid-area: logo;

    display: flex;
    flex-direction: column;
    
    justify-content: center;
    align-items: center;

    padding-left: 2.5vw;
}

#clubs {
    grid-area: clubs;
    box-sizing: content-box;

    display: flex;
    flex-direction: column-reverse;
    gap: 0.25vh 2vw;

    justify-content: flex-start;
    align-items: flex-end;

    padding-right: 2.5vw;

    max-height: var(--header-size);
}

#clubs img {
    max-height: calc((var(--header-size) / 2) - 0.5vh);
}

#header {
    grid-area: header;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

#nav {
    grid-area: nav;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    background: var(--dsc-red);
    color: white;
}

#nav a {
    height: 100%;
    padding: 0 1.5vw;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: var(--dsc-red);
    color: white;
    font-size: 1em;
    font-weight: bold;

    transition: background-color 0.25s ease-in;
}

#nav a:hover {
    background-color: var(--dsc-red-darker);
}

#partner-desktop {
    display: none;
}

#partner-mobile {
    grid-area: partner;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1vh 0;

    max-height: 100%;
}

.partner div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0 4vw;
    margin: 0 1vw;
}

.partner div#first-row {
    flex: 0 0 0;
    height: 50%;
}

.partner div#second-row {
    flex: 1 0 0;
    height: 45%;

    justify-content: center;
    padding: 0 5vw;
}

.partner a {
    flex: 1 1 0;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
}

#partner-mobile img {
    max-height: 60%;
}

#partner-mobile #bmi img {
    max-height: 100%;
}

#content-area {
    grid-area: content-area;
    display: flex;
    flex-direction: column;

    min-height: calc(95vh - 19em);
}

#footer {
    grid-area: footer;
    display: flex;
    flex-direction: row;
    
    background-color: var(--dsc-red);
}

#footer a {
    color: white;
    margin-right: 2vw;
}

@media only screen and (orientation: landscape) {
    :root {
        --header-img-size: calc(var(--header-size) - 0.5vh);
        --content-area-fill-size: calc(94.5vh - 10em);
        --partner-desktop-img-size: calc((var(--content-area-fill-size) / 8) - 3vh);
    }

    body {
        grid-template-columns: 2fr 6fr 2fr;
        grid-template-rows: var(--header-size) var(--nav-size) auto var(--footer-size);
        grid-template-areas: 
                            "logo     header        clubs  " 
                            "nav      nav           nav    "
                            "partner  content-area  .      "
                            "footer   footer        footer ";
        
        column-gap: 5vw;
        row-gap: 1.5vh;
    }

    .content-width {
        padding: 0 0;
    }

    .desktop-padding {
        padding: 0 calc((90vw * 0.2) + 4.75vw);
    }

    #logo {
        justify-content: flex-end;
    }

    #logo img {
        width: auto;
        height: var(--header-img-size)
    }

    #clubs {
        flex-direction: row;
    }

    #clubs a:first-of-type {
        flex: 1.5 1 0;
    }

    #clubs a img {
        max-height: var(--header-img-size)
    }

    #nav a {
        font-size: 1.5em;
        padding: 0 0;
        padding-left: 0.25vw;
        padding-right: 2vw;
    }

    #partner-mobile {
        display: none;
    }

    #partner-desktop {
        grid-area: partner;

        display: flex;
        flex-direction: column;
        gap: 3vh 0;
        height: var(--content-area-fill-size);

        padding-left: 5vw;
    }

    #partner-desktop img {
        max-height: var(--partner-desktop-img-size);
        max-width: 80%;
    }

    #partner-desktop #bmi img {
        max-height: calc(var(--partner-desktop-img-size) * 2);
    }

    #content-area {
        grid-area: content-area;
        display: flex;
        flex-direction: column;
    
        min-height: var(--content-area-fill-size);
    }
}