:root {
    /* keep in mind that these values are dedicated for mobile view */
    --header-width: 100px;
    --header-height: 100%;

    --logo-size: 60px;

    --container-padding: 0; /* desktop size */
    --scroll-bar-width: 8px;
    
    /* text colors */
    --txt-prime: rgba(255, 255, 255, 0.857);
    --txt-highlight: #0ae4d6;
    --line-color: #32678887;
}

/*
@font-face {
    font-family: 'source';
    src: url('http://localhost:3000/SourceSerif4.ttf') format('truetype');
}*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: monospace;
}

/* 
    z index
        -2 canvas
        -1 card images
        0 all
        1 header
        2 dialog
        3 loading
*/

html {
    scroll-behavior: smooth;
}

ul {
    list-style: none;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background-color: #031825;
}

/* highlight text for sections like project  and contact */
.section-label {
    color: var(--txt-highlight) !important;
    padding: 10px;
}

.icon-link {
    fill: var(--txt-prime);
    width: 25px;
    height: 25px;
}

/* hightlighted with */
.text-highlight {
    font-size: 16px;
    color: var(--txt-highlight);
}

.background { /* canvas */
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: -2;

    filter: blur(8px);
    background-color: #03182511;
}

.loading-background {
    background-color: #031825;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.loading-background svg {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
}

.loading-background svg path:nth-child(1) {
    stroke-dasharray: 857;
    stroke-dashoffset: 200;
    animation: line-anim 2s ease-in forwards;
}

.loading-background svg path:nth-child(2) {
    stroke-dasharray: 920;
    stroke-dashoffset: 100;
    animation: line-anim 2s ease-in forwards 0.5s;
}

.loading-background svg path:nth-child(3) {
    stroke-dasharray: 488;
    stroke-dashoffset: 2;
    animation: line-anim 2s ease-in forwards 0.6s;
}

.loading-background svg path:nth-child(4) {
    stroke-dasharray: 464;
    stroke-dashoffset: 2;
    animation: line-anim 2s ease-in forwards 0.9s;
}

@keyframes line-anim {
    to {
        stroke-dasharray: 0;
    }
}

/* ---------------------------------------------------------- SCROLL BAR ---------------------------------------------------------- */

/* Styles for the scroll bar track */
::-webkit-scrollbar {
    width: var(--scroll-bar-width);
}

/* Styles for the scroll bar thumb */
::-webkit-scrollbar-thumb {
    background-color: #385a7c; /* Replace with your dark blue color */
    border-radius: 8px; /* Adjust the radius as desired */
}

/* Styles for the scroll bar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #23415f; /* Replace with a darker shade of your blue color */
}

/* Styles for the scroll bar track when scrolling */
::-webkit-scrollbar-track {
    background-color: #031825; /* Replace with your desired track color */
}