/* General stuff */
@font-face {
    font-family: 'cathalia';
    src: url('/assets/fonts/Cathalia.ttf');
}

/* User Preferences, body used for higher specificity (override) */
@media (prefers-color-scheme: dark) {
    :root body {
        /* TODO */
    }
}

@media (prefers-reduced-motion: reduce) {
    body #pattern {
        animation: none;
    }
}

body {
    display: flex;
    flex-direction: column;

    width: 100%;

    font-size: 1.2rem;
    font-family: 'Roboto';

    overflow-x: hidden;

    background-color: var(--background-base);

    color: var(--foreground-color);
}

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

/* Standard stuff */
#pattern-container {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: fixed;
    z-index: -99;
}

#pattern {
    background-color: var(--background-accent);
    mask-size: 10%;

    left: 50%;
    top: 0px;
    translate: -50% 0%;
    position: absolute;
    height: 100%;
    width: 100%;
    min-width: 1200px;

    z-index: -99;

    animation: pan 180s linear infinite;
}

@keyframes pan {
    0% {
        mask-position: 0% 0%;
    }

    100% {
        mask-position: 200% 100%;
    }
}

#scroll-notice {
    background-color: white;
    color: #080808;
    position: fixed;
    bottom: 0;
    width: 100%;
    transition: 250ms;
    filter: drop-shadow(0px -1px 2px #080808);
    
    text-align: center;
    padding-bottom: 1vh;
}

#scroll-notice:before {
    background: linear-gradient(-45deg, white 16px, transparent 0),
        linear-gradient(45deg, white 16px, transparent 0);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 24px 24px;
    content: '';
    display: block;

    height: 16px;
    width: 200%;

    animation: scroll 120s linear infinite;

    position: relative;
    bottom: 16px;
    left: 0;
}

@keyframes scroll {
    0% {
        translate: -50% 0%;
    }

    100% {
        translate: 0% 0%;
    }
}

#footer {
    background-color: var(--foreground-base);
    color: var(--foreground-color);
    width: 100%;
    margin-top: calc(1vw + 16px);
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 2vw;
}

#footer:before {
    background: linear-gradient(-45deg, var(--foreground-base) 16px, transparent 0),
        linear-gradient(45deg, var(--foreground-base) 16px, transparent 0);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 24px 24px;
    content: '';
    display: block;

    height: 16px;
    width: 100%;

    position: relative;
    bottom: calc(1vw + 16px);
    left: 0;
}

.gallery {
    text-align: center;

    img {
        border-radius: 12px;
        max-width: 40vw;
        max-height: 30vh;
        margin: 1vw;
    }

}

/* Styles */
.drawn-border, button, .tt .tt-text {
    outline: none;
    border-top-left-radius: 225px 15px;
    border-top-right-radius: 15px 225px;
    border-bottom-right-radius: 225px 15px;
    border-bottom-left-radius: 15px 255px;
    border-style: solid;
    border-width: 7px;
    border-color: var(--foreground-accent);
}

.drawn-border:disabled, button:disabled {
    border-style: dashed;
    border-width: 5px;
    border-color: var(--foreground-disabled);
}

.invisible {
    transition: 250ms;
    opacity: 0;
    pointer-events: none;
}

.tt {
    position: relative;
    display: inline-block;
    text-decoration: underline dotted 2px;
    cursor: help;

    .tt-text {
        width: 30vw;
        background-color: var(--foreground-base);
        text-align: center;
        padding: 5px;

        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -15vw;

        visibility: hidden;
        opacity: 0;
        transition: opacity 0.25s;
    }

    .tt-text::after {
        content: "";
        position: absolute;
        top: 100%;
        margin-top: 7px;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: var(--foreground-accent) transparent transparent transparent;
    }
}

.tt:hover .tt-text {
    opacity: 1;
    visibility: visible;
}

footnote {
    font-size: 0.9rem;
    font-style: italic;
}

footnote::before {
    content: '\a';
    white-space: pre;
}

/* Containers */
.entries {
    width: 100%;
}

#title {
    float: right;
    margin-right: 10vw;
    font-size: 2rem;
    font-family: 'cathalia';

    a {
        color: var(--foreground-color);
        text-decoration: none;
    }
}

.entry {
    background-color: var(--foreground-base);
    width: 60vw;
    padding: 3vh;
    margin: 1vw;

    .media-container {
        height: fit-content;
    }
}

.entry:nth-child(odd) {
    margin-left: 0;
    border-radius: 0px 20px 20px 0px;
    text-align: left;
    float: left;

    .media-container {
        float: left;
        padding-right: 1vw;
        margin-right: 1vw;
        border-right: 1px solid #080808;
    }
}

.entry:nth-child(even) {
    margin-right: 0;
    border-radius: 20px 0px 0px 20px;
    text-align: right;
    float: right;

    .media-container {
        float: right;
        padding-left: 1vw;
        margin-left: 1vw;
        border-left: 1px solid #080808;
    }
}

.media-container {
    text-align: center;
    color: var(--foreground-color-subtle);

    img {
        max-width: 100%;
        max-height: 30vh;
    }

    video {
        max-width: 100%;
        max-height: 30vh;
    }
}


/* HTML Elements */
a {
    color: var(--foreground-color-bright);
    text-decoration: underline dotted var(--foreground-color-bright) 2px;
}

button {
    padding: 0.5rem;
    background-color: var(--foreground-secondary);
    color: var(--foreground-color);
    transition: 100ms;
}

button:hover {
    background-color: var(--foreground-tertiary);
}

/**********/
/* MOBILE */
/**********/
@media screen and (max-aspect-ratio: 3/2) {

    .wide-only {
        display: none;
    }

    .entry {
        width: 80vw;
        .media-container {
            float: top;
        }
    }

    /* Fucking hate using !important here but I see no other way :sob: */
    .entry .media-container {
        float: none !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        border-right: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        border-left: none !important;

        vertical-align: top;
        padding-bottom: 1vh;
        margin-bottom: 1vh;
        border-bottom: 1px solid #080808;
    }

}

@media screen and (min-aspect-ratio: 3/2) {
    .tall-only {
        display: none;
    }
}