*
{
    transition: all 0.15s;
    --cool-border: 8px solid white;
}

body
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
    position: relative;
}

body.hero
{
    background-color: rgb(14, 25, 28);
}

header
{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}

.antiButton
{
    opacity: 0;
    min-width: 0;
    flex-shrink: 2;
}

.antiButton
{
    cursor: default;
}

h1
{
    font-size: 40px;
    color: white;
    text-align: center;
}

h2
{
    color: white;
    margin: 0.5em;
    text-align: center;
    font-size: 34px;
}

h3
{
    color: white;
    margin: 0.5em;
    text-align: center;
    font-size: 28px;
}

a
{
    color: cyan;
}

p
{
    color: white;
    margin: 0.5em;
    text-align: center;
    font-size: 16px;
}

button
{
    background: none;
    border: none;
}

label
{
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    margin: 0px;
}

select
{
    background: black;
    font-size: 24px;
    color: white;
    border: none;
    border-radius: 0.5em;
}

input[type="checkbox"]
{
    margin: 0px;
    padding: 0px;
    scale: 200%;
}

#sortOptions
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1em;
    align-items: center;
    margin: 1em;
    max-width: 100%;
}

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

.audioCard
{
    width: 75%;
    padding: 1em;
    margin: 1em;
    border-radius: 1em;
    display: inline-block;
    font-family: sans-serif;
    text-align: center;
}

.imageContainer
{
    position: relative;
}

.coverArt
{
    width: 100%;
    border-radius: 1em;
    border: var(--cool-border);
}

.coverArt:hover
{
    cursor: pointer;
}

.controls
{
    display: flex;
    justify-content: left;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 2em;
}

.controls button, .controlsSmall button
{
    padding: 1em 2em;
    margin: 0 4px;
    border: none;
    border-radius: 6px;
    background-color: white;
    color: black;
    cursor: pointer;
}

.timebarContainer
{
    margin-top: 1em;
    width: 100%;
    height: 1em;
    background-color: #ffffff33;
    border-radius: 3px;
    position: relative;
    display: flex;
    overflow: hidden;
}

.timebarProgress
{
    height: 100%;
    width: 0%;
    background-color: white;
    display: inline-block;
}

.timebarProgress.variation
{
    opacity: 85%;
}

.timebarGap
{
    height: 100%;
    width: 0%;
    display: inline-block;
}

.mainTime:hover
{
    cursor: pointer;
    transform: scale(1, 1.5);
}

.mainTime > .timebarProgress
{
    transition: none;
}

.motifTime:has(.timebarProgress:hover)
{
    cursor: pointer;
    transform: scale(1, 1.5);
}

.timeLabels
{
    font-size: 12px;
    color: white;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#motifSep
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#motifSep > div
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
}

.motifRefDiv
{
    display: flex;
    flex-direction: row;
    width: 90%;
}

.motifRefPlayDiv
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.cardSmall
{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.controlsSmall
{
    display: flex;
    justify-content: center;
    margin: 4em 1em;
}

.motifList, .songList, #motifList, #songList, #contribList, .contribList
{
    width: 50%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 1em;
    margin: 1em;
    position: relative;
}

.contribDiv
{
    border: var(--cool-border);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 2em;
    margin: 0.25em;
}

.contribImg
{
    width: 10em;
    height: 10em;
    border-radius: 5em;
}

.linksDiv
{
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.motifList, .songList, .contribList
{
    width: 100%;
}

.albumTitleDiv
{
    width: 100%;
    border-bottom: solid white 2px;
}

.albumTitleDiv > h2
{
    text-align: left;
}

.songDiv
{
    border: var(--cool-border);
    display: flex;
    flex-direction: row;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 2em;
    margin: 0.25em;
}

.songDiv.noMotifs
{
    opacity: 50%;
}

a.songDiv:hover
{
    text-decoration: none;
    border-width: 16px;
    padding: calc(2em - 8px);
}

.motifMainDiv
{
    border: var(--cool-border);
    display: flex;
    flex-direction: row;
    opacity: 50%;
    height: 21em;
    width: 21em;
    border-radius: 8px;
    position: relative;
}

.motifMainDiv.playing
{
    opacity: 100%;
}

a.motifMainDiv:hover
{
    text-decoration: none;
    border-width: 16px;
}

/* left time */
.motifMainDiv > div:first-child
{
    padding: 1em;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.motifMainDiv > div:first-child > img
{
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-grow: 1;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

/* right side */
.motifMainDiv > div:last-child
{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.motifMainDiv > div:last-child:not(:has(> div))
{
    display: none;
}

/* letter div */
.motifMainDiv > div:last-child > div
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: var(--cool-border);
    border-right: none;
    border-top: none;
    height: 100%;
    width: 100%;
    transition: border-style 0s;
}

.motifMainDiv > div:last-child > div.playing:not(:first-child)
{
    border-top: var(--cool-border);
}

.motifMainDiv > div:last-child > div:has(+ div.playing)
{
    border-bottom: none;
}

.motifMainDiv > div:last-child > div > *
{
    padding: 0;
    margin: 0;
}

.motifMainDiv.playing > div:last-child > div
{
    opacity: 50%;
}

.motifMainDiv.playing > div:last-child > div.playing
{
    opacity: 100%;
}

.motifMainDiv > div:last-child > div:first-child
{
    border-top: none;
}

.motifMainDiv > div:last-child > div:last-child
{
    border-bottom: none;
}

.variationDiv
{
    display: none;
}

.variationDiv.playing
{
    display: inline;
}

.variationDiv > p
{
    margin: 0;
}

.bigLink
{
    border: 2px solid cyan;
    padding: 1em;
    border-radius: 0.5em;
    margin: 0.5em;
}

.bigLink:hover
{
    scale: 1.05;
}

#blackScreen
{
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    transition: all 0s;
}

#blackFlash
{
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    pointer-events: none;
    transition: all 0s;
}

#flash
{
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    pointer-events: none;
    transition: all 0s;
}

#staticWrapper
{
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: all 0s;
    opacity: 33%;
    overflow: hidden;
}

#staticWrapper > img
{
    min-width: 100%;
    min-height: 100%;
    aspect-ratio: 1 / 1;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

.mFreedom > div > img
{
    margin: 0 auto;
}

.mFreedom:not(.playing) > div > img
{
    animation-name: freedomFloat;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
}

@keyframes freedomFloat
{
    0%
    {
        margin-top: 0;
        margin-bottom: 1em;
    }
    50%
    {
        margin-top: 1em;
        margin-bottom: 0;
    }
    100%
    {
        margin-top: 0;
        margin-bottom: 1em;
    }
}

.mFreedom.playing
{
    position: relative;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .01);

    &::after
    {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        height: 100%;
        width: 100%;
        transform: scale(0.9) translateZ(0);
        filter: blur(15px);
        background: linear-gradient(
            to left,
            #e0e555,
            #6d6ebf,
            #e0e555
        );
        background-size: 200% 200%;
        animation: animateGlow 1.25s linear infinite;
    }
}

@keyframes animateGlow
{
    0%
    {
        background-position: 0% 50%;
    }
    100%
    {
        background-position: 200% 50%;
    }
}

.mFromnowon
{
    position: relative;

    &::after
    {
        position: absolute;
        content: "";
        z-index: 1;
        width: 83px;
        height: 20px;
    }

    &.playing::after
    {
        animation: awakeEffect 1.6s forwards;
    }

    &:not(.playing)::after
    {
        animation: tiredEffect 1.6s forwards;
    }
}

@keyframes tiredEffect
{
    0%
    {
        background: url("https://monstyrslayr.github.io/deltarunemotifs/img/tired.png");
        left: calc(50% - 41.5px);
        top: calc(43% - 10px);
        opacity: 100%;
        animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    }

    40%
    {
        background: url("https://monstyrslayr.github.io/deltarunemotifs/img/tired.png");
        left: calc(80% - 41.5px);
    }

    75%
    {
        background: url("https://monstyrslayr.github.io/deltarunemotifs/img/tired.png");
        left: calc(80% - 41.5px);
        top: calc(43% - 10px);
        opacity: 100%;
    }

    100%
    {
        background: url("https://monstyrslayr.github.io/deltarunemotifs/img/tired.png");
        left: calc(80% - 41.5px);
        top: calc(25% - 10px);
        opacity: 0%;
    }
}

@keyframes awakeEffect
{
    0%
    {
        background: url("https://monstyrslayr.github.io/deltarunemotifs/img/awake.png");
        left: calc(50% - 41.5px);
        top: calc(43% - 10px);
        opacity: 100%;
        animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    }

    40%
    {
        background: url("https://monstyrslayr.github.io/deltarunemotifs/img/awake.png");
        left: calc(80% - 41.5px);
    }

    75%
    {
        background: url("https://monstyrslayr.github.io/deltarunemotifs/img/awake.png");
        left: calc(80% - 41.5px);
        top: calc(43% - 10px);
        opacity: 100%;
    }

    100%
    {
        background: url("https://monstyrslayr.github.io/deltarunemotifs/img/awake.png");
        left: calc(80% - 41.5px);
        top: calc(25% - 10px);
        opacity: 0%;
    }
}

.gone
{
    display: none !important;
}

@media screen and (max-width: 1440px)
{
    #motifList, #songList
    {
        width: 90%;
    }
}

@media screen and (max-width: 800px)
{
    .motifRefDiv
    {
        flex-direction: column;
    }

    .controlsSmall
    {
        margin: 1em;
    }

    #sortInput
    {
        max-width: 51%;
    }
}

@media screen and (max-width: 500px)
{
    header
    {
        flex-direction: column;
        gap: 0;
        padding: 1em;
    }

    .antiButton
    {
        display: none;
    }

    h1
    {
        font-size: 36px;
    }

    h2
    {
        font-size: 30px;
    }

    h3
    {
        font-size: 24px;
    }

    .audioCard
    {
        width: 90%;
    }

    .motifMainDiv
    {
        flex-direction: column;
        height: 16em;
    }

    .motifMainDiv > div:first-child
    {
        flex-direction: row;
        height: 60%;
    }

    .motifMainDiv > div:last-child
    {
        flex-direction: row;
    }

    .motifMainDiv > div:last-child > div
    {
        border-top: var(--cool-border);
        border-right: var(--cool-border);
        border-left: none;
        border-bottom: none;
    }

    .motifMainDiv > div:last-child > div:first-child
    {
        border-top: var(--cool-border);
        border-left: none;
    }

    .motifMainDiv > div:last-child > div:last-child
    {
        border-right: none;
    }

    .motifMainDiv > div:last-child > div.playing:not(:first-child)
    {
        border-left: var(--cool-border);
    }

    .motifMainDiv > div:last-child > div:has(+ div.playing)
    {
        border-right: none;
    }

    @keyframes tiredEffect
    {
        0%
        {
            background: url("https://monstyrslayr.github.io/deltarunemotifs/img/tired.png");
            left: calc(25% - 41.5px);
            top: calc(50% - 10px);
            opacity: 100%;
            animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
        }

        40%
        {
            background: url("https://monstyrslayr.github.io/deltarunemotifs/img/tired.png");
            left: calc(55% - 41.5px);
        }

        75%
        {
            background: url("https://monstyrslayr.github.io/deltarunemotifs/img/tired.png");
            left: calc(55% - 41.5px);
            top: calc(50% - 10px);
            opacity: 100%;
        }

        100%
        {
            background: url("https://monstyrslayr.github.io/deltarunemotifs/img/tired.png");
            left: calc(55% - 41.5px);
            top: calc(25% - 10px);
            opacity: 0%;
        }
    }

    @keyframes awakeEffect
    {
        0%
        {
            background: url("https://monstyrslayr.github.io/deltarunemotifs/img/awake.png");
            left: calc(25% - 41.5px);
            top: calc(50% - 10px);
            opacity: 100%;
            animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
        }

        40%
        {
            background: url("https://monstyrslayr.github.io/deltarunemotifs/img/awake.png");
            left: calc(55% - 41.5px);
        }

        75%
        {
            background: url("https://monstyrslayr.github.io/deltarunemotifs/img/awake.png");
            left: calc(55% - 41.5px);
            top: calc(50% - 10px);
            opacity: 100%;
        }

        100%
        {
            background: url("https://monstyrslayr.github.io/deltarunemotifs/img/awake.png");
            left: calc(55% - 41.5px);
            top: calc(25% - 10px);
            opacity: 0%;
        }
    }
}