@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis:YEAR@1979&family=Cossette+Texte:wght@400;700&family=Geist+Mono&family=Kumbh+Sans:wght,YOPQ@600,224&family=Space+Grotesk:wght@500&display=swap');

:root {
    font-family: "Cossette Texte", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;

    background-image: url(assets/images/bg_tiles.jpg);

    /* #region ===vars=== */
    --marquee-height : 32px;
    /* #endregion */

    /* #region ===palette=== */
    --purple-50: #13131D;
    --purple-100: #2E2B4F;
    --purple-200: #4B349C;

    --blue-200: #87b7e4;
    /* #endregion */
}

.flex {
    display: flex;
}

h1 {
    margin: 32pt;
}

a {
    color: var(--blue-200);
}

audio {
    margin-left: 64pt;
    width: calc(100% - 128pt);
}

img:not(.keep) {
    height: 240px;
}

.lonely {
    margin-top: 70%;
    margin-bottom: 70%;
}

.block {
    margin: auto;
    margin-top: 32pt;
    padding: 16pt;
    max-width: calc(100% - 640px);
    min-width: 470px;
    background-color: black;
    border: #4B349C;
    border-style: solid;
    border-radius: 8px;
}

.auto-margin {
    margin: auto;
}

.align-center-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.indent {
    text-indent: 40pt;
}

/* #region ===fonts=== */
.space-grotesk-marquee {
    font-family: "Space Grotesk", sans-serif;
    font-size: 16pt;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    height: var(--marquee-height);
    line-height: var(--marquee-height);
}

.kumbh-sans-title {
    font-family: "Kumbh Sans", sans-serif;
    font-size: 64pt;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "YOPQ" 40;
}

.kumbh-sans-title:hover {
    animation: title-hover 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.kumbh-sans-title:not(:hover) {
    animation: title-hover-end 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes title-hover {
    100% {
        font-variation-settings:
            "YOPQ" 180;
    }
}

@keyframes title-hover-end {
    0% {
        font-variation-settings:
            "YOPQ" 180;
    }

    100% {
        font-variation-settings:
            "YOPQ" 40;
    }
}

.geist-mono {
    font-family: "Geist Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.climate-crisis-big {
    font-family: "Climate Crisis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "YEAR" 1979;
    font-size: 64px;
}

.cossette-texte-regular {
    font-family: "Cossette Texte", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.cossette-texte-bold {
    font-family: "Cossette Texte", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* #endregion */

/* #region ===marquees=== */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    background: var(--purple-100);
    color: white;
    height: var(--marquee-height);
    align-items: center;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 50s linear infinite;
    margin: 0;
}

/*
.marquee-content:hover { animation-play-state: paused; }
*/

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* #endregion */