@import url("./fonts.css");

:root {
    --color-1: rgb(255 255 255);
    --color-2: rgb(206 222 216);
    --color-3: rgb(127 170 155);
    --color-4: rgb(78 139 119);
    --color-5: rgb(15 57 44);
}

h1, h2, h3, h4, h5, h6, p {
    padding: 0;
    margin: 0;
}

html, body {
    background-color: var(--color-5);
    color: var(--color-2);
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

button {
    background-color: transparent;
    cursor: pointer;
    border: none;
}

* {
    font-family: "roboto", Arial, Helvetica, sans-serif;
}

h1 {
    font-family: "corinthia", "Times New Roman", Times, serif;
    font-size: 5rem;
}

h2 {
    font-family: "dm-serif-text", "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 2rem;
}

h1, h2 {
    color: var(--color-1);
}

h3 {
    margin-top: 0.75rem;
}

h3, h4 {
    color: var(--color-2);
}

h5 {
    font-family: "dm-serif-text", "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 1rem;
}

section {
    height: 100vh;
    min-height: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.split-view {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

@media (max-width: 65rem) {
    section {
        min-height: 50rem;
    }

    .split-view {
        flex-direction: column;
    }
}

#project-list {
    position: relative;
    display: flex;
    row-gap: 2rem;
    
    .project {
        background-color: var(--color-4);
        padding: 0.5rem 0.5rem 0 0.5rem;
        border-radius: 1rem;
        position: relative;

        .project-image {
            img, .project-overlay {
                border-radius: 1rem;
                display: block;
                width: 15rem;
                height: 15rem;
            }

            .project-overlay {
                transition: opacity 200ms ease;

                background-color: rgba(0, 0, 0, 0.9);
                font-size: 0.8rem;
                box-sizing: border-box;
                position: absolute;
                padding: 0.75rem;
                display: block;
                left: 0.5rem;
                top: 0.5rem;
                opacity: 0;
            }

            &:hover .project-overlay {
                opacity: 1;
            }
        }

        .project-title {
            display: flex;
            justify-content: space-between;
            padding: 0 0.5rem;
            box-sizing: border-box;
            height: 2.5rem;
            align-items: center;

            button {
                transition: background-color 200ms ease;
                
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: content-box;
                border-radius: 0.25rem;
                height: 1.25rem;
                padding: 0.2rem;

                &:hover {
                    background-color: rgba(0, 0, 0, 0.2);
                }

                &:active {
                    background-color: rgba(0, 0, 0, 0.4);
                }

                img {
                    height: 1.25rem;
                    width: auto;
                }
            }
        }
    }
}

#home {
    #intro, #demo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        height: 20rem;
        width: 20rem;
    }

    #intro {
        h2 {
            margin-top: -1.5rem;
        }
    }

    #demo {
        align-items: center;
        position: relative;
        
        &::before {
            content: "";
            background-color: var(--color-4);
            display: block;
            position: absolute;
            border-radius: 1rem;
            transform: translate(-50%, -50%) rotate(45deg);
            height: calc(20rem / sqrt(2));
            width: calc(20rem / sqrt(2));
            left: 50%;
            top: 50%;
        }

        > * {
            z-index: 1;
        }
    }
}

nav {
    position: fixed;
    transform: translateX(-50%);
    user-select: none;
    display: flex;
    column-gap: 1rem;
    z-index: 10;
    bottom: 5%;
    left: 50%;

    > * {
        background-color: var(--color-1);
        color: var(--color-5);
        border-radius: 1rem;
        padding: 0.5rem 1rem;
        cursor: pointer;
    }

    #scroll-to-button {
        box-shadow: 0 0 1rem 0.2rem rgba(0, 0, 0, 0.5);
        border: none;

        > span {
            font-family: "dm-serif-text", "Times New Roman", Times, serif;
            font-style: italic;
            font-size: 1.1rem;
            position: relative;
            z-index: 1;
        }

        &.arrow-up::before, &.arrow-down::before {
            content: "";
            transition: ease 0.4s;
            background-color: var(--color-1);
            transform: translate(-50%, -50%) rotate(45deg);
            border-radius: 0.2rem;
            position: absolute;
            display: block;
            height: 1rem;
            width: 1rem;
            left: 50%;
            top: 50%;
        }

        &.arrow-up::before {
            top: 5%;
        }

        &.arrow-down::before {
            top: 95%;
        }
    }
}