/* global variables ------------------------- */
:root {
    --headerHeightDesktop: 60px;
    --mainContentFillRemaining: calc(100vh - var(--headerHeightDesktop));
    --textColour: #fcfcfb ;
    --primaryColour: #161616;
    --backgroundColour: #121212;
    --accentColour: #ff0033;
    --accentHoverColour: rgb(214, 0, 43);
}



/* root styles ------------------------------- */
html {
    scroll-behavior: smooth;
}
.body {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    font-family: "Inter", sans-serif;
    background-color: var(--backgroundColour);
    color: var(--textColour);
}
a {
    color: var(--textColour);
    text-decoration: none;
}
/* header styles ------------------------------ */
.header {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    z-index: 100;
}
.headerColumnLeft, .headerColumnRight {
    display: flex;
    flex-basis: 50%;
}
.headerColumnRight {
    justify-content: right;
}
.headerName {
    display: flex;
    flex: 30%;
    align-items: center;
    justify-content: left;
    white-space: nowrap;
    font-family: "Special Gothic Expanded One", sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    transition: color 0.2s;
}
.headerNameAlt {
    display: none;
    flex: 30%;
    align-items: center;
    justify-content: left;
    white-space: nowrap;
    font-family: "Special Gothic Expanded One", sans-serif;
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: bold;
    transition: color 0.2s;
}
.headerName:hover {
    cursor: pointer;
    color: var(--accentColour);
}
.navLink {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
    padding-left: 1vw;
    padding-right: 1vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
}
.navLink:hover {
    cursor: pointer;
    color: var(--accentColour);
}
.navLink:active {
    color: var(--accentColour);
}
#selectedNav {
    color: var(--accentColour);
}
/* Header Responsive Styles */
@media  screen and (max-width: 1400px) {
    .headerColumnRight {
        margin: 0;
    }
    .headerContactRow {
        justify-content: space-between;
    }
    .headerContactLink {
        font-size: 1.6em;
    }
    .headerContactIcon {
        width: 23px;
        height: 23px;
    }
}
@media  screen and (max-width: 1000px) {
    .headerColumnLeft {
        flex: 50%
    }
    .headerName {
        display: none;
        justify-content: center;
    }
    .headerNameAlt {
        display: flex;
        margin-top: 0.5vh;
        margin-bottom: 0.5vh;
    }
    .headerContactRow {
        justify-content: space-evenly;
    }
}
@media screen and (max-width: 300px) {
    .header {
        flex-direction: column;
    }
}
/* footer styles ------------------------------ */
.footer {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    padding: 1.5vw;
}
.footerQuickLinkContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}
.footerEmailText {
    box-sizing: border-box;
    font-size: 1rem;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-right: 20px;
}
.footerEmailTextAlt{
    display: none;
    box-sizing: border-box;
    font-size: 1.2rem;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-right: 20px;
}
.footerQuickLink {
    width:35px;
    height: 35px;
    fill: white;
    padding-left: 20px;
    padding-right: 20px;
    transition: fill 0.2s;
    margin: 0;
}
.footerButton {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Inter, sans-serif;
    margin-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: content-box;
    color: var(--textColour);
    border: 2px solid var(--textColour);
    border-radius: 5px;
    background-color: transparent;
}
.footerButton:hover {
    background-color: var(--textColour);
    color: var(--primaryColour);
    cursor: pointer;
}
.footerButton:hover > svg {
    background-color: var(--textColour);
    color: var(--primaryColour);
    fill: var(--primaryColour);
}
.clipboardIcon {
    fill: var(--textColour);
    width: 20px;
    height: 20px;
}
.footerQuickLink:hover {
    fill: var(--accentColour);
}
.copyrightInfo {
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    color: rgb(185, 185, 185);
    font-size: 1rem;
    margin-top: 35px;
    margin-bottom: 15px;
}

@media screen and (max-width: 950px) {
    .footerEmailText {
        display: none;
    }
    .footerEmailTextAlt {
        display: flex;
    }
}