: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);
}

#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;
    /* margin: 30vh 100px 15vh 100px; */

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

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

            margin-bottom: -0.1em;

            & img {
                height: 2rem;

                opacity: 0.5;
            }

            & h3 {
                font-size: 1.3rem;

                margin-left: 0.5ch;

                font-style: italic;
                opacity: 0.5;
            }
        }
    }
}

#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);

    & #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: 1.5ch;
            margin-top: 0.3em;

            &>div {
                margin-bottom: 0.3em;

                & img {
                    height: 3rem;
                }

                & h3 {
                    font-size: 2rem;

                    margin-left: 0.5ch;
                }
            }
        }
    }

    #sns {
        margin-bottom: 10em;

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

            margin: 0 3ch;
        }
    }

    #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);
    }
}