:root {
    --colorprimary: #62b1f3;
    --colorsecondary: #020024;
    --coloraccent: #2e87e5;
    --colorbackground: #213448;
    --colortext: white;
    --textcolorcontrast: black;
    --headshotBackground: #ecf2f8;
    --togglercolor: #f2f3f4;
    --colorcard: #2D4762;
    --ff: 'Roboto', sans-serif;
    --margin-xxs: .25rem;
    --margin-xs: .5rem;
    --margin-s: .75rem;
    --margin-m: 1rem;
    --margin-l: 1.25rem;
    --margin-xl: 1.75rem;
    --margin-xxl: 2.5rem;
    --h1: bold max(36px, 4vw) / max(36px, 5vw) var(--ff);
    --h2: max(24px, 4vw) / max(24px, 5vw) var(--ff);
    --h3: bold 24px/36px var(--ff);
    --h4: bold 18px/27px var(--ff);
    --p: 18px/27px var(--ff);
    --links: bold 18px/18px var(--ff);
    --h5: bold 14px/21px var(--ff);
    --subtext: 12px/20px var(--ff);
    --transition: .3s ease-in-out;
    --shadow: 0 4px 12px rgba(0, 0, 0, .2);
    --darkshadow: 0 5px 10px 5px var(--colorbackground);
}

html {
    scroll-behavior: smooth
}

body {
    background-color: var(--colorbackground);
    font-family: var(--ff);
    line-height: 1.6;
    color: var(--colorsecondary);
    transition: background-color .3s ease, color .3s ease;
}

.wordborder {
    color: var(--colorprimary); /* Set your main text color */
    text-shadow:
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px  1px 0 #fff,
    1px  1px 0 #fff;
}

h1, h2, h3, h4, h5 {
    color: var(--colorprimary);
}

h1 {
    font: var(--h1);
    line-height: 1.2
}

h2 {
    font: var(--h2);
    line-height: 1.3
}

h3 {
    font: var(--h3);
    font-size: clamp(20px, 2.5vw, 32px);
    line-height: 1.4
}

h4 {
    font: var(--h4);
    line-height: 1.4
}

h5 {
    font: var(--h5);
    line-height: 1.4
}

p, ul, .card-text {
    color: var(--colortext);
    font: var(--p);
}

ul.list-unstyled li h4 {
    margin-bottom: 1rem;
}

.links {
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    color: var(--colorprimary);
    transition: color var(--transition);
}

.links:hover {
    text-decoration: none;
    color: var(--colorsecondary);
}

.section-divider {
    border: none;
    height: 2px;
    width: 66.666%;
    margin: 2rem auto;
    background: linear-gradient(to right, var(--colorprimary), var(--colorsecondary));
    opacity: .8;
    border-radius: 5px;
}

@keyframes fadeInDivider {
    0% {
        opacity: 0;
        width: 0
    }

    100% {
        opacity: .8;
        width: 60px
    }
}

.social-icons {
    display: flex;
    gap: 20px;
    margin: var(--margin-m) 0;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: transform .2s ease, color .3s ease;
    text-decoration: none !important;
}

.social-icons a i {
    font-size: 30px;
    color: var(--colortext);
}

.social-icons a:hover i {
    color: var(--colorprimary);
    transform: scale(1.1);
}

.social-icons a:focus, .social-icons a:active, .social-icons a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.hero-section::before, #contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33, 52, 72, .5);
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

#contact .container {
    position: relative;
    z-index: 2;
}

.navbar, .sub-navbar {
    background-color: var(--colorsecondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    z-index: 1050;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.sub-navbar .nav-link {
    position: relative;
    color: var(--colortext, #ffffff);
    font-weight: 500;
    padding: .5rem 1.2rem;
    border-radius: 2rem;
    margin: 0 .4rem;
    transition: all .3s ease-in-out;
    background-color: transparent;
    border: 1px solid transparent;
}

.sub-navbar .nav-link:hover {
    background-color: rgba(var(--colorprimary, 0, 123, 255), .1);
    color: var(--colorprimary);
}

.sub-navbar .nav-link.active {
    background-color: var(--colorprimary);
    color: var(--colorsecondary) !important;
    border: 1px solid var(--colorprimary);
}

#current-section-title {
    font-size: 1.1rem;
    color: var(--colorprimary);
    padding-left: .5rem;
}

.navbar-toggler {
    border: none;
    box-shadow: none;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.sub-navbar.sticky-top {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(var(--colorsecondary, 255, 255, 255), .85);
    transition: background-color .3s ease-in-out;
}

.custom-color {
    color: var(--colorprimary) !important;
}

.project-section {
    max-width: 900px;
    margin: auto;
    padding: 2em;
    line-height: 1.6;
}

.project-section a {
    color: var(--colorprimary);
    text-decoration: none;
}

/* Adjust background image cropping on mobile */
@media (max-width: 768px) {
    .hero-section,
    #contact {
        background-attachment: scroll; /* Prevents fixed issues on mobile */
        background-size: auto 100%;    /* Fit height, allow horizontal cropping */
        background-position: top center;
    }
}