:root {
    --background: #000;
    --border-radius: 1.2rem;

    --tag-border: #333;
    --tag-primary: #ddd;
    --tag-background: #222;

    --project-tag-border: #444;
    --project-tag-background: #444;

    --blur-amount: 20px;
}

html,
head,
body,
h1,
h2,
h3,
h4,
h5,
h6,
input,
a,
textarea,
th,
li {
    font-family: 'IBM Plex Mono' !important;
}

h1 {
    /* mobile */
    /* font-size: 50px; */
    font-size: 2rem;

    text-underline-offset: 8px;
}

a {
    color: var(--primary);
}

#project-view {
    position: fixed;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 100;

    width: 100vw;
    height: 100vh;

    top: 0;
    left: 0;

    transition-duration: 0.3s;
    opacity: 0;
    pointer-events: none;

    overflow-y: scroll;
    overflow-x: hidden;

    &[aria-label='open'] {
        background: #000d;
        backdrop-filter: blur(10px);
        opacity: 1;

        pointer-events: all;
    }

    & #exit-button {
        width: 3ch;
        height: 3ch;
        padding: 1ch;

        position: absolute;

        top: 5ch;
        right: 5ch;

        cursor: pointer;
        transition-duration: 0.3s;

        z-index: 200;

        &:hover {
            transform: scale(1.1);
        }
    }

    & #content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;

        max-width: 80vw;
        max-height: 80vh;
    }

    & #carousel {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;

        & #carousel-track {
            width: 60vw;

            & #carousel-inner {
                display: flex;
                transition: transform 0.5s ease-in-out;

                /* background: blue; */

                & img {
                    box-sizing: border-box;

                    flex-shrink: 0;

                    width: 60vw;
                    max-height: 60vh;

                    margin-right: 3ch;

                    object-fit: contain;
                    border-radius: var(--border-radius);
                    border: 2px solid var(--tag-border);

                    transition-duration: 0.3s;
                }
            }
        }

        & #prev-button,
        & #next-button {
            width: 3rem;
            height: 3rem;
            cursor: pointer;
            transition-duration: 0.3s;
            opacity: 0.7;

            z-index: 110;

            &:hover {
                transform: scale(1.1);
            }
        }
    }

    & #description {
        text-align: center;
        width: 60vw;

        & #header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            min-width: 100%;

            &>div:first-of-type {
                display: flex;
                align-items: flex-start;
                flex-direction: column;

                & h2 {
                    font-size: 2rem;
                }

                & h3 {
                    opacity: 0.5;
                    font-style: italic;
                    font-size: 1.5rem;
                }
            }

            & #project-links {
                display: flex;
                flex-direction: row;
                gap: 1ch;

                & a {
                    & img {
                        display: block;

                        height: 3em;
                        width: 3em;

                        margin-left: 1ch;

                        border-radius: 1000px;

                        border-style: solid;
                        border-width: 1.5px;
                        border-color: var(--tag-border);

                        transition-duration: 0.3s;

                        &:hover {
                            transform: translateY(-0.2em);
                        }
                    }
                }
            }
        }

        & #project-writeup {
            margin-top: 1em;
            margin-bottom: 4em;

            font-family: 'IBM Plex Mono' !important;
            font-size: 1.5rem;
            color: #ddd;

            text-align: justify;

            white-space: pre-wrap;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }
    }
}


#scroll-button {
    position: fixed;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #151515;

    border-style: solid;
    border-color: #222;
    border-width: 2px;

    bottom: 5em;
    /* right: 3ch; */

    left: 50%;
    transform: translateX(-2em);

    border-radius: 1000px;

    & img {
        display: block;

        height: 2em;
        width: 2em;

        padding: 1em;

        opacity: 0.8;
    }
}

#introduction {
    /* mobile */
    margin: 30vh 20vw 15vh 20vw;

    /* background: blue; */
    /* margin: 30vh 100px 15vh 100px; */

    & #tldr {
        /* background: red; */
        /* overflow: hidden; */

        margin-left: 1.5ch;
        /* margin-left: 0.5ch !important; */
        margin-top: 0.5em;

        &>div {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;

            margin-bottom: -0.05em;

            & img {
                height: 2rem;

                opacity: 0.5;
            }

            & h3,
            & a {
                font-size: 1.3rem;

                margin-left: 1ch;

                font-style: italic;
                opacity: 0.5;

                min-width: fit-content;

                &:first-of-type {
                    margin-left: 0.8ch;
                }

                &:not(:first-of-type) {
                    opacity: 0.35;
                }
            }

            & a {
                color: white;
                opacity: 0.35;

                text-underline-offset: 0.2em;

                transition-duration: 0.3s;

                &:hover {
                    opacity: 0.7;
                }
            }
        }
    }
}

#sns {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: auto;
    /* mobile */
    margin-bottom: 10em;

    img {
        /* mobile */
        height: 4em;
        width: 4em;
        border-radius: 1000px;

        /* mobile */
        margin: 0 2ch;

        transition-duration: 0.3s;

        /* &:hover {
            transform: scale(1.1);
        } */
    }
}

#projects {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;

    /* mobile */
    width: 60%;
    margin: auto;

    &>h3 {
        font-size: 0.9rem;
        font-style: italic;

        opacity: 0.5;

        text-align: center;

        margin-top: 1em;
        margin-bottom: 2em;
    }

    & #query {
        margin-bottom: 1.5em;

        width: 100%;

        &>input {
            border: none;
            border-collapse: none;

            background: #151515;

            font-size: 1.5rem;

            height: 1em;
            width: calc(100% - 4ch);

            padding: 0.5em 2ch;

            border-radius: var(--border-radius);

            border-style: solid;
            border-width: 1.5px;
            border-color: #252525;

            color: #ddd;

            &::placeholder {
                font-style: italic;
            }

            &:focus {
                outline: 0;
            }
        }

        & #filter-toggle {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            user-select: none;
            -webkit-user-select: none;

            margin-top: 1rem;

            cursor: pointer;
            opacity: 0.7;
            transition-duration: 0.3s;

            & h3 {
                font-size: 1.2rem;
            }

            & img {
                height: 0.8em;
                width: 0.8em;

                margin-left: 1ch;

                transform: rotateZ(-90deg);

                transition-duration: 0.3s;
            }

            /* &:hover {
                opacity: 0.9;
            } */
        }

        &:has(#filter[data-open="true"]) {
            #filter-toggle img {
                transform: rotateZ(0deg);
            }
        }

        & #filter {
            &[data-open="false"] {
                display: none;
            }

            &>h3 {
                font-size: 0.95rem;
                font-style: italic;

                opacity: 0.6;

                margin-bottom: 0.2em;
            }
        }

        & #tags {
            display: flexbox;

            justify-content: flex-start;
            align-items: flex-start;

            &:first-of-type {
                margin-bottom: 0.5em;

                & .tag {
                    background: var(--tag-border);
                }
            }
        }
    }

    & #container {
        display: grid;

        grid-template-columns: auto auto;

        gap: 2em;

        margin-top: 2em;
    }
}

.tag,
.project-tag {
    overflow: hidden;
    display: inline-block;

    position: relative;

    border-style: solid;
    border-width: 1.5px;
    border-color: var(--tag-border);

    width: fit-content;
    padding: 0.2em 1.5ch;

    margin-right: 0.8ch;
    margin-top: 0.2em;

    border-radius: var(--border-radius);

    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;

    transition-duration: 0.1s;
    /* transition-timing-function: ease-out; */

    & h2 {
        font-size: 0.9rem;
        font-weight: 500;

        color: var(--tag-primary);
    }

    /* &:hover {
        background: var(--tag-background);
    } */

    &>div {
        position: absolute;
        background: #222;

        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 100%;

        top: 0;
        left: 0;

        opacity: 0;

        transition-duration: 0.2s;
        transition-timing-function: ease-out;

        & img {
            height: 0.8em;

            user-select: none;
            -webkit-user-select: none;
        }
    }

    /* &[selected]:hover {
        &>div {
            opacity: 1;
        }
    } */
}

.project-tag {
    margin: 0;
    margin-right: 1ch;
    font-size: 0.8rem;

    border-color: var(--project-tag-border);
    background: var(--tag-background);

    cursor: auto;
}

.project {
    display: block;

    overflow: hidden;
    position: relative;

    height: 28em;
    width: 30em;

    border-radius: var(--border-radius);

    background: black;

    border-style: solid;
    border-width: 1.5px;
    border-color: var(--tag-border);

    cursor: pointer;

    & #background {
        width: auto;
        height: 100%;

        background-repeat: repeat-y;
        background-position: top center;
        background-size: contain;
    }

    /* & #background {
        position: absolute;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        flex-direction: column;

        top: 0;
        left: 0;

        height: 100%;
        width: 100%;

        background: black;

        & #gradient {
            position: absolute;

            bottom: 0;

            flex: 3;
            width: 100%;
            height: 45%;

            background: linear-gradient(#0000, #000f, #000f, #000f, #000f, #000f);
            background: red;
    } */

    & #details {
        position: absolute;

        overflow: hidden;

        display: flex;
        justify-content: flex-end;
        align-items: flex-start;

        flex-direction: column;

        padding: 1em 1.5em;

        width: calc(100% - 3em);

        bottom: 0;
        left: 0;

        background: #151515bb;

        backdrop-filter: blur(var(--blur-amount));
        -webkit-backdrop-filter: blur(var(--blur-amount));

        border-style: solid;
        border-width: 0;
        border-top-width: 2px;
        border-color: var(--tag-border);

        & #header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            flex-direction: row;

            width: 100%;

            margin-bottom: 1ch;

            & #title {
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-direction: column;

                & h2 {
                    font-size: 1.8rem;
                }

                & h4 {
                    font-size: 0.9rem;

                    opacity: 0.6;
                }
            }

            & #links {
                display: flex;
                justify-content: center;
                align-items: center;

                height: 100%;

                & img {
                    display: block;

                    height: 2em;
                    width: 2em;

                    margin-left: 1ch;

                    border-radius: 1000px;

                    border-style: solid;
                    border-width: 1.5px;
                    border-color: var(--tag-border);

                    transition-duration: 0.3s;

                    &:hover {
                        transform: translateY(-0.2em);
                    }
                }
            }
        }

        & #description {
            margin-bottom: 2.5ch;

            font-size: 0.9rem;
        }
    }
}

#footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    margin-top: 10em;

    margin-bottom: 10em;

    & h3 {
        font-style: italic;
        font-size: 1.3rem;

        text-align: center;

        opacity: 0.3;

        &:has(a):first-of-type {
            opacity: 1;

            margin-bottom: 2ch;

            & a {
                color: var(--primary);

                font-style: italic;
                font-size: 1.6rem;

                text-underline-offset: 0.15em;
            }
        }

        & a {
            color: white;
            text-underline-offset: 0.15em;
        }
    }

    & h4 {
        font-style: italic;
        font-size: 1.3rem;

        opacity: 1;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --border-radius: 3rem;
    }

    #introduction {
        margin: 30vh 10vw 15vh 10vw;

        font-size: 2rem;

        & h1 {
            font-size: 3rem;
        }

        & #tldr {
            margin-left: 0.5ch;
            margin-top: 0.3em;

            &>div {
                margin-bottom: 0.3em;

                & img {
                    height: 3rem;
                }

                & h3,
                & a {
                    font-size: 2rem;

                    margin-left: 0.5ch;
                }
            }
        }
    }

    #sns {
        margin-bottom: 10em;

        img {
            height: 7em;
            width: 7em;

            margin: 0 3ch;
        }
    }

    #project-view {
        & #exit-button {
            width: 6ch;
            height: 6ch;

            top: 3ch;
            right: 3ch;
        }

        & #content {
            gap: 2rem;

            max-width: 95vw;
            max-height: 90vh;
        }

        & #carousel {
            width: 90vw;

            margin-top: 5em;

            & #carousel-track {
                width: 90vw;
                overflow-x: scroll;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;

                & #carousel-inner {
                    & img {
                        width: 90vw;
                        max-height: 60vh;

                        margin-right: 2ch;

                        scroll-snap-align: center;

                        filter: brightness(1) !important;
                    }
                }
            }

            & #prev-button,
            & #next-button {
                display: none;
            }
        }

        & #description {
            width: 85vw;

            & #header {
                flex-direction: column;
                align-items: flex-start;
                gap: 2rem;

                &>div:first-of-type {
                    & h2 {
                        font-size: 3.5rem;
                    }

                    & h3 {
                        font-size: 2.5rem;
                    }
                }

                & #project-links {
                    gap: 2ch;

                    & a {
                        & img {
                            height: 5em;
                            width: 5em;

                            margin-left: 0;
                        }
                    }
                }
            }

            & #project-writeup {
                margin-top: 1.5em;
                margin-bottom: 5em;

                font-size: 2.2rem;
            }
        }
    }

    #projects {
        width: calc(80% - 3ch);

        &>h1 {
            font-size: 4rem;
            font-weight: 500;
        }

        &>h3 {
            font-size: 1.8rem;

            margin-top: 1em;
            margin-bottom: 2em;
        }

        & #query {
            margin-bottom: 3em;

            &>input {
                font-size: 3rem;

                height: 1em;
                width: calc(100% - 4ch);

                padding: 0.5em 2ch;
                margin-bottom: 1em;

            }

            & #filter-toggle {
                margin-top: 0rem;

                & h3 {
                    font-size: 2.5rem;
                }

                & img {
                    height: 2em;
                    width: 2em;

                    margin-left: 1ch;
                }
            }

            & #filter {
                &[data-open="false"] {
                    display: none;
                }

                &>h3 {
                    font-size: 2rem;

                    margin-bottom: 0.2em;
                }
            }

            & #tags {
                &:first-of-type {
                    margin-bottom: 0.5em;
                }
            }
        }

        & #container {
            grid-template-columns: auto;

            gap: 2em;

            margin-top: 2em;
        }
    }

    .tag,
    .project-tag {
        border-width: 1.5px;
        border-color: var(--tag-border);

        width: fit-content;
        padding: 0.7rem 3rch;

        margin-right: 2ch;
        margin-top: 0.6em;

        & h2 {
            font-size: 2rem;
            font-weight: 500;
        }

        &>div {
            & img {
                height: 0.8em;
            }
        }
    }

    .project-tag {
        margin-right: 1ch;
        font-size: 1.8rem;
    }

    .project {
        height: 50em;
        width: 45em;

        border-width: 5px;

        & #background {
            height: 70%;

            background-size: cover;

            background-repeat: no-repeat;
        }

        & #details {
            padding: 1em 2em;

            width: calc(100% - 4em);

            border-top-width: 2px;

            & #header {
                margin-bottom: 1ch;

                & #title {
                    & h2 {
                        font-size: 3rem;
                    }

                    & h4 {
                        font-size: 2rem;
                    }
                }

                & #links {
                    & img {
                        height: 4em;
                        width: 4em;

                        margin-left: 1ch;


                        border-width: 1.5px;

                        &:hover {
                            transform: translateY(-0.2em);
                        }
                    }
                }
            }

            & #description {
                margin-bottom: 2rch;

                font-size: 2rem;
            }
        }
    }

    #footer {
        margin-top: 10em;

        margin-bottom: 10em;

        & h3 {
            font-size: 2rem;

            &:has(a):first-of-type {
                margin-bottom: 2ch;

                & a {
                    font-size: 2.3rem;
                }
            }
        }
    }
}

@media (hover: hover) {

    /* @media (hover: hover) and (pointer:fine) { */
    #sns img:hover {
        transform: scale(1.1);
    }

    #projects #query #filter-toggle:hover {
        opacity: 0.9;
    }

    .tag,
    .project-tag {
        &[selected]:hover {
            &>div {
                opacity: 1;
            }
        }

        &:hover {
            background: var(--tag-background);
        }
    }

    .project #details #header #links img:hover {
        transform: translateY(-0.2em);
    }
}