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

body {
        background-color: var(--theme1);
    }

html, body {
    width: 100%;
    max-width: 100vw; /* Use viewport width units */
    overflow-x: hidden;
    position: relative;
}

:root {
    --theme1: #ffffff;
    --theme1-transparent: #ffffffBF;
    --theme2: #117869;
    --theme2-transparent: #117869BF;
    --theme3: #99CCCC;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Start of Header */

header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    background-color: var(--theme1);
    height: 80px;
    width: 100%;
    align-items: center;
    z-index: 1000;
    transition: height 0.3s ease-in;
}

#logo {
    height: 100%;    
    overflow: hidden;
}

#logo img {
    height: 100%;
    padding-top: .3%;
    margin-left: .5rem;
    flex-shrink: 0;
    object-fit: contain;
}

#profile-links {
    display: flex;
    margin: 0 1.2rem;
    gap: clamp(1rem, 1vw, 3rem);
}

#profile-links a {
    text-decoration: none;
    color: var(--theme2);
    font-size: 1.1rem;
}

#navbar {
    display: flex;
    margin-left: auto;
    height: 100%;
    align-items: center;
    background-color: var(--theme1);
}

#navbar a {
    font-family: Roboto, sans-serif;
    text-decoration: none;
    color: var(--theme2);
    font-size: 1.1rem;  
    font-weight: 400;
    padding: 1vw;
    height: 100%;
    display: flex;
    align-items: center;
}

#navbar a:hover {
    display: flex;
    background-color: var(--theme3);
    height: 100%;
    align-items: center;
}

.active {
    display: flex;
    background-color: var(--theme3) !important;
    color: var(--theme1) !important;
    gap: .3rem;
}

.dropbtn {
    text-decoration: none;
    display: flex;
    background-color: var(--theme1);
    color: var(--theme2);
    font-family: Roboto, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    height: 100%;
    padding: 1vw;
    border: none;
    align-items: center;
    gap: .3rem;
}

.dropdown {
    position: relative;
    display: inline-block;
    height: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--theme1);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
}

.dropdown-content a {
    font-family: Roboto, sans-serif;
    text-decoration: none;
    color: var(--theme2);
    padding: .7vw;
    border-bottom: 1px solid var(--theme3);
    font-size: .9rem;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: var(--theme3);
}

/* End of Header */

#menu-toggle, #mobile-profile-links {
    display: none;
}

/* Start of Welcome Section */

#welcome-section {
    position: relative;
    background-color: var(--theme2-transparent);
    height: calc(100vh - 80px);
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#title {
    z-index: 1;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin-bottom: -1%;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
}

#welcome-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100vh - 80px);
    background-image: url(/assets/home/Pop_Tab_Pattern_Tile.png);
    background-repeat: repeat;
    background-size: 70vw;
    background-attachment: fixed;
    overflow: hidden;
    z-index: -1;
}

.welcome-section-svg {
    position: relative;
    width: 100%;
    height: 100%;
}

.shape-divider-bottom {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 100% 100% 0 0;
    background-color: var(--theme1);
    z-index: 2;
}

.down-arrow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    z-index: 4;
}

.down-arrow svg {
    position: relative;
    display: block;
    width: clamp(2rem, 9vh, 3rem);
    height: auto; 
    fill: var(--theme2);
    animation: bounce-pause 4s ease-in-out infinite;

}

@keyframes bounce-pause {
    0%   { transform: translateY(0); }
    15%  { transform: translateY(20px); } /* Reach peak */
    30%  { transform: translateY(0); }     /* Return to start */
    45%  { transform: translateY(20px); } /* Reach peak */
    60%  { transform: translateY(0); }     /* Return to start */
    /* The "Pause": 50% to 100% has no changes */
    100% { transform: translateY(0); }  
}

/* End of Welcome Section */

/* Start of Project Section */

.portfolio-break {
    background-color: var(--theme1);
    height: 3vh;
}

#project-section {
    background-color: var(--theme1);
}

.tilerow {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.5rem;
    margin: 0 4rem 2rem 4rem;
}

.photography {
    margin: 0 6rem 2rem 6rem;
}

 .tilerow > .splide {
  min-width: 0;   /* VERY important */
 }

.splide__slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

#redefining-representation {
    flex: 0.65;
}

#missing-parts {
    flex: 0.7727;
}

#lucky-bucky {
    flex: 1;
}

#unorthodox-commands {
    flex: 1;
}

#in-frame {
    flex: 1;
}

#thrice-the-man {
    flex: 0.7727;
}

#vibrato {
    flex: 1;
}

#trimet-rebrand {
    flex: 1.3;
}

#pop-tab {
    flex: 1.16;
}

#construct-the-burger {
    flex: 1.33;
}

#garage-guys {
    flex: 1;
}

#trimet-app-redesign {
    flex: 1.78;
}

#grime-be-gone {
    flex: 3.33;
}

#resilience-and-reinvention {
    flex: 3.33;
}

#bomb-pop-magazine {
    flex: 1;
}

#atyab-akleh {
    flex: 1.78;
}

#punk-wont-die {
    flex: 1.78;
}

#butterfly-conservatory {
    flex: 1.5;
}

#puzzled {
    flex: 1.33;
}

#jaz-portraits {
    flex: 1.25;
}

#leo-portraits {
    flex: 1.249;
}

#covid {
    flex: 1.25;
}

#in-control {
    flex: 1;
}

/* End of Project Section */

/* Start of Footer */

footer {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    background-color: var(--theme1);
    padding: 1rem 0;
}

footer nav {
    display: flex;
    gap: 1rem;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

footer nav a:link {
    color: var(--theme2);
}

footer nav a:visited {
    color: var(--theme2);
}

footer nav a:active {
    text-decoration: none;
    color: var(--theme3);
}

footer #copyright {
    font-size: .77rem;
    color: var(--theme2);
    font-family: Roboto, sans-serif;
    font-weight: 600;
}

/* Explicitly for Work Pages */

.work-body {
    background-color: var(--theme1);
}

.work-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--theme2);
    border-radius: 0 0 100% 100%;
    z-index: 1;
    padding: 2% 0;
}

.work-title {
    z-index: 2;
    color: var(--theme1);
    font-family: Lexend, sans-serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 4vw, 3rem);
 }

 /* End of Work Pages */

 /* Start of About Page */

.about-me {
    display: flex;
    background: linear-gradient(var(--theme1-transparent), var(--theme1-transparent)), 
    url(/assets/about/Pop\ Tab\ Pattern\ Tile;\ Black\ and\ White.png);;
    flex-direction: row;
    background-size: 50vw;
    height: calc(100vh - 80px);
    align-items: flex-start;
    overflow: hidden;
}

.about-me-border {
    background-color: var(--theme2);
    background-image: url("/assets/about/Logo\ Curve\ Design.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    width: 17vw;
    height: 100%;
}

.about-me-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 60%;
    height: 100%;
    padding: 4vh 0;
    background-color: var(--theme2);
    font-family: Lexend, sans-serif;
    color: var(--theme1);
    gap: 2vh
}

    .about-me-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1.75vh;
    }

        .about-me-title {
            font-size: clamp(1.3rem, 3.5vw, 4rem);
            line-height: 1.1;
            font-weight: 700;
            max-width: 60ch;
            margin-left: -4vw;
        }

        .about-me-description {
            font-size: clamp(.8rem, 1.25vw, 1.5rem);
            max-width: 60ch;
        }

    .get-to-know-me-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1vh;
        margin-top: auto;
    }

        .get-to-know-me-title-container {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

            .get-to-know-me-title {
                display: inline-block;
                background-color: var(--theme3);
                color: var(--theme2);
                padding: 1vh 1vw;
                width: auto;
                white-space: nowrap;
                font-size: clamp(1.1rem, 2vw, 2.5rem);
            }

            .get-to-know-me-title-border {
                flex: 1;
                height: 2px;
                background: linear-gradient(to right, var(--theme3), var(--theme2));
            }

            .get-to-know-me-description {
                max-width: 63ch;  
                font-size: clamp(.8rem, 1.2vw, 1.25rem);
            }

    .what-I-do-container {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        gap: 1vh;
    }

        .what-I-do-title {
            max-width: 60ch;
            font-size: clamp(1.25rem, 2vw, 2.5rem);
        }

        .what-I-do-description {
            max-width: 80ch;
            font-size: clamp(.7rem, 1.125vw, 1.25rem);
        }

        .what-I-do-description::before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: clamp(.7rem, 1.2vw, 1.3rem);
            color: var(--theme3);
            content: "\f058";
            padding-right: .6vw;
        }

    .lets-connect-container {
        display: flex;
        margin-top: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        gap: 1vh;
    }

        .lets-connect-title {
            max-width: 60ch;
            font-size: clamp(1.25rem, 2vw, 2.5rem);
        }

        .lets-connect-description-container {
            display: flex;
            width: 100%;
            flex-direction: row;
        }

            .lets-connect-description {
                max-width: 44ch;
                font-size: clamp(.7rem, 1.2vw, 1.25rem);
            }

            .lets-connect-link {
                text-decoration: none;
                margin: auto auto;
                margin-left: 2vw;
                background-color: var(--theme3);
                color: var(--theme2);
                font-size: clamp(1.4rem, 2vw, 2.5rem);
                font-weight: 600;
                border: 2px solid var(--theme2);
                padding: .5vh 1vw;
                transition: transform 0.25s ease;
            }

            .lets-connect-link:hover {
                transform: scale(1.08);
            }

.about-me-right {
    display: flex;
    position: relative;
    margin-right: auto;
    width: 40%;
    height: 100%;
}
    .about-me-right-left {
        background-color: var(--theme2);
        border-right: var(--theme3) 1.5vw solid;
        width: 50%;
        height: 100%;
    }

    .about-me-right-right {
        width: 50%;
        height: 100%;
        border-left: var(--theme3) 1.5vw solid;
    }
    
    .about-me-photo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 65%;
        height: auto;
    }

    .about-me-photo-border {
        display: none;
    }

    .about-me-photo img {
        width: 100%;
        height: auto;
        display: block;
    }

    .about-me-photo::before {
        content: "";
        position: absolute;
        inset: -2.75vw;
        border: 2.8vw solid var(--theme3);
        clip-path: inset(0 50% 0 0);
    }

/* End of About Page */

/* Start of Contact Page */

.contact-me {
    display: grid;
    grid-template-columns: 66.67% 33.33%;
    width: 100%;
    height: calc(100vh - 80px);
    position: relative;
    overflow: hidden;
}

.contact-me-left {
    display: flex;
    flex-direction: column;
    background-color: var(--theme2-transparent);
}

.contact-me-left::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/assets/home/Pop_Tab_Pattern_Tile.png);
    background-repeat: repeat;
    background-size: 70vw;
    background-attachment: fixed;
    overflow: hidden;
    z-index: -1;
}

.contact-me-wordmark {
    width: 95%;
    height: auto;
    align-self: flex-end;
    justify-self: flex-start;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
    z-index: 1;
}

.contact-me-left-content {
    margin-top: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--theme1);
    z-index: 2;
    border-radius: 100% 100% 0 0;
}

.contact-me-left-content h1 {
    font-family: Lexend, sans-serif;
    font-size: clamp(.8rem, 2vw, 2.5rem);
}

.contact-me-left-content a {
    text-decoration: underline;
    color: var(--theme2);
}

.contact-me-right {
    display: flex;
    flex-direction: column;
    z-index: 100;
    background-color: var(--theme3);
}

.contact-me-right-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 100%;
}

    .contact-me-statement {  
        align-self: center;
        background-color: var(--theme2);
        margin: 3vh 1.5vw 0 1.5vw;
    }
        
    .contact-me-statement h1 {
        font-family: "Lexend", sans-serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style: normal;
        font-size: clamp(1rem, 1.8vw, 2rem);
        color: var(--theme1);
        max-width: 40ch;
        text-align: left;
        padding: 1.5vh 1.5vw;
    }

    .contact-me-contact-info {
        display: flex;
        flex-direction: column;
        gap: 2vh;
    }

        .contact-me-contact-info h1 {
            font-family: "Lexend", sans-serif;
            font-size: clamp(1.25rem, 2vw, 2.5rem);
            color: var(--theme2);
        }

            .contact-me-contact-info h1::before, 
            .contact-me-social-links h1::before {
 
                content: "";
                display: inline-block;
                width: 3%;
                height: .6vh;
                background-color: var(--theme2);
                margin-right: 1vw;
                margin-left: 1vw;
                vertical-align: middle;
            }

            .contact-me-contact-info h1::after,
            .contact-me-social-links h1::after {
                content: "";
                display: inline-block;
                width: 50%;
                height: .6vh;
                background: linear-gradient(to right, var(--theme2), var(--theme3));
                margin-left: 1vw;
                vertical-align: middle;
            }


        .contact-me-contact-info h2 {
            font-family: "Lexend", sans-serif;
            font-size: clamp(1rem, 1.5vw, 3rem);
            color: var(--theme2-transparent);
            padding: 0 0 0 6vw;
            transition: transform .5s ease;
        }

        .contact-me-contact-info h2:nth-of-type(1) a {
            display: inline-block;
            text-decoration: underline;
            text-underline-offset: 2px;
            color: var(--theme2-transparent);
        }

        .contact-me-contact-info h2:nth-of-type(1):hover {
            transform: scale(1.08);
        }

        .contact-me-contact-info h2:nth-of-type(2) a {
            text-decoration: none;
            color: var(--theme2-transparent);
        }

        .contact-me-contact-info h2:nth-of-type(2):hover {
            transform: scale(1.08);
        }

        .contact-me-contact-info i {
            color: var(--theme2);
            padding-right: 1.1vw;
            font-size: clamp(1rem, 1.5vw, 3rem);
        }

    .contact-me-social-links {
        display: flex;
        flex-direction: column;
        gap: 2vh;
    }

        .contact-me-social-links h1 {
            font-family: "Lexend", sans-serif;
            font-size: clamp(1.25rem, 2vw, 2.5rem);
            color: var(--theme2);
        }

        .social-links-container {
            display: flex;
            flex-direction: row;
            gap: 3.5vw;
            justify-content: center;
            align-items: center;
        }

        .social-links-container a {
            color: var(--theme2-transparent);
            font-size: clamp(2rem, 2.8vw, 3.5rem);
            text-decoration: none;
            transition: transform 0.25s ease;
        }

        .social-links-container a:hover {
            transform: scale(1.2);
        }


    .contact-me-block {
        width: 100%;
        height: 4vh;
        background-color: var(--theme2);
        margin-bottom: 4vh;
    }

@media screen and (max-width: 641px) {

/* max-width: 600px for mobile devices. | min-width: 768px for tablets. | min-width: 1024px for desktops. */
    header {
        justify-content: space-between; /* Pushes Logo to left and Icons to right */
    }

    #profile-links {
        display: flex;
        margin-left: auto; 
        margin-right: 1.5rem;
        gap: 1.5rem; /* Increased gap so fingers don't hit two icons at once */
        align-items: center;
    }

    #profile-links a {
        font-size: 1.6rem; /* Adjust this number to make them larger or smaller */
        color: var(--theme2);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;  /* Optional: Creates a larger invisible "tap target" */
        height: 40px; /* Optional: Makes it easier to click on mobile */
    }

    #menu-toggle {
        display: block;
        margin-left: 0; /* Ensures it stays right next to the social links */
        margin-right: 1.2rem;
        background: none;
        border: none;
        color: var(--theme2);
        font-size: 1.8rem;
        z-index: 1001;
        cursor: pointer;
        display: block;
        order: 3;
    }

    /* 3. Navigation Overlay */
    #navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100vh;
        padding-bottom: 80px;
        background-color: var(--theme2) !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        overflow-y: auto; /* Allows scrolling if menu is tall */
        visibility: hidden;         /* Tells the browser to ignore its width */
        pointer-events: none;       /* Prevents accidental clicks when hidden */
        transform: translateX(100%); /* Slides it off-screen right */
        transition: transform 0.4s ease-in-out, visibility 0.4s;
    }

    /* When menu is toggled open via JS */
    #navbar.active {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0); /* Slides it into view */    }

    /* 4. Link Styling & Disabling Hovers */
    #navbar a, 
    .dropbtn {
        font-size: 1.5rem;
        padding: 1.5rem;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        display: block;
        background-color: var(--theme1);
        color: var(--theme2);
        border: none;
        height: auto;
    }

    /* Neutralize hover to prevent unwanted color changes on tap */
    #navbar a:hover, 
    .dropbtn:hover {
        background-color: var(--theme1) !important;
        color: var(--theme2) !important;
        display: block;
        height: auto;
    }

    .dropdown:hover .dropbtn {
        background-color: var(--theme1) !important;
        color: var(--theme2) !important;
    }


    /* 5. The Current/Active Page Link */
    .active, 
    #navbar a.active:hover {
        background-color: var(--theme3) !important;
        color: var(--theme1) !important;
        width: 100%;
        height: auto;
    }

    /* 6. Mobile Dropdown Behavior */
    .dropdown {
        width: 100%;
        height: auto;
    }

    /* Class to be toggled via JavaScript for mobile */
    .dropdown-content.open {
        display: block;
    }

    .dropdown-content a {
        padding: 1rem;
        font-size: 1.2rem;
        border-bottom: 1px solid var(--theme3);
        background-color: rgba(255, 255, 255, 0.05); /* Subtle distinction */
    }

    /* Disable the hover-to-show behavior from desktop */
    .dropdown:hover .dropdown-content {
        display: none; 
    }
    
    /* If you want it to show when active, override the above */
    .dropdown:hover .dropdown-content.open {
        display: block;
    }

    .dropdown {
        width: 100%;
        height: auto;
    }

    /* 1. Hide the content by squishing it, not 'display: none' */
    .dropdown-content {
        display: block; /* Must be block for height animation to work */
        position: static;
        width: 100%;
        max-height: 0;   /* Start at 0 height */
        overflow: hidden; /* Hide the links inside */
        transition: max-height 0.4s ease-in-out; /* The slide animation */
        background-color: var(--theme1);
        box-shadow: none;
        border: none;
    }

    /* 2. When 'open' class is added via JS, expand to a large enough height */
    .dropdown-content.open {
        max-height: 500px; /* Adjust based on how many links you have */
    }

    /* 3. STABILITY FIX: Completely disable hover triggers on mobile */
    .dropdown:hover .dropdown-content {
        display: block; 
        max-height: 0; /* Prevents hover from opening it */
    }
    
    .dropdown:hover .dropdown-content.open {
        max-height: 500px; /* Keeps it open if it's already toggled */
    }

    .dropdown-content a {
        padding: 1.2rem;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--theme3);
        background-color: rgba(0, 0, 0, 0.1); /* Slight contrast */
    }

    .dropdown:hover .dropbtn {
        background-color: var(--theme2) !important;
        color: var(--theme1) !important;
    }

    .dropbtn.active-work {
        background-color: var(--theme3) !important;
        color: var(--theme1) !important;
    }

    .dropbtn.active-work i {
        color: var(--theme1) !important;
    }

    #title {
        z-index: 1;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        margin-bottom: -1%;
        filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
        object-fit: cover;
    }
    #title img {
        height: auto;
        width: 160%;
    }

    #welcome-section {
        height: auto;
    }

    .shape-divider-bottom {
        width: 100%;
        height: 15vw;
    }

    .down-arrow {
        display: none;
    }

    .tilerow {
        gap: 3vw !important;
        margin: 0 4vw 3vw 4vw !important;
    }

    .photography {
        margin: 0 4vw 3vw 4vw !important;
    }

    .work-header {
        padding: 4% 0 !important;
    }

    .about-me {
        display: flex !important;
        flex-direction: column !important;
        flex-direction: column-reverse !important;
        height: auto !important;
        width: 100% !important;
    }

    .about-me-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        position: relative;
        height: auto;
    }

    .about-me-right-left {
        display: none !important;
    }

    .about-me-right-right {
        display: none !important;
    }
    
    .about-me-photo {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 8vw auto !important;
        height: 100% !important;
    }

    .about-me-photo-border {
        display: block !important;
        position: absolute;
        left: 50%;
        transform: translateX(-50%); 
        width: 4vw;
        top: -8vw; 
        bottom: -8vw;
        background-color: var(--theme3); 
        z-index: 1;
    }

    .about-me-photo::before {
        content: "";
        position: absolute;
        inset: -2.5vw;
        border: 2.8vw solid var(--theme3);
        clip-path: inset(0 50% 0 0);
    }

    .about-me-photo img {
        width: 100%;
        height: auto;
        display: block;
    }

    .about-me-photo-container {
        width: 100%;
        height: auto;
        position: relative;
        z-index: 2;
    }

    .about-me-border {
        display: none !important;
    }

    .about-me-left {
        width: 100% !important;
        height: auto !important;
        padding: 6vw 4vw !important;
        border-top: var(--theme3) 3vw solid;
    }

    .about-me-title {
        margin-left: 0 !important;
    }

    .lets-connect-description-container {
        flex-direction: column !important;
    }

    .lets-connect-link {
        margin: 2vh auto 0 auto !important;
    }

    .contact-me {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
    }

    .contact-me-right-content {
        gap: 5vw;
    }

    .contact-me-left-content {
        width: 100%;
        height: 15vw !important;
    }

    .social-links-container {
        gap: 15vw !important;
        margin-bottom: 4vw !important;
    }
}