@import "font.css";

:root {
    --color-primary: #00FFB9;
    --color-secondary: #000028;
    --color-white-1: #FFFFFF;
    --color-black-1: #222222;
    --color-black-2: #393939;

    --font-main: 'Inter', sans-serif;
    --font-weight: 400;
    --font-size: ;
    --border-radius: 15px;
    --global-width: 1280px;
    --content-padding: 20px;

    --step--3: clamp(0.651rem, 0.7224rem + -0.0892vi, 0.7023rem);
    --step--2: clamp(0.7813rem, 0.7936rem + -0.0154vi, 0.7901rem);
    --step--1: clamp(0.8889rem, 0.8699rem + 0.0845vi, 0.9375rem);
    --step-0: clamp(1rem, 0.9511rem + 0.2174vi, 1.125rem);
    --step-1: clamp(1.125rem, 1.037rem + 0.3913vi, 1.35rem);
    --step-2: clamp(1.2656rem, 1.127rem + 0.6163vi, 1.62rem);
    --step-3: clamp(1.4238rem, 1.2203rem + 0.9046vi, 1.944rem);
    --step-4: clamp(1.6018rem, 1.3158rem + 1.2713vi, 2.3328rem);
    --step-5: clamp(1.802rem, 1.4118rem + 1.7345vi, 2.7994rem);
    --step-6: clamp(2.0273rem, 1.5061rem + 2.3164vi, 3.3592rem);
    --step-7: clamp(2.2807rem, 1.5958rem + 3.0441vi, 4.0311rem);
    --step-8: clamp(2.5658rem, 1.6769rem + 3.9505vi, 4.8373rem);
    --step-9: clamp(2.8865rem, 1.7446rem + 5.0752vi, 5.8048rem);
    --step-10: clamp(3.2473rem, 1.7923rem + 6.4668vi, 6.9657rem);
}

@keyframes wave {
    0% {
        transform: translate3d(-90px,0,0);
    }
    100% {
        transform: translate3d(85px,0,0);
    }
}

a {
    &:is(:link, :visited) {
        color: var(--color-primary);
        text-decoration: none;
    }

    &:is(:hover, :active, :focus) {
        color: color-mix(in srgb, var(--color-black-2) 55%, var(--color-primary));
    }
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

html, body {
    margin: 0;
    background: var(--color-black-1);
    color: var(--color-white-1);
    font-family: var(--font-main);
    font-weight: var(--font-weight);
    font-size: var(--step-0);
    line-height: 1.7;
    -webkit-hyphens: auto;
    hyphens: auto;
    min-height: 100vh;
}

p {
    margin-block-start: 0.1em;
    margin-block-end: 0.1em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight);
}

.content {
    max-width: var(--global-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    flex-flow: row wrap;
}

.flex-item {
    -webkit-flex: 1 0 auto;
    -moz-flex: 1 0 auto;
    flex: 1 0 auto;
    align-self: auto;
}

.tooltip {
    position: relative;
    display: inline-block;

    .tooltip-text {
        visibility: hidden;
        background-color: var(--color-black-2);
        color: var(--color-white-1);
        text-align: center;
        padding: 0.6rem;
        border-radius: 6px;
        position: absolute;
        z-index: 5;
        width: 260px;
        top: 100%;
        left: 50%;
        margin-left: -60px;
        font-size: 0.7rem;

        &:after {
            content: " ";
            z-index: 5;
            position: absolute;
            bottom: 100%;
            left: 10%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent var(--color-black-2) transparent;
        }
    }

    &:hover .tooltip-text {
        visibility: visible;
    }
}

.waves {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px;

    .waves-parallax > use {
        animation: wave 50s cubic-bezier(.55, .5, .45, .5) infinite;

        &:nth-child(1) {
            animation-delay: -2s;
            animation-duration: 28s;
        }
        &:nth-child(2) {
            animation-delay: -3s;
            animation-duration: 40s;
        }
        &:nth-child(3) {
            animation-delay: -4s;
            animation-duration: 55s;
        }
        &:nth-child(4) {
            animation-delay: -5s;
            animation-duration: 67s;
        }
    }
}

main {
    /*display: flex;*/
    /*align-items: center;*/
    /*min-height: 100vh;*/
    margin-top: 3rem;

    .logo {
        * {
            font-size: var(--step-3);

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

        span > span {
            transform: rotate(-11deg);
            display: inline-block;
        }
    }

    .skills {
        height: 235px;
        overflow-x: hidden;
        position: relative;
        transition: all 0.2s linear;

        .toggle-gradient {
            height: 50%;
            position: absolute;
            width: 100%;
            bottom: 0;
            background: linear-gradient(0deg, var(--color-black-1), transparent);
        }

        &:hover {
            height: 385px;

            .toggle-gradient {
                display: none;
            }
        }
    }

    .projects {

        .project-item {
            font-weight: 300;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 1fr;
            grid-column-gap: 20px;
            grid-row-gap: 20px;

            li {
                position: relative;

                /*&:before {*/
                /*    content: '';*/
                /*    width: calc(100% - 60px);*/
                /*    height: 1px;*/
                /*    position: absolute;*/
                /*    background-color: var(--color-black-2);*/
                /*    top: 18px;*/
                /*    left: 20px;*/
                /*    z-index: 1;*/
                /*    transition: all 0.2s linear;*/
                /*}*/
            }

            span {
                position: relative;
                z-index: 2;
                background-color: var(--color-black-1);
            }

            .title {
                padding-right: 0.7rem;
            }

            sup {
                color: color-mix(in srgb, var(--color-black-2) 55%, var(--color-primary));
                font-size: var(--step--2);
            }

            .link {
                a {
                    text-decoration: none;
                }
            }
        }
    }

    .drops {
        li {
            position: relative;

            &:before {
                content: '';
                width: calc(100% - 60px);
                height: 1px;
                position: absolute;
                background-color: var(--color-black-2);
                bottom: 15px;
                left: 20px;
                z-index: 1;
                transition: all 0.2s linear;
            }

            a {
                position: relative;
                z-index: 2;
                padding-right: 10px;
                background-color: var(--color-black-1);
            }
        }

        .date {
            font-weight: 200;
            font-size: var(--step--2);
            color: #6b6b6b;
            float: right;
            position: relative;
            z-index: 2;
            background-color: var(--color-black-1);
            padding-left: 10px;
        }
    }
}

footer {
    max-width: var(--global-width);
    margin: 0 auto;
    padding: 0 var(--content-padding) 11rem;

    section {
        margin: 3em auto 0 auto;
        padding: 2em 0 11rem;
        border-top: 1px solid #ffffff17;
    }

    blockquote {
        margin: 1em 0;
        font-style: italic;
    }

    span {
        display: block;
        font-size: .8rem;
        opacity: 0.6;
    }
}

@media (width <= 900px) {
    main {
        .skills {
            height: auto;

            .flex {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(2, 1fr);
                grid-column-gap: 15px;
                grid-row-gap: 0;

                ul {
                    margin: 0;
                }
            }

            &:hover {
                height: auto;
            }
        }
    }
    .toggle-gradient {
        display: none;
    }

    .project-item {
        list-style: none;
        padding: 0;
        text-align: center;

        li {
            margin-bottom: 1em;
            padding: 1em;
            border-bottom: 1px solid #ffffff17;

            sup {
                display: block;
            }
        }
    }

    .drops {
        ul {
            li {
                &:before {
                    display: none;
                }

                .title {
                    background: -webkit-gradient(linear, left top, right top, from(var(--color-primary)), color-stop(80%, var(--color-primary)), to(transparent));
                    background: linear-gradient(to right, var(--color-primary), var(--color-primary) 80%, transparent 100%);
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                    display: -webkit-inline-box;
                    display: -ms-inline-flexbox;
                    display: inline-flex;
                    max-width: 80%;
                    white-space: nowrap;
                    overflow: hidden;
                }

                .date {
                    float: none;
                    font-size: var(--step--3);
                    position: relative;
                    top: -10px;
                    left: -10px;
                }
            }
        }
    }

    footer {
        text-align: center;
    }
}