/* =========================================================
   Shared rules - identical across every breakpoint.
   Anything that used to live in BOTH Desktop/*.css and
   Mobile/*.css with the same value lives here once.
   ========================================================= */
html{
    scroll-behavior: smooth;
}

body{
    background-color: black;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

.keywords h1{
    font-size: 0px;
}

.grecaptcha-badge{
    visibility: hidden;
}

.btn-success{
    float: right !important;
}

input:focus::placeholder{
    color: transparent;
}

/* #Logo h1 had no explicit color on desktop before (it inherited white
   from #Logo{color:white}); now that the phone number is always a
   tel: link on every breakpoint, it needs its own explicit color or the
   global `a{color:#007bff}` reset (root.css) would turn it blue. */
#Logo h1{
    color: white;
}

/* Sits inside the h1 so it inherits the dark/light mode color swap. */
#Logo h1 .PhoneLabel{
    display: block;
    font-size: 0.45em;
    font-weight: normal;
}

#HundredYears img{
    width: 100%;
    height: 100%;
}

@keyframes hundredYearsZoom{
    0%{
        height: 200vh;
    }
    100%{
        top: 0;
        right: 0;
        height: var(--bannerHeight);
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Blogs page styling was already byte-identical on both breakpoints */
#BlogContent{
    position: relative;
    width: 80vw;
    margin: auto;
    height: 100%;
    color: white;
}

#BlogContent h2{
    font-size: 1.25rem;
    margin: 2vh 0 2vh 2vw;
}

/* =========================================================
   Mobile (phones in portrait) - was Mobile/*.css
   ========================================================= */
@media only screen and (max-width: 599px) {

    /* !important: without it, the light/dark theme toggle's jQuery
       .show()/.hide() calls (which set an inline style) would override
       this and reveal the wrong breakpoint's image variant. */
    .only-desktop{
        display: none !important;
    }

    /* --- index --- */
    #mainContent{
        top: 100vh;
        position: absolute;
        width: 100vw;
    }

    .spacer{
        height: var(--mobileSpacerSize);
    }

    .halfSpacer{
        height: calc(var(--mobileSpacerSize) / 2);
    }

    #Home{
        height: 100vh;
        width: 100vw;
        vertical-align: middle;
        display: table-cell;
        overflow-x: hidden;
    }

    #Logo{
        text-align: center;
        margin-bottom: 20px;
    }

    #Logo img:not(.flyingTruck){
        width: 100vw;
        padding: 7.5vh 20vw 7.5vh 20vw;
    }

    #Logo h1{
        font-weight: bold;
        font-size: 10vw;
    }

    #HundredYears{
        position: absolute;
        animation-duration: 1s;
        animation-name: hundredYearsZoom;
        animation-fill-mode: forwards;
        aspect-ratio: 1/1;
    }

    #HundredYears img{
        object-fit: cover;
    }

    #NavBarBanner{
        position: fixed;
        width: 100vw;
        background-color: var(--darkGreyBanner);
        text-align: center;
        border-bottom: 2px var(--green) solid;
        z-index: 1;
        height: var(--mobileBannerHeight);
        display: none;
    }

    .boldHeading{
        font-size: calc(var(--mobileFontSize) + 1vw);
        font-weight: bold;
        color: white;
    }

    #NavMenuHidden{
        border-bottom: var(--green) 2px solid;
        background-color: var(--darkGreyBanner);
        display: none;
        margin-top: -.5vh;
        padding: 0 1vw 1vh 1vw;
    }

    #BannerButtonContainer{
        width: 50%;
        float: right;
    }

    #BannerButtonContainer img{
        width: 5vw;
        position: absolute;
        right: 3vw;
    }

    #ApplyButtonContainer{
        display: flex;
    }

    #ApplyButtonContainer a{
        flex: 1;
        margin-bottom: 0 !important;
    }

    #truckImg{
        position: relative;
        width: 50vw;
        left: -100vw;
        display: block;
    }

    #truckContainer{
        width: 100%;
        overflow: hidden;
        position: static;
    }

    #ContactMobile{
        font-size: var(--mobileButtonFontSize);
        font-weight: bold;
        color: white;
        border-radius: 5px;
        display: flex;
        justify-content: space-around;
        padding: 5px;
        margin: .5vw;
        height: 4vh;
    }

    #ContactMobile div:not(#btnMore){
        background-color: var(--green);
        width: 100%;
        height: 100%;
        border-radius: 5px;
        color: var(--darkGreen);
        font-size: 2vh;
    }

    #ContactMobile a{
        flex: 0 0 30%;
    }

    /*for floating button*/
    #Contact{
        background-color: var(--green);
        color: white;
        font-size: 25px;
        border-radius: 30px;
        text-align: center;
        padding: 5px;
        position: fixed;
        bottom: 20px;
        right: 30px;
        width: 50px;
        border: var(--darkGreen) 2px solid;
        z-index: 1000;
    }

    #ContactForm{
        position: fixed;
        right: 0;
        bottom: 80px;
        background-color: gainsboro;
        padding: 10px;
        border-radius: 10px;
        border: var(--darkGreen) 2px solid;
        display: none;
        z-index: 1000;
    }

    #ContactForm form > div{
        margin: 10px 0 10px 0;
        font-weight: bold;
    }

    #ContactFormHeader{
        background-color: var(--green);
        color: white;
        margin: -10px -10px 0 -10px !important;
        padding: 10px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .NavItem{
        border-radius: 5px;
        font-size: var(--mobileButtonFontSize);
        font-weight: bold;
        padding: 5px;
        margin: 1vh .5vw 0 .5vw;
    }

    #btnMore{
        height: 100%;
        color: white;
        background-color: var(--darkGrey);
        border-radius: 5px;
        font-size: 2vh;
    }

    .NavItemHome{
        text-align: center;
        border-radius: 5px;
        font-size: calc(var(--mobileButtonFontSize) + 2vw);
        font-weight: bold;
        padding: 10px;
        margin: .75vh auto .75vh auto;
        background-color: var(--green);
        color: white;
        width: 70%;
    }

    .NavItem:not(.QuickApply){
        color: white;
        background-color: var(--green);
    }

    .QuickApply{
        color: green;
        background-color: white;
        border: var(--green) 2px solid;
    }

    .FullApply{
        color: white;
        background-color: var(--darkGreen);
        border: white 2px solid;
        border-radius: 5px;
    }

    #contactLoading img{
        width: 20%;
        margin: 10px;
    }

    #Theme{
        color: white;
        border-radius: 30px;
        background-color: var(--darkGrey);
        width: 50px;
        text-align: center;
        position: fixed;
        left: 10px;
        bottom: 20px;
        font-size: 30px;
        padding: 5px;
        z-index: 99;
    }

    #overlay {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.8);
        z-index: 999;
        cursor: pointer;
    }

    /*This is here because the border size is different for mobile and desktop*/
    .FullApply.light{
        border: black 2px solid;
    }

    .flyingTruck {
        position: relative;
        overflow: hidden;
        animation-name: flyIn, stopOnADime;
        animation-duration: 250ms, 250ms;
        animation-delay: 0ms, 250ms;
        animation-iteration-count: 1, 1;
        animation-timing-function: linear, linear;
        width: 50vw;
        margin-bottom: -10vh;
    }

    @keyframes flyIn{
        0% {
            transform: translateX(-50%);
        }
    }

    @keyframes stopOnADime{
        0%{
            transform: skew(-10deg, 0deg) translateX(2%);
        }
    }

    hr{
        border: 0;
        border-top: 3px solid var(--green);
    }

    /* --- reviews --- */
    .DriverReview{
        color: white;
        height: var(--mobileReviewHeight);
        width: var(--mobileReviewWidth);
        background: rgba(255, 255, 255, 0.2);
        border: rgb(138, 127, 127) 1px solid;
        padding: 10px;
        border-radius: 10px;
        flex-shrink: 0;
        margin: auto 20px auto 0px;
    }

    .ReviewText{
        white-space: normal;
        font-size: 3vw;
    }

    .DriverReview h2{
        text-align: center;
        margin-bottom: 20px;
        font-size: 1.25rem;
    }

    .DriverReview img{
        width: calc(var(--mobileReviewWidth) / 4);
        height: calc(var(--mobileReviewHeight) / 2);
        float: left;
        margin-right: 10px;
        border-radius: 20px;
    }

    #ReviewContainer{
        height: calc(var(--mobileReviewHeight) + 2vh);
        min-width: 100%;
        padding-top: 1vh;
        position: relative;
        overflow-x: hidden;
    }

    #ReviewBackground{
        position: absolute;
        background-color: var(--darkGreen);
        -webkit-transform: skew(-60deg);
        -ms-transform: skew(-60deg);
        transform: skew(-60deg);
        z-index: -1;
        height: 100%;
        width: 150vw;
        top: 0;
        left: 5vw;
    }

    #ReviewHeader{
        color: white;
        text-align: center;
    }

    #Reviews {
        display: flex;
        position: absolute;
        overflow: hidden;
        overflow-y: hidden;
        white-space:nowrap;
        animation-name: scroll;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    /* --- about --- */
    #About{
        color: white;
        margin: auto;
        font-size: var(--mobileFontSize);
        scroll-margin-top: calc(var(--mobileBannerHeight) + 1vw);
        position: relative;
        overflow: hidden;
    }

    #About h2{
        font-size: var(--mobileH2FontSize);
    }

    #AboutBackground{
        position: absolute;
        background-color: var(--darkGreen);
        -webkit-transform: skew(-50deg);
        -ms-transform: skew(-50deg);
        transform: skew(-50deg);
        z-index: -1;
        height: 100%;
        width: 150vw;
        top: 45px;
        left: -75vw;
    }

    #AboutContainer{
        position: relative;
        width: 90vw;
        margin: auto;
        height: 100%;
    }

    #AboutContainer div{
        margin: 10px;
    }

    #VideoContainer{
        clear: both;
        text-align: center;
    }

    #VideoContainer video{
        width: calc(560px / 1.55);
        height: calc(315px / 1.55);
    }

    /* For HFCS...*/
    #VideoContainer img{
        width: calc(560px / 1.55);
        height: calc(315px / 1.55);
    }

    /* --- careers --- */
    #DriverInformation img{
        width: 8vh;
    }

    #DriverInformation{
        display: flex;
    }

    .ApplicationButton{
        background-color: var(--green);
        color: white;
        font-weight: bold;
        font-size: var(--mobileH2FontSize);
        border-radius: 20px;
        padding: 5px 10px 5px 10px;
        width: fit-content;
        margin: auto;
    }

    #ApplicationDiv{
        text-align: center;
    }

    #ApplicationDiv > div:first-of-type{
        margin: 10px 0 10px 0;
        font-weight: bold;
        font-size: calc(var(--mobileFontSize) + .5vw);
    }

    #Careers h4{
        font-size: calc(var(--mobileH2FontSize) - 1vw);
    }

    .DriverInformationCategory{
        background-color: var(--green);
        font-size: calc(var(--mobileFontSize) + .5vw);
        font-weight: bold;
        color: white;
        margin: 0 5px 0 5px;
        text-align: center;
        border-radius: 5px;
        padding: 5px;
        width: calc(100% / 3);
        height: inherit;
    }

    .DriverInformationCategory.active{
        background-color: var(--darkGreen);
    }

    #Careers{
        color: white;
        font-size: var(--mobileFontSize);
        width: 95%;
        margin: auto;
        scroll-margin-top: calc(var(--mobileBannerHeight) + 1vw);
    }

    #Careers h2{
        font-size: var(--mobileH2FontSize);
    }

    #BenefitsContainer{
        left: -100%;
        position: relative;
        width: 100%;
        display: flex;
    }

    #BenefitsDiv{
        overflow: hidden;
    }

    #BenefitsContainer > div{
        width: 95%;
        flex-shrink: 0;
        background: var(--darkGrey);
        margin: 0 2.5% auto 2.5%;
        padding: 30px;
        border: rgb(138, 127, 127) 1px solid;
        border-radius: 10px;
        min-height: 450px;
    }

    .benefitsList{
        padding: 10px;
    }

    .benefitsList ul{
        padding-left: 0;
    }

    .benefitsList li:not(:last-child){
        padding-bottom: 2vh;
    }

    #DriverTraining div{
        padding-top: 3vh;
    }

    /* --- footer --- */
    footer{
        height: fit-content;
        background: var(--darkGrey);
        margin-top: 50px;
        text-align: center;
        color: white;
        padding: 10px;
    }

    footer .bi{
        font-size: 3vh;
        margin: 5px;
    }
    footer i:hover{
        color: gray;
        cursor: pointer;
    }

    footer a{
        color: white;
        font-size: 2vh;
    }

    footer a:hover{
        color: gray;
    }

    #footerContainer{
        width: 80%;
        height: 80%;
        margin: auto;
    }

    #footerContainer > div:not(:last-child){
        border-bottom: 2px var(--darkGreen) solid;
    }

    #backToTop{
        width: fit-content;
        padding: 5px;
        margin: 10px auto 0 auto;
        background-color: black;
    }

    #backToTop a:hover{
        cursor: pointer;
        color: gray;
        text-decoration: none !important;
    }

    #backToTop a{
        color: white;
        font-size: 1.75vh !important;
    }

    #footerContainer > div{
        padding: 1vh;
    }

    #footerContainer ul{
        list-style-position: inside;
        padding-left: 0;
    }

    #footerContainer li{
        padding: 5px 0 5px 0;
    }

    #footerContainer > div:last-child > div:first-child{
        font-size: 1.5vh;
    }

    #addressInfo{
        margin-top: 5vh;
        font-size: 1.5vh;
    }

    footer img{
        height: 7vh;
    }

    .footerText{
        font-size: 1.25vh
    }
}

/* =========================================================
   Desktop (600px and up) - was Desktop/*.css
   ========================================================= */
@media only screen and (min-width: 600px) {

    /* !important: same reasoning as .only-desktop above */
    .only-mobile{
        display: none !important;
    }

    #overlay{
        display: none;
    }

    /* --- index --- */
    #Home{
        display: flex;
        width: 80vw;
        height: 100vh;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10% auto;
    }

    #HundredYears{
        z-index: 9999;
        position: fixed;
        animation-duration: 1s;
        animation-name: hundredYearsZoom;
        animation-fill-mode: forwards;
        aspect-ratio: 1/1;
        object-fit: cover;
    }

    #Contact:not(.Open)::before{
        content: "Contact Us!";
    }

    #Contact{
        background-color: var(--lightGreen);
        color: white;
        font-size: 20px;
        font-weight: bold;
        border-radius: 20px;
        padding: 5px 15px 5px 15px;
        width: fit-content;
        position: fixed;
        bottom: 30px;
        right: 30px;
    }

    #Contact:hover{
        cursor: pointer;
        background-color: var(--darkGreen);
        -webkit-box-shadow: rgba(255, 255, 255, 0.8) 0px 0 10px;
        -moz-box-shadow: rgba(255, 255, 255, 0.8) 0 0 10px;
        box-shadow: rgba(255, 255, 255, 0.8) 0 0 10px;
    }

    #ContactForm{
        position: fixed;
        width: 20vw;
        right: 15px;
        bottom: 70px;
        background-color: gainsboro;
        padding: 20px;
        border-radius: 10px;
        border: var(--darkGreen) 2px solid;
        display: none;
        min-height: 55vh;
        max-height: 80vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #ContactForm form > div{
        margin: 10px 0 10px 0;
    }

    #contactClose:hover{
        cursor: pointer;
        color: white;
    }

    #ContactFormHeader{
        background-color: var(--green);
        color: white;
        margin: -20px -20px 0 -20px !important;
        padding: 20px;
    }

    #NavBarBanner{
        width: 100vw;
        height: var(--bannerHeight);
        position: fixed;
        display: none;
        background-color: var(--darkGreyBanner);
        top: 0;
        z-index: 1;
        border-bottom: var(--green) 2px solid;
    }

    footer img{
        height: calc(var(--bannerHeight) - 2vh);
        padding: 5px;
    }

    hr{
        border: 0;
        border-top: 1px solid var(--green);
    }

    .spacer{
        height: var(--sectionMargin);
        clear: both;
    }

    .halfSpacer{
        height: calc(var(--sectionMargin) / 2);
        clear: both;
    }

    #Logo{
        flex: 1;
        color: white;
        text-align: center;
        width: 50vw;
    }

    #NavBar{
        flex: 1;
    }

    #Logo img:not(.flyingTruck){
        width: 50vw;
        padding: 15vh 10vw 15vh 10vw;
    }

    .boldHeading{
        font-size: 1vw;
        font-weight: bold;
        color: white;
    }

    .NavItem:not(.QuickApply, .FullApply){
        color: white;
        background-color: var(--green);
    }

    .NavItem{
        min-height: 2.75vw;
        border-radius: 5px;
        font-size: var(--largeFontSize);
        font-weight: bold;
        text-align: center;
        margin: 10px auto 10px auto;
        width: 20vw;
        z-index: 2;
    }

    .QuickApply{
        color: var(--green);
        background-color: white;
        border-radius: 5px;
        border: var(--green) 3px solid;
    }

    .FullApply{
        color: white;
        background-color: var(--darkGreen);
        border: white 3px solid;
        border-radius: 5px !important;
    }

    #BannerTable td{
        width: calc(90vw / 3);
    }

    #BannerTable{
        width: 90vw;
        margin: auto;
    }

    #truckImg{
        position: absolute;
        width: 25vw;
        left: -40vw;
    }

    #BannerApplicationContainer{
        display: flex;
        justify-content: right;
    }

    #BannerApplicationContainer a{
        margin-left: 10px;
        border-collapse: separate;
    }

    #BannerApplicationContainer a:hover{
        text-decoration: none !important;
    }

    .NavItemBanner{
        width: calc(var(--smallButtonFontSize) * 7.75);
        padding: 5px;
        font-size: var(--smallButtonFontSize);
        height: 6vh;
        margin: 0;
        display: table-cell;
        vertical-align: middle;
    }

    .NavItemBanner a:hover{
        text-decoration: none !important;
    }

    #NavBar a:hover{
        text-decoration: none !important;
    }

    .NavItem:not(.NavItemBanner):hover{
        cursor: pointer;
        font-size: calc(var(--largeFontSize) + .25vh);
        min-height: 3vw;
    }

    .NavItemBanner:hover{
        cursor: pointer;
        font-size: calc(var(--smallButtonFontSize) + .15vw);
    }

    #Theme{
        color: white;
        border-radius: 30px;
        background-color: var(--darkGrey);
        width: 50px;
        text-align: center;
        position: fixed;
        left: 30px;
        bottom: 20px;
        font-size: 30px;
        padding: 5px;
    }

    #Theme:hover{
        cursor: pointer;
    }

    #contactLoading img{
        width: 30%;
    }

    #ToTop{
        color: white;
        border-radius: 30px;
        background-color: var(--green);
        width: 50px;
        text-align: center;
        position: fixed;
        left: 30px;
        bottom: 100px;
        font-size: 30px;
        padding: 5px;
    }

    #ToTop:hover{
        cursor: pointer;
    }

    /*This is here because the border size is different for mobile and desktop*/
    .FullApply.light{
        border: black 3px solid;
    }

    .flyingTruck {
        position: relative;
        overflow: hidden;
        animation: flyIn 2s linear, 0.25s stopOnADime 2s linear;
        width: 20vw;
        margin-bottom: -20vh;
    }

    @keyframes flyIn{
        0% {
            transform: translateX(-1000%);
        }
    }

    @keyframes stopOnADime{
        0%{
            transform: skew(-10deg, 0deg) translateX(2%);
        }
    }

    /* --- reviews --- */
    #ReviewContainer{
        min-height: var(--reviewHeight);
        min-width: 100%;
        padding-top: 1vw;
        position: relative;
    }

    #ReviewBackground{
        position: absolute;
        background-color: var(--darkGreen);
        -webkit-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        transform: skew(-45deg);
        z-index: -1;
        height: 100%;
        width: 150vw;
        top: 0;
        left: 5vw;
    }

    .DriverReview{
        color: white;
        height: calc(var(--reviewHeight) - 2vw );
        width: var(--reviewWidth);
        background: rgba(255, 255, 255, 0.2);
        border: rgb(138, 127, 127) 1px solid;
        padding: 10px;
        border-radius: 10px;
        flex-shrink: 0;
        margin: auto 20px auto 0px;
        font-size: 1.75vh;
        overflow: hidden;
    }

    .ReviewText{
        white-space: normal;
    }

    .DriverReview h2{
        text-align: center;
        margin-bottom: 2vh;
        font-size: 3vh;
        font-weight: bold;
    }

    .DriverReview img{
        width: calc(var(--reviewWidth) / 4);
        height: calc(var(--reviewHeight) / 2);
        float: left;
        margin-right: 10px;
        border-radius: 20px;
    }

    #ReviewHeader{
        color: white;
        text-align: center;
        font-size: var(--largeFontSize) !important;
    }

    #Reviews {
        display: flex;
        position: absolute;
        overflow: hidden;
        overflow-y: hidden;
        white-space: nowrap;
        animation-name: scroll;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    /* --- about --- */
    #About{
        color: white;
    }

    #AboutBackground{
        position: absolute;
        background-color: var(--darkGreen);
        -webkit-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        transform: skew(-45deg);
        z-index: -1;
        height: inherit;
        width: 150vw;
        top: 45px;
        left: -75vw;
    }

    #AboutContainer{
        position: relative;
        width: 80vw;
        margin: auto;
        height: 100%;
    }

    #AboutContainer div{
        margin: 10px;
    }

    #VideoContainer{
        float: right;
        margin-left: 20px;
    }

    /* --- careers --- */
    #Careers{
        color: white;
        width: 80vw;
        margin: auto;
    }

    #DriverInformation{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    #CompetitiveBenefits > div:first-of-type{
        margin: 10px 0 10px 0;
        font-weight: bold;
        font-size: var(--subheadingFontSize);
        text-align: center;
    }

    .ApplicationButton{
        background-color: var(--green);
        color: white;
        font-weight: bold;
        font-size: var(--largeFontSize);
        border-radius: 20px;
        padding: 5px 10px 5px 10px;
        width: fit-content;
        margin: auto;
    }

    #ApplicationDiv > div:first-of-type{
        margin: 10px 0 10px 0;
        font-weight: bold;
        font-size: var(--subheadingFontSize);
    }

    #ApplicationDiv{
        text-align: center;
    }

    #ApplicationDiv a:hover{
        text-decoration: none !important;
    }

    .DriverInformationCategory img{
        width: 6vw;
    }

    #DriverTraining div:not(.boldHeading){
        margin: 3vh 0 3vh 0;
    }

    .DriverInformationCategory{
        background-color: var(--green);
        font-size: var(--largeFontSize);
        font-weight: bold;
        color: white;
        width: 30%;
        text-align: center;
        border-radius: 5px;
        padding: 5px;
    }

    .DriverInformationCategory:hover, .ApplicationButton:hover{
        cursor: pointer;
        background-color: var(--darkGreen);
        -webkit-box-shadow: rgba(255, 255, 255, 0.8) 0px 0 10px;
        -moz-box-shadow: rgba(255, 255, 255, 0.8) 0 0 10px;
        box-shadow: rgba(255, 255, 255, 0.8) 0 0 10px;
    }

    .DriverInformationCategory.active{
        background-color: var(--darkGreen);
    }

    #BenefitsContainer{
        left: -100%;
        position: relative;
        width: 100%;
        display: flex;
    }

    #BenefitsContainer > div{
        width: 50%;
        flex-shrink: 0;
        background: var(--darkGrey);
        margin: 0 25% auto 25%;
        padding: 30px;
        border: rgb(138, 127, 127) 1px solid;
        border-radius: 10px;
        min-height: 450px;
    }

    .benefitsList{
        padding: 10px;
    }

    /* --- footer --- */
    footer{
        height: fit-content;
        background: var(--darkGrey);
        margin-top: 50px;
        text-align: center;
        color: white;
        padding: 10px;
    }

    footer .bi{
        font-size: 3vh;
        margin: 5px;
    }

    footer i:hover{
        color: gray;
        cursor: pointer;
    }

    footer a{
        color: white;
        font-size: 2vh;
    }

    footer a:hover{
        color: gray;
    }

    #footerContainer{
        display: flex;
        justify-content: space-evenly;
        width: 70%;
        height: 80%;
        margin: auto;
    }

    #footerContainer > div:not(:last-child){
        border-right: 2px var(--darkGreen) solid;
    }

    #backToTop{
        width: fit-content;
        padding: 5px;
        margin: 10px auto 0 auto;
        background-color: black;
    }

    #backToTop a:hover{
        cursor: pointer;
        color: gray;
        text-decoration: none !important;
    }

    #backToTop a{
        color: white;
        font-size: 1.75vh !important;
    }

    #footerContainer > div{
        flex: 1;
        padding: 5px;
    }

    #addressInfo{
        margin-top: 5vh;
        font-size: 1.75vh;
    }

    .footerText{
        font-size: 1.75vh
    }
}