@font-face {
    font-family: Comfortaa;
    src: url(/static/fonts/comfortaa/webfonts/comfortaa-latin-300-normal.woff2) format('woff2');
}

/* @font-face {
    font-family: Comfortaa;
    src: url(/static/comfortaa/webfonts/);
} */

 @font-face {
    font-family: Redacted;
    src: url(/static/fonts/redacted-script_5.2.8/ttf/redacted-script-latin-300-normal.ttf) format('truetype');
} 


@font-face {
    font-family: Turret;
    src: url(/static/fonts/Turret_Road/TurretRoad-Regular.ttf) format('truetype');
}

@keyframes changeColor {
    0% {
        background-color: rgba(0, 0, 0, 0.82);
    }

    50% {
        background-color: rgba(117, 189, 225, 0.5);
    }

    100% {
        background-color: rgba(0, 0, 0, 0.82);
    }
}

@keyframes penrose-pulses {
    0% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(128, 63, 40, 0.25);
    }

    7% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(237, 176, 102, 0.7);
    }

    10% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(237, 176, 102, 0.83);
    }

    50% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(255, 127, 80, 0.7);
    }

    75% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(128, 63, 40, 0.555);
    }

    80% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(128, 63, 40, 0.35);
    }

    100% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(128, 63, 40, 0.25);
    }
}

@keyframes tff-sweeps {
    0% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(35, 9, 8, 0.25);
    }

    7% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(0, 200, 200, 0.5);
    }

    10% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(0, 200, 200, 0.79);
    }

    50% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(133, 43, 34, 0.7);
    }

    100% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(35, 9, 8, 0.25);
    }

}

@keyframes atomkr-pings {
    0% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(35, 9, 8, 0.25);
    }

    6% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(35, 9, 8, 0.43);
    }

    8% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(108, 27, 201, 0.651);
    }

    10% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(117, 44, 201, 0.863);
    }

    74% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(133, 43, 34, 0.7);
    }

    100% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(35, 9, 8, 0.25);
    }

}

@keyframes astr-strikes {
    0% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(122, 172, 184, 0.43);
    }

    6% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(122, 172, 184, 0.43);
    }

    7% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(110, 219, 194, 0.851);
    }

    34% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(19, 128, 102, 0.89);
    }

    100% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(122, 172, 184, 0.43);
    }

}

@keyframes bulw-breaths {
    0% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(1, 159, 90, 0.2);
    }

    7% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(133, 43, 34, 0.7);
    }

    34% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(253, 173, 100, 0.87);
    }

    /* 66% {
        /* background-color: rgba(0, 0, 0, 0.82); 
        background-color: rgba(253, 173, 100, 0.925);
    } */

    93% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(133, 43, 34, 0.7);
    }

    100% {
        /* background-color: rgba(0, 0, 0, 0.82); */
        background-color: rgba(1, 159, 90, 0.2);
    }

}

/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */

a {
    /* background-color: rgba(255, 127, 80, 0.4); */
    color: black;
}

.navlink {
    padding: 23px;
    transition-duration: 100ms;
    font-family: Comfortaa, sans-serif;
    color: antiquewhite;

}

.navlink:hover {
    color: rgba(0, 200, 200, 0.5);
    /* background-color: rgba(175, 80, 223, 0.4); */
}

/* navbar shenanigans */

.nav-container {
    transition-duration: 100ms;
    background-color: rgba(0, 0, 0, 0.22);
    padding: 2px;
}

.nc-penrose {
    transition-duration: 500ms;
    background-color: rgba(0, 0, 0, 0.22);
    padding: 2px;
}


.nav-container:hover {
    background-color: rgba(0, 200, 200, 0.5);
    padding: 2px;
}

/* navbar shenanigans */

body {
    /* background-color: black; */
    text-align: center;
    background-image: url(img/SYAKSA.jpg);
    background-size: cover;
    min-height: 100vh;
}

.body-procyon {
    background-image: url(img/archive_stacks__Tithi\ Luadthong.jpg);
    background-size: cover;
    min-height: 100vh;
}

.body-isydia {
    background-image: url(img/0_Isydia\ Banner.jpg);
    background-size: cover;
    min-height: 100vh;
}

.body-urn {
    background-image: url(img/distant_relay.jpg);
    background-size: cover;
    min-height: 100vh;
}

/* Pseudo-element for background image */
/* body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(img/SYAKSA.jpg) no-repeat center center fixed;
    background-size: cover;
    transition: opacity 0.3s ease;
    z-index: -1; /* Behind the content /
    opacity: 0; /* Initially set to 0 (black background) /
  } */

.body-text {

    font-family: 'Turret', sans-serif;
    text-shadow: black;
    color: coral;
    width: 50%;
    align-content: center;
    margin: auto;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.82);

}

.placeholder-text {
    font-family: 'Turret', sans-serif;
}

img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    box-shadow: 5px 5px 10px black;
}

img:hover {
    box-shadow: 5px 5px 15px coral;
}

.helix-corp {
    background-image: url(/img/subterrine-square_grandeduc.jpg);
    background-size: cover;
    min-height: 100vh;
}

/* .text-between {
    display: block; /* Initially hide the text elements *
} */

.timestamp {
    display: block;
    /* Initially hide the headers */
    color: white;
}

.protonstamp {
    display: none;
    /* Initially hide the headers */
    color: white;
}

table {
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
}

#audioPlayer {
    position: sticky;
    top: 0;
    /* The player will stick to the top of the viewport */
    z-index: 1000;
    /* Make sure it's on top of other content */
    /* Add a background to ensure it's readable */
    padding: 10px;
    margin: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition-duration: 200ms;
    border-radius: 3%;


}

.audio-container {}

.ac-penrose {

    animation: penrose-pulses ease;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    animation-fill-mode: both;
    /* animation-play-state: paused; */

    /* transition: transform 0.6s cubic-bezier(0.68, 3.6, 0.32, 1.6); */
}

.ac-tff {
    animation: tff-sweeps ease;
    animation-iteration-count: infinite;
    animation-duration: 1.42s;
    animation-fill-mode: both;
}

.ac-atomkr {

    animation: atomkr-pings ease;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-fill-mode: both;

}

.ac-astra {
    animation: astr-strikes ease;
    animation-iteration-count: infinite;
    animation-duration: 1.2s;
    animation-fill-mode: both;
}

.ac-bulwark {
    animation: bulw-breaths ease;
    animation-iteration-count: infinite;
    animation-duration: 2.38s;
    animation-fill-mode: both;
}

.ac-proton {
    animation: changeColor ease;
    animation-iteration-count: infinite;
    animation-duration: 1.34s;
    animation-fill-mode: both;
}

#audioPlayer:hover {
    background-color: rgba(195, 50, 43, 0.32);
}

.cursor {
    font-weight: bold;
    color: red;
    /* Visual indicator of the cursor */
}

/*------------------ Structural ------------------*/

.thumbnail {
    width: 20px;
    height: 20px;
}

.portraits {
    width: 90px;
    height: 90px;
}

.home{
    background-image: url(/img/thumbnails/Isydia\ -\ Syaksa.jpg);
}

.horizons {
    width: 500px;
    height: 500px;
    cursor: crosshair;
    background-color: coral;
    opacity: 0.5;
}

.hidden-content {
    display: none;
    color: darkslateblue;
    background-color: palegreen;
}

.horizons:hover+#hidden-content {
    display: block;
}

.navbar {
    /* border: 2px solid teal; */
    text-align: center;
}

.navbutton {
    align-items: flex-start;

}

.container {
    margin-left: auto;
    margin-right: auto;
}

.artist-splash {
    width: 50%;
    /* border: 2px black; */
    margin: auto;
}

#isydia-container {
    float: left;
    font-family: fantasy;
    text-decoration: wavy;
}

#procyon-b-container {

    float: right;
}

.audio-table {
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
    background-color: rgba(0, 0, 0, 0.82);
    border-radius: 5%;
}

.bandcamp-embed-container {}

.bandcamp-embed-small {
    border: 0;
    width: 50%;
    height: 120px;
}

/*------------------ Track/page Specifics ------------------*/

#syaksa-container {
    width: 15%;
    height: 200px;
}

.flood-basalt {
    background-image: url(/img/Flood\ Basalt\ __\ Liu\ Zishan.jpg);
    background-size: cover;
}

.downloads {}

.helix {
    /* background-image: url(img/SYAKSA.jpg);
    height: 100%; */
}

.portal {
    background-image: url(img/_portal_.jpg);
}

.portal-text {
    color: coral;
}

.penrose-engine {
    /*background-image: url(img/_Penrose-Engine.jpg);*/
    background-size: cover;
}

.penrose-text {

    /* background-image: linear-gradient(45deg, #ff6347, #ff4500, #3cb371); */
    /* Gradient with three colors */
    /* background-clip: text; */
    /* color: transparent */
}

.tff {
    background-image: url(img/_forbidden-forest_.jpg);
    background-size: cover;
}

/* Pseudo-element for background image */
.tff::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(img/_forbidden-forest_.jpg) no-repeat center center fixed;
    background-size: cover;
    transition: opacity 0.3s ease;
    z-index: -1;
    /* Behind the content */
    opacity: 0;
    /* Initially set to 0 (black background) */
}

.tff-text {}

.atomkraft {
    background-image: url(img/_atomkraft_.jpg);
    background-size: cover;
}

.atomkraft-text {}

.astraphobia {
    background-image: url(img/_astraphobia_.jpg);
    background-size: cover;
}

.astraphobia-text {}

.bulwark {
    background-image: url(img/_Bulwark.jpg);
    background-size: cover;
}

.bulwark-text {
    color: teal
}

.proton-decay {
    background-image: url(img/_proton-decay_.jpg);
    background-size: cover;
}

.proton-text {}

.shifting-sea {
    background-image: url(img/_Across\ the\ Shifting\ Sea.jpg);
    background-size: cover;
}


.shifting-sea-text {
    color: rgb(230, 164, 135);
}

.content-container {}

p {
    color: aqua;
}

.track-name {
    text-align: center;
    color: aqua;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.step-forward {
    align-content: left;
    background-color: rgba(90, 109, 176);
    padding: 2px;
    border-radius: 10%;
    margin: 5px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.step-forward:hover {
    background-color: rgba(239, 209, 170, 0.9);
}

.step-back {
    align-content: center;
    background-color: rgba(90, 109, 176, 0.7);
    padding: 2px;
    border-radius: 10%;
    margin: 2px;
}

.step-back:hover {
    background-color: rgba(90, 109, 176, 0.3);
}

.episode {
    align-content: center;
    color: orange
}

.tagline {
    align-content: center;
    color: azure
}

.TODO {
    color: red;
}

/*---------------------- Naomi ----------------------*/

.naomi-thoughts {
    color: teal
}

/*---------------------- Kai ----------------------*/

.kai-thoughts {
    color: seagreen
}

.kai-dialogue {
    color: green
}

/*---------------------- syaksa ----------------------*/

.emissary-dialogue {
    color: purple
}

.em-r {
    font-family: Turret;
}

/*---------------------- astraphobia ----------------------*/

.astraphobia-text {

    /* mix-blend-mode: difference; */
}

/* .astraphobia-text>span {
    background-color: black;
    line-height: 2;

} */

/*---------------------- bulwark ----------------------*/

.bulwark-text {

    /* mix-blend-mode: difference; */
}

.bulwark-text>span {

    line-height: 2;
}


/*--------------------- dom -------------------------*/

#tff-tag {
    animation:
        typing 14s steps(18, end),
}

.typewriter p {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: .15em solid cyan;
    /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em;
    /* Adjust as needed */
    animation:
        typing 14s steps(78, end),
        blink-caret .75s step-end infinite;
}

.tagline h3 {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: .15em solid cyan;
    /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em;
    /* Adjust as needed */
    animation:
        typing 14s steps(78, end),
        blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* The typewriter cursor effect */
@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: teal;
    }
}