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

/* Common Font Declarations */
@font-face {
    font-family: Poppins;
    src: url(/webfonts/Poppins-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Poppins;
    src: url(/webfonts/Poppins-SemiBold.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: Poppins, sans-serif;
} 

/* External Link Indicator */
a[rel~=external]:not([href^="mailto:"]):not([href^="tel:"])::after,
a[target="_blank"]:not([href^="mailto:"]):not([href^="tel:"])::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-left: .25em;
    margin-bottom: .25em;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgNkg2YTIgMiAwIDAgMC0yIDJ2MTBhMiAyIDAgMCAwIDIgMmgxMGEyIDIgMCAwIDAgMi0ydi02bS03IDFsOS05bS01IDBoNXY1Ii8+PC9zdmc+") no-repeat center;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgNkg2YTIgMiAwIDAgMC0yIDJ2MTBhMiAyIDAgMCAwIDIgMmgxMGEyIDIgMCAwIDAgMi0ydi02bS03IDFsOS05bS01IDBoNXY1Ii8+PC9zdmc+") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (hover:hover) and (pointer:fine) {
    a[rel~=external]:not([href^="mailto:"]):not([href^="tel:"]),
    a[target="_blank"]:not([href^="mailto:"]):not([href^="tel:"]) {
        position: relative;
    }

    a[rel~=external]:not([href^="mailto:"]):not([href^="tel:"])::before,
    a[target="_blank"]:not([href^="mailto:"]):not([href^="tel:"])::before {
        content: "Opens in new tab";
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        margin-left: 5px;
        background-color: rgba(25, 25, 25, .9);
        color: #fff;
        padding: 5px 8px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease-in-out;
        z-index: 10;
    }

    a[rel~=external]:not([href^="mailto:"]):not([href^="tel:"]):hover::before,
    a[target="_blank"]:not([href^="mailto:"]):not([href^="tel:"]):hover::before {
        transition-delay: 60ms;
        opacity: 1;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: #2d2d2d;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #4d9cfa;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3971a3;
}

/* Base HTML behaviors */
html {
    scroll-behavior: smooth;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.44s; /* Increase duration to 0.44 seconds */
}

/* Disable view transitions for users with reduced motion preference enabled */
@media (prefers-reduced-motion) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }