/* root variables for site-wide colors, color mapping, measurements, fonts, and other styles */

/* variables for colors */
:root {
    --blue: #274ea6;
    --bright-blue: #3471ff;
    --highlight-blue: #b0c8ff;
    --old-dark-blue: rgb(11, 46, 102);
    --dark-blue: #162f66;
    /* text-color can be changed via a light and dark mode */
    --text-color: #f7f7f7;
    --off-white: #f7f7f7; /* copy of dark-mode text-color */
    --trans-white: rgba(255, 255, 255, 0.2);
    /* background-color can be changed via a light and dark mode toggle */
    --background-color: #181a1f;
    --dark-mode-gray: #181a1f; /* copy of dark-mode background-color */ 
    --shadow: rgba(0, 0, 0, 0.9);
    --highlight: rgba(255, 255, 255, 0.1);
    --header-blue-gradient: linear-gradient(0deg, var(--dark-blue) 0%, var(--blue) 45%);
    --section-divide-gradient: linear-gradient(90deg, transparent 2%, var(--text-color) 50%, transparent 98%);
    --min-logo-size: 60px;
}

/* variables for measurements */
:root {
    --body-margin: 2vw;
    --global-nav-item-width: 10.5vw;
    --global-nav-item-height: 4vh;
    --global-nav-item-padding-x: 1.5vw;
    --global-nav-item-padding-y: 1vw;
    --header-height: 12.5vh;
    --header-logo-height: calc(var(--header-height) - 8%);
    --sticky-space-for-header: 13.5vh; /* --header-height + 1vh */
    --header-z-index: 20;
    --header-btn-margin: 0.1vw;
    --global-header-item-timing: 0.12s;
    --card-width: 100%;
    --card-height: 30vh;
    --card-distance: 5vw;
}


/* ******************************************************************************** */


/* makes all items use border-box and var(--background-color) for the sake of simplicity */
* {
    box-sizing: border-box;
    background-color: var(--background-color);
}

/* temporary outline for all elements to help visualize the layout */
/*
* {
    border: 1px solid black;
}
*/

/* noto-sans font styling -- applied to body */
.noto-sans-font-main {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
    font-size: 16px;
    line-height: 1.75;
}

/* removes default underline from all links */
a {
    color: var(--text-color);
    text-decoration: none;
}

a:hover {
    color: var(--text-color);
    cursor: pointer;
}
  
/* I don't like the default bullets for list items, so no more */
li {
    list-style-type: none;
}

/* applies some basic default styling to the body */
body {
    color: var(--text-color);
    background-color: var(--background-color);
    font-family: sans-serif;
    /*
    margin: 0px var(--body-margin) 0px var(--body-margin);
    */
    z-index: 0;
    padding-bottom: 5vh;
}


/* ******************************************************************************** */


/*
applies flex-box to the header, aligns items to the center, puts space between,
applies a gradient to the background color, makes the text color --off-white,
adds a slight text shadow, fixes it to the top of the viewport, sets a height of 12vh with a minimum of 100 pixels,
sets a width of 100%, sets its z-index high enough that nothing should overlap it,
sets the font size to 2vmin, and aligns the next to the center
*/
.global-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--header-blue-gradient);
    color: var(--text-color);
    text-shadow: 2px 2px var(--shadow);
    position: fixed;
    top: 0;
    right: 0;
    height: var(--header-height);
    min-height: 100px;
    width: 100%;
    z-index: var(--header-z-index);
    font-size: 2vmin;
    text-align: center;
    padding: 0px var(--body-margin) 0px var(--body-margin);
    /* testing different font styles for the header specifically */
    font-family: 'Lora', serif;
}

/* makes every descendant of the global header use the gradient as a background */
.global-header * {
    background-color: var(--header-blue-gradient);
}

/* aligns the items within the #header-logo-div horizontally and adds a slight margin on the left side */
.global-header-logo-div {
    display: flex;
    align-items: center;
    padding: 0.9vw 0vw 0.9vw 0vw;
    max-width: 40vw;
    max-height: calc(var(--header-height) - 10%);
}

/* almost all-white logo with a slight shadow to better match the plainly-styled header text */
.global-header-img {
    max-width: var(--header-logo-height);
    max-height: var(--header-logo-height);
    max-height: 25vw;
    min-width: var(--min-logo-size);
    min-height: var(--min-logo-size);
    filter: brightness(0) invert(0.97) drop-shadow(2px 2px var(--shadow));
}

/* adjusts the max-width of the header logo on larger screens */
@media screen and (min-width: 850px) {
    .global-header-img {
        max-width: 80px;
    }
    
}

/* adjuste the max-width of the header logo on smaller screens */
@media screen and (max-width: 850px) {
    .global-header-img {
        max-width: 70px;
    }
    
}

/* makes the header text look less squished against the logo on the left */
.global-header-logo-text {
    font-size: 4.4vmin;
    margin: 0px 0px 0px 0.5vw;
}

/* adjusts the header title size on slightly smaller large screens */
@media screen and (max-width: 1500px) {
    .global-header-logo-text {
        font-size: 4vmin;
        margin: 0px 0px 0px 0.6vw;
    }
    
}

/* adjusts the header title size on mid-sized screens */
@media screen and (max-width: 850px) {
    .global-header-logo-text {
        font-size: 3.5vmin;
        margin: 0px 0px 0px 0.7vw;
    }
    
}

/* adjusts the header title size on smaller screens */
@media screen and (max-width: 700px) {
    .global-header-logo-text {
        font-size: 3.9vmin;
        margin: 0px 0px 0px 0.8vw;
    }
    
}

/* hides certain elements on the mobile version */
@media screen and (max-width: 600px) {
    .global-header-logo-text {
        display: none;
    }
}

/* makes the links white like the rest of the header text
    and removes the default underline */
.global-header a {
    color: var(--text-color);
}

/* keeps the header navigation bar horizontal */
.global-header-nav-bar {
    display: flex;
    flex-direction: row;
}

/* hides certain elements on the mobile version */
@media screen and (max-width: 1099px) {
    .global-header-nav-bar {
        display: none;
    }
}

/* arranged nav bar horizontally with flexbox */
.global-nav-list {
    display: flex;
    align-items: center;
    margin: 1vw 0px 1vw 0px;
    padding: 0px;
}

/* adds a slight margin between the header navigation buttons */
.global-nav-link {
    margin: 0px var(--header-btn-margin) 0px var(--header-btn-margin);
}

/* adds gradient glow with mouse active */
.global-nav-link:active {
    background: radial-gradient(ellipse, var(--trans-white) 30%, transparent 60%);
}

/* styles for the header navigation buttons */
.global-header-nav-item {
    font-size: 1.2em;
    min-width: var(--global-nav-item-width);
    min-height: var(--global-nav-item-height);
    margin: 0px;
    padding: var(--global-nav-item-padding-y) var(--global-nav-item-padding-x) var(--global-nav-item-padding-y) var(--global-nav-item-padding-x);
    transition-duration: var(--global-header-item-timing);
    transition-property: background-color;
    transition-timing-function: linear, ease;
}

/* moves the links as if they are 3D buttons -- originally also added a gradient glow with mouse hover */
.global-header-nav-item:hover {
    background-color: var(--highlight);
}

/* basic styles for the offcanvas menu */
#offcanvasGlobalMenu {
    color: var(--text-color);
    background-color: var(--background-color);
    margin-top: var(--header-height);
    min-width: 30vw;
}

/* adjusts the width of the menu to fill the entire screen when the viewport is small enough and adjusts the font size */
@media screen and (max-width: 600px) {
    #offcanvasGlobalMenu {
        min-width: 100vw;
    }

    #offcanvasGlobalMenuDismiss {
        font-size: 2vmax;
    }
}

/* sets the font size for the nav menu mobile link */
#global-nav-menu-mobile-link {
    font-size: 3.5vmin;
}

/* adjusts the font size for the nav menu mobile link */
@media screen and (min-width: 1100px) {
    #global-nav-menu-mobile-link {
        display: none;
    }
}

/* sets the font size for the nav menu mobile link */
@media screen and (max-width: 900px) {
    #global-nav-menu-mobile-link {
        font-size: 4.2vmax;
    }
}

/* makes a slight border below the offcanvas menu header */
#offcanvas-menu-header {
    border-bottom: 2px solid var(--text-color);
}

/* applies a slight margin to the offcanvas menu label */
#offcanvasGlobalMenuLabel {
    margin: 0.5vw 0px 0px 0.6vw;
}

/* removes any margins from the offcanvas navigation menu */
#menu-main-nav-list {
    margin: 0px;
}

/* removes any margins from the offcanvas navigation menu items */
.menu-main-nav-item {
    margin: 0px;
    list-style-type: disc;
}

/* removes margins from the offcanvas menu item p */
.menu-main-toggle-p {
    margin: 0px;
}

/* adds a little padding to the offcanvas menu buttons and sets their display to block */
.menu-collapse-toggle-btn {
    padding: 1vw 0.75vw 1vw 0.75vw;
    display: block;
}

/* adjusts the padding on the offcanvas menu buttons on smaller screens */
@media screen and (max-width: 800px) {
    .menu-collapse-toggle-btn {
        padding: 2.5vw 2vw 2.5vw 2vw;
        display: block;
    }
}

/* adds a slight highlight to the offcanvas menu buttons with a mouse hover */
.menu-collapse-toggle-btn:hover {
    color: var(--text-color);
    background-color: var(--highlight);
}


/* ******************************************************************************** */

/* background styles */

/* ******************************************************************************** */


/* This ensures the main does not get hidden behind the header */
.main-content {
    margin-top: var(--header-height);
}

/* basic styling for the home sections */
.home-section {
    color: var(--text-color);
    text-shadow: 2px 2px var(--shadow);
    min-height: 60vh;
    padding: 1.5vw;
    border-top: 2px solid radial-gradient(ellipse, var(--trans-white) 30%, transparent 60%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* adjusts the sizing and padding of the home sections on smaller screens */
@media screen and (max-width: 800px) {
    .home-section {
        min-height: 40vh;
        padding: 4vw;
    }
}

/* makes sure the home sections take up the whole width of the parent */
.home-section-div {
    width: 100%;
}

/* switches the display of the home sections to a centered flex box on smaller screens */
@media screen and (max-width: 800px) {
    .home-content-section, .home-section-div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* ******************************************************************************** */


/* basic styling for the welcome section */
#welcome-title-section {
    min-height: 80vh;
    padding-bottom: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* adjusts the welcome section title size on mid-sized screens */
@media screen and (max-width: 850px) {
    #welcome-title-section {
        min-height: 70vh;
    }
}

/* adjusts the welcome section title size on medium screens */
@media screen and (max-width: 650px) {
    #welcome-title-section {
        min-height: 60vh;
    }
}

/* adjusts the welcome section title size on small screens */
@media screen and (max-width: 500px) {
    #welcome-title-section {
        min-height: 50vh;
    }
}

/* sets the size of the welcome section logo */
#welcome-section-logo-div {
    max-width: 30vw;
    max-height: 30vw;
    margin: 1vw;
}

/* adjusts the max size of the welcome section logo on all but the largest screens */
@media screen and (max-width: 1200px) {
    #welcome-section-logo-div {
        max-width: 40vw;
        max-height: 40vw;
    }
}

/* adjusts the margin on the welcome section logo on all but the larger screens */
@media screen and (max-width: 1000px) {
    #welcome-section-logo-div {
        margin-top: 6vw;
    }
}

/* reduces the size of the welcome section logo on smaller screens but keeps it within a minimum size */
@media screen and (max-width: 800px) {
    #welcome-section-logo-div {
        max-width: 50vw;
        max-height: 50vw;
        min-width: 150px;
        min-height: 150px;
    }
}

/* reduces the size of the welcome section logo on smaller screens */
@media screen and (max-width: 400px) {
    #welcome-section-logo-div {
        max-width: 60vw;
        max-height: 60vw;
    }
}

/* makes sure the main logo takes up the entire size of the div */
#welcome-section-logo {
    max-width: 100%;
    max-height: 100%;
}

/* styles for the welcome section titles */
#welcome-section-titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* adjusts font-size on the welcome section subtitle for medium screens */
@media screen and (max-width: 600px) {
    #welcome-section-subtitle {
        font-size: 1.8vmax;
    }
}

/* adjusts font-size on the welcome section title and subtitle for small screens */
@media screen and (max-width: 450px) {
    #welcome-section-title {
        font-size: 2vmax;
    }

    #welcome-section-subtitle {
        font-size: 1.5vmax;
    }
}

/* adjusts font-size on the welcome section subtitle for smaller screens */
@media screen and (max-width: 450px) {
    #welcome-section-subtitle {
        font-size: 1.4vmax;
    }
}


/* ******************************************************************************** */


/* basic styling for the cards */
.section-card {
    width: 100%;
    color: var(--text-color);
    background-color: var(--background-color);
    border: 1px solid var(--text-color);
    padding: 2vw;
    max-height: 60vh;
}

/* adjusts the spacing in the cards on smaller end viewports */
@media screen and (min-width: 801px) {
    .section-card {
        max-width: 50%;
    }
}

/* adjusts the spacing in the cards on smaller end viewports */
@media screen and (max-width: 800px) {
    .section-card {
        margin: 2vw;
        padding: 4vw;
    }
}

/* sets the font size for the section card titles */
.section-card-main-title {
    font-size: 2.5vmax;
}

/* sets margin for the card subtitles */
.section-card-main-title + .section-card-subtitle {
    margin-top: 0.5vw;
}

/* sets card subtitle size */
.section-card-subtitle {
    font-size: 1.8vmax;
}

/* makes sure the text wraps within the cards and does not stretch the cards */
.section-card-text {
    text-wrap: wrap;
}

/* sets color for the call to action link in the cards */
.section-card-cta-link {
    color: var(--bright-blue);
}

/* sets color for the call to action link in the cards on hover */
.section-card-cta-link:hover {
    color: var(--highlight-blue);
}


/* ******************************************************************************** */


/* styles for a visual divider between the sections */
.section-divider {
    height: 2px;
    width: 100%;
    background: var(--section-divide-gradient);
}


/* ******************************************************************************** */


/* sizing for the image in the home page intro card */
#intro-section-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 0;
    overflow: hidden;
}

/* sizing for the image in the home page portfolio card */
#portfolio-section-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

/* sizing for the image in the home page contact card */
#contact-section-img {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: 10% 96%;
    overflow: hidden;
}


/* ******************************************************************************** */


/* some extra padding for the about section */
#about-section {
    padding: 1vw;
}

@media screen and (max-width: 800px) {
    #about-section {
        padding: 2vw;
    }
}

@media screen and (max-width: 500px) {
    #about-section {
        padding: 2vw;
    }
}

/* basic styling for the about section card */
#about-section-id-card {
    background-color: var(--background-color);
    border: 2px solid var(--text-color);
    padding: 0px;
}

/* font size and adjustments for the title in the about section card */
#about-section-card-title {
    font-size: 3vmin;
    text-align: center;
}

@media screen and (max-width: 500px) {
    #about-section-card-title {
        font-size: 2vmax;
    }
}

/* a margin to separate the about section article from being squished against the card */
#about-section-article {
    margin: 1vw;
    padding: 1vw;
}

@media screen and (max-width: 500px) {
    #about-section-article {
        padding: 1vw 8vw 0vw 8vw;
    }
}


/* ******************************************************************************** */

/* styles for the contact section copied from the about section */

/* some extra padding for the contact section */
/*
section commented out because apparently it was causing style inconsistencies with the other home sections. I'll have to diagnose why sometime later

#contact-section {
    padding: 1vw;
}

@media screen and (max-width: 800px) {
    #contact-section {
        padding: 2vw;
    }
}

@media screen and (max-width: 500px) {
    #contact-section {
        padding: 2vw;
    }
}
*/

/* basic styling for the about section card */
#contact-section-id-card {
    background-color: var(--background-color);
    border: 2px solid var(--text-color);
    padding: 0px;
}

/* font size and adjustments for the title in the about section card */
#contact-section-card-title {
    font-size: 3vmin;
    text-align: center;
}

@media screen and (max-width: 500px) {
    #contact-section-card-title {
        font-size: 2vmax;
    }
}

/* a margin to separate the about section article from being squished against the card */
#contact-section-article {
    margin: 1vw;
    padding: 1vw;
}

@media screen and (max-width: 500px) {
    #contact-section-article {
        padding: 1vw 8vw 0vw 8vw;
    }
}

.contact-inline-link {
    color: var(--bright-blue);
}

.contact-inline-link:hover {
    color: var(--highlight-blue);
}

.AM-PM {
    font-size: smaller;
    margin-left: 0.2em;
}


/* ******************************************************************************** */

@media screen and (max-width: 1200px) {
    #portfolio-main {
        padding-top: 0.1vh;
    }
}

/* basic styling for the portfolio introduction section */
#portfolio-introduction {
    color: var(--text-color);
    text-shadow: 2px 2px var(--shadow);
    background-color: var(--background-color);
    max-width: 80vw;
    height: max-content;
    min-height: 30vh;
    padding: 2vw;
    margin-top: 10vw;
    padding: 1.5vw;
    border: 1px solid var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

/* adjusts the sizing and padding of the portfolio intro section on smaller screens */
@media screen and (max-width: 800px) {
    #portfolio-introduction {
        min-height: 40vh;
        padding: 4vw;
    }
}

#portfolio-section-tabs {
    margin: 30px 0px 0px 0px;
    padding: 10px;
}

.portfolio-tab {
    color: var(--text-color);
    background-color: var(--background-color);
    margin: 2px;
}

.portfolio-tab-nav-link {
    font-size: 2vmin;
    color: var(--text-color);
    outline: var(--text-color) 1px solid;
    width: 12vw;
    height: 4vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
}


@media screen and (max-width: 1400px) {
    .portfolio-tab-nav-link {
        height: 5vw
    }
}

@media screen and (max-width: 1100px) {
    .portfolio-tab-nav-link {
        height: 8vw
    }
}

@media screen and (max-width: 800px) {
    .portfolio-tab-nav-link {
        font-size: 2.5vmin;
        width: 20vw;
        height: 7vw;
    }
}

@media screen and (max-width: 500px) {
    .portfolio-tab-nav-link {
        font-size: 3vmin;
        height: 12vw;
    }
}

@media screen and (max-width: 300px) {
    .portfolio-tab-nav-link {
        font-size: 3.5vmin;
        width: 25vw;
        height: 16vw;
    }
}

/* temporary fix for a height inconsistency */
/*
@media screen and (min-width: 553px) and (max-width: 621px) {
    .portfolio-tab-nav-link {
        height: 15vw
    }
}
@media screen and (min-width: 921px) and (max-width: 1036px) {
    .portfolio-tab-nav-link {
        height: 10vw
    }
}
*/

.portfolio-tab-nav-link:hover {
    color: var(--text-color);
    background-color: var(--highlight);
}

/* sets the web portfolio section to use display: block and have a widith of the entire parent container */
#web-porfolio-section {
    display: block;
    width: 100%;
    margin: 0px;
}

/* sets all items within the web portfolio section to use display: block by default */
#web-porfolio-section * {
    display: block;
}

/* sets the web portfolio section to use display: block and have a widith of the entire parent container */
#graphic-porfolio-section {
    display: block;
    width: 100%;
}

/* sets all items within the web portfolio section to use display: block by default */
#graphic-porfolio-section * {
    display: block;
}

/* basic styling for the portfolio cards */
.portfolio-card {
    color: var(--text-color);
    background-color: var(--background-color);
    border: 1px solid var(--text-color);
    height: max-content;
    min-height: 60vh;
    max-width: 100%;
    padding: 0px;
    margin: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vw;
}

/* adjusts the portfolio card margin on smaller screen sizes */
@media screen and (max-width: 1000px) {
    .portfolio-card {
        margin: 2vw;
        margin-top: 4vw;
        margin-bottom: 5vw;
    }
}

/* adjusts the portfolio card margin on smaller screen sizes */
@media screen and (max-width: 600px) {
    .portfolio-card {
        margin: 2vw;
        margin-top: 8vw;
        margin-bottom: 8vw;
    }
}

/* styling for the portfolio card body */
.portfolio-card-body {
    width: 100%;
    margin: 0px;
    margin-top: 10px;
    border: 1px solid var(--text-color);
    border-radius: 5px;
}

/* styles for the vertically-spaced span to separate it from the surroundings */
.vertically-spaced-span {
    margin: 1.5% 0px 1% 0px;
}

/* adjusts the spacing of the spaced span to be more distinct on smaller screen sizes */
@media screen and (max-width: 800px) {
    .vertically-spaced-span {
        padding: 4% 0px 2% 0px;
    }
}
@media screen and (max-height: 800px) {
    .vertically-spaced-span {
        padding: 4% 0px 2% 0px;
    }
}

/* styles for the web-portfolio launch button container */
.web-portfolio-launch-btn-div {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: var(--bright-blue);
}

/* colors for the webpage launch button */
.web-portfolio-launch-btn {
    color: var(--text-color);
    background-color: transparent;
}

/* applies a highlight to the webpage launch button on hover */
.web-portfolio-launch-btn:hover {
    color: var(--text-color);
    background-color: var(--highlight);
}

/* sets the styles of the portfolio image containers */
.portfolio-img-container {
    max-height: fit-content;
    overflow: hidden;
}

/* sets the size of the portfolio images to be take up the entirety of the container */
.portfolio-img {
    width: 100%;
    height: 100%;
}

/* corrects the external link leading to the The Gold Lady wikipedia page */
#portfolio-gold-lady-link {
    display: inline-block;
}

/* styles for the portfolio scroll button */
#scroll-button {
    color: var(--text-color);
    text-shadow: 2px 2px var(--shadow);
    background-color: var(--bright-blue);;
    position: fixed;
    top: 90vh;
    right: 4vw;
    margin: 0px;
    padding: 10px 20px 10px 20px;
}

/* applies a highlight to the scroll button on hover */
#scroll-button:hover {
    color: var(--text-color);
    background-color: var(--highlight);
}

/* styles for the scroll button container */
#scroll-button-div {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

@media screen and (max-width: 1100px) {
    #scroll-button-div {
        display: none;
    }
}

/* removing the margin and padding of the portfolio section to reduce severity of its appearance, especially on mobile */
.portfolio-section {
    margin: 0px;
    padding: 0px;
}


/* ******************************************************************************** */


/* global footer styles */
.global-footer {
    display: block;
    width: 100%;
    height: min-content;
    padding-top: 2vw;
    margin: 1.5vh 0 1.5vh 0;
    font-size: 1.8vmin;
    height: 12vh;
}

.global-footer > * {
    display: block;
}

/* adjusts footer font size on mid-sized screens */
@media screen and (max-width: 750px) {
    .global-footer {
        font-size: 2.25vmin;
    }
}

/* adjusts footer font size on medium screens */
@media screen and (max-width: 650px) {
    .global-footer {
        font-size: 2.5vmin;
    }
}

/* adjusts footer font size on small screens */
@media screen and (max-width: 500px) {
    .global-footer {
        font-size: 1.5vmax;
    }
}

/* adjusts footer font size on smaller screens */
@media screen and (max-width: 300px) {
    .global-footer {
        font-size: 1.8vmax
    }
}

/* footer link styles */
.global-footer-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    margin: 5px;
    gap: 20vw;
    flex-wrap: wrap;
}

/* adjusts the spacing and stacking direction of the footer links to be easier for touch screens on smaller sizes */
@media screen and (max-width: 500px) {
    .global-footer-links {
        display: block;
        padding-left: 3vw;
        padding-bottom: 5vh;
    }

    .global-footer-link:first-of-type {
        margin-top: 2vw;
    }

    .global-footer-link {
        margin: 8vw 2vw 8vw 2vw;
    }
}

/* makes all footer links text-color rather than the default colors */
.global-footer a {
    color: var(--text-color);
}

/* adds back the underline on the footer links with hover */
.global-footer a:hover {
    text-decoration: underline;
}