@font-face {
    font-family: 'ElmsSans';
    src: url('../fonts/ElmsSans.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'ElmsSans';
    src: url('../fonts/ElmsSans-italic.ttf') format('truetype');
    font-style: italic;
    font-display: swap;
}



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

:root {
    --default-bg-color: rgb(255,255,255);
    --default-text-color : rgb(30,30,30);

    --badge-highlight-color: rgb(200, 244, 228);
    --highlight-color: rgb(0,117,178);
    --translucent-highlight-color: rgba(0,117,178,0.3);
    --highlight-gradient: linear-gradient(to right, rgb(0,117,178), rgb(0,200,131));

    --projects-icon-bg-color: rgb(212,240,255);


    --final-opacity: 1;
    --mx: 2.83%;
    --my: -1.67%;
    --mrot: 3.48deg;
    --float-duration: 10.39s;
    --float-delay: -5.42s;
}

html {
    scrollbar-gutter: stable;
}

body {
    font-family: 'ElmsSans', sans-serif;
    font-weight: 200;
    line-height: 1.45em;
    background-color: var(--default-bg-color);
    color: var(--default-text-color);
}

header {
    display: none;
}


a, a:visited, a:active, *::part(link) {
    color: rgb(90,90,90);
    transition: 0.3s;
}

    a:hover, *::part(link):hover {
        color: var(--highlight-color);
    }

h1, h2, h3, h4 {
    color: var(--default-text-color);
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

h2 {
    margin-bottom: 30px;
    margin-top: 75px;
}

h3 {
    line-height: 1.75em;
}

p {
    line-height: 1.8em;
    margin-bottom: 1em;
    margin-top: 1em;
    text-align: justify;
    font-size: 1.1em;
}

strong {
    font-weight: 500;
}


.text-content {
    word-break: break-word;
}

.text-center {
    text-align: center;
}


@media (prefers-color-scheme: dark) {
    :root {
        --default-bg-color: rgb(30,30,30);
        --default-text-color: rgb(230,230,230);

        --badge-highlight-color: rgb(31,126,104);
        --highlight-color: rgb(92,198,237);
        --translucent-highlight-color: rgba(92,198,237,0.3);
        --highlight-gradient: linear-gradient(to right, rgb(8, 140, 187), rgb(31,255,205));

        --projects-icon-bg-color: rgb(18,59,92);
    }

    a, a:visited, a:hover, a:active, *::part(link) {
        color: rgb(200,200,200);
    }
}

.fadeout {
    animation: fade-out 0.3s;
}