/*
    seba.is-a.dev ©
    https://github.com/ssxbaa ©
    2025 - Present
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {

    --bg-gradient: linear-gradient(90deg, rgba(20, 20, 19, 1) 0%, rgba(31, 31, 31, 1) 50%, rgba(20, 20, 19, 1) 100%);
    --bg-color: rgba(20, 20, 19, 1);
    --text-clr: #fefdfa;
    --neon-clr: rgba(255, 255, 255, 0.5);
    --card-clr: #252525;

}

* {

    padding: 0;
    margin: 0;
    font-family: "Inter", sans-serif;
    color: var(--text-clr);

    scroll-behavior: smooth;

}

header, body, footer {

    background: var(--bg-gradient);

}

/*
    Header CSS
*/

header {

    min-height: 7.5vh;

}

header > nav {

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

    position: fixed;
    top: 0;

    z-index: 1;

    gap: 3em;

    width: 100%;
    min-height: 7.5vh;

    transition: 0.5s ease-in-out;

}

header > nav.scrolled {

    background: var(--bg-gradient);
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.3);
    scale: 1.05;

    transition: 0.25s ease-in-out;

}

nav > div {

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

    gap: 1.5em;

}

nav > div > h2:hover {

    text-shadow: 0 0 10px var(--neon-clr);
    transition: 0.2s ease-in-out;

    cursor: pointer;

}

nav > div > a {

    text-decoration: none;
    position: relative;
    cursor: pointer;

}

nav > div > a::before {

    content: "";
    position: absolute;

    bottom: -2px;
    right: 0;
    width: 0;

    height: 2px;

    background-color: var(--text-clr);
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);;

}

nav > div > a:hover {

    font-weight: 500;

}

nav > div > a:hover::before {

    left: 0;
    right: auto;
    width: 100%;
    
}

/*
    Body CSS
*/

body > section {

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

    padding: 7.5vh 0;
    width: 100%;

}

section > div.section-title {

    flex-direction: column;
    text-align: center;
    line-height: 1.5;

}

body > section#about {

    height: 85vh;
    padding: 0;

}

section#about > div.container {

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

    gap: 1em;


}

div.container > div.text {

    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    width: 20vw;

    text-align: center;

}

div.text > h1 {

    font-size: 45px;
    line-height: 1.5;

}

div.text > p {

    font-size: 22px;
    line-height: 1.4;

}

div.text > p > span#typing, div.text > p > span#age {

    font-weight: 700;

}

div.text > div.buttons {

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

    margin-top: 1.5vh;

    gap: 1em;

}

div.buttons > button.styled {

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

    border: 1px solid var(--text-clr);
    background-color: transparent;

    border-radius: 0.75em;

    font-size: 14px;
    line-height: 14px;

    padding: 0.85em 1.25em;
    
    cursor: pointer;

    transition: 0.25s ease-in-out;

}

div.buttons > button.styled:hover {

    border: 1px solid var(--text-clr);
    background-color: var(--text-clr);

    color: var(--bg-color);
    
    cursor: pointer;

    transform: translateY(-2px);

}

div.container > div.image {

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

    height: 256px;
    width: 256px;

}

div.image > img#pfp {

    width: 100%;

    border: 3px solid var(--text-clr);
    border-radius: 50%;

}

body > section#career {

    flex-direction: column;
    gap: 2.5em;

}

section#career {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7.5vh 0;
    width: 100%;
    gap: 2.5em;

}


section#career > div.timeline {

    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 6vh;
    width: 42.5vw;
    padding: 2em 0;

}

div.timeline > div.line {

    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0.15em;
    background-color: var(--neon-clr);
    transform: translateX(-50%);

}

div.timeline > div.points {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    font-size: 15px;

}

div.points > i {

    text-shadow: 0 0 10px var(--neon-clr);
    cursor: pointer;

}

div.card {

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

    background-color: var(--card-clr);
    border-radius: 1.5em;

    gap: 0.5em;
    padding: 1em;

    text-align: center;

    width: 15vw;
    min-height: 12vh;

    cursor: pointer;
    transition: 0.5s ease-out;

    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.3);

}

div.card:hover {

    transform: translateY(-5px);
    box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.3);
    transition: 0.25s ease-in;

}


div.card.left {

    align-self: flex-start;
    margin-left: 5%;

}

div.card.right {

    align-self: flex-end;
    margin-right: 5%;

}

div.card > div.card-title {

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;

}

div.card > p {

    width: 80%;
    
}

div.card > p {

    width: 80%;

}

section#projects {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7.5vh 0;
    width: 100%;
    gap: 2.5em;

}

section#projects > div.projects-container {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    padding: 2.5vh 1vw;
    width: 42.5vw;

    border-radius: 1.5em;

    flex-wrap: wrap;

    gap: 2em;

}

div.projects-container > div.project-card {

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

    background-color: var(--card-clr);
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);

    max-width: 17.5vw;
    height: 10vh;
    padding: 0.5em 1em;

    border-radius: 1em;
    gap: 0.5em;

    transition: 0.25s ease-out;

    cursor: pointer;

}

div.projects-container > div.project-card:hover {

    transform: translateY(-5px);
    box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.3);
    transition: 0.25s ease-in;

}

div.project-card > div.image {

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

    height: 8vh;
    width: 8vh;

}

div.image > img.icon {

    width: 50px;
    border-radius: 50%;

}

div.project-card > div.text {

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

    text-align: left;
    
}

div.project-card > div.text > h3 {

    font-size: 1em;
    margin: 0;

}

div.project-card > div.text > p {

    font-size: 0.75em;
    margin: 0.3em 0 0;

}

body > section#contact {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7.5vh 0;
    width: 100%;
    gap: 2em;

}

section#contact > div.contacts-container {

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

    padding: 2.5vh 1vw;
    width: 42.5vw;

    border-radius: 1.5em;

    gap: 3em;

    flex-wrap: wrap;

}

div.contacts-container > button.contact {

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

    width: 5vw;
    height: 3vw;

    border-radius: 0.75em;

    background-color: var(--card-clr);
    border: 1px solid var(--text-clr);

    font-size: 25px;

    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.3);

    transition: 0.25s ease-out;

    cursor: pointer;

}

div.contacts-container > button.contact:hover {

    background-color: var(--text-clr);
    transform: translateY(-5px);

    box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.5);

    transition: 0.25s ease-in;
    
}

div.contacts-container > button.contact:hover > i {

    color: var(--card-clr) !important;
    transition: 0.25s ease-in;

}

body > div.notify {

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

    height: 10vh;

    position: fixed;
    transform: translate(-50%, 0);

    left: 50%;
    bottom: 0;

    transition: 0.25s ease-in-out;

    pointer-events: none;

}

div.notify > p#bounce {

    opacity: 0.8;
    margin-bottom: 1em;

}

/*
    Footer CSS
*/

footer {

    min-height: 5vh;

}

footer > div {

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

    gap: 3em;

    width: 100%;
    min-height: 5vh;

    background: var(--bg-gradient);
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.3);

}

/*
    Animations
*/

span#wave {

    display: inline-block;
    animation: wave-animation 2s infinite;
    transform-origin: 70% 70%;

}

span#cursor {

    display: inline-block;
    animation: blink-animation 1s infinite;
    
}

p#bounce {

    text-align: center;
    animation: bounce-animation 1s infinite;

}

.fadeout {

    opacity: 0;
    transition: 0.25s ease-in-out;

}

@keyframes wave-animation {

    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }

}

@keyframes blink-animation {

    0%, 100% { background-color: rgba(255, 255, 255, 0.7); }
    50% { background-color: rgba(255, 255, 255, 0.2); }

}

@keyframes bounce-animation {

    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(5px); }

}

@media screen and (max-width: 550px) {

    header > nav {
        padding: 1em 0;
        flex-direction: column;
        gap: 0.75em;
    }

    body {

        gap: 5vh;

    }

    section > div.section-title {

        flex-direction: column;
        text-align: center;
        line-height: 1.5;

        scale: 0.9;

    }

    section#about > div.container {

        max-height: 85vh;
        flex-direction: column-reverse;

        margin-bottom: 10vh;

    }

    section#about > div.container > div.image {

        scale: 0.8;

    }

    section#about > div.container > div.text {

        width: 100%;

    }


    section#career > div.timeline {

        gap: 2em;
        padding: 1em;
        width: 70%;

    }

    div.timeline > div.line, div.timeline > div.points {

        display: none;

    }

    div.card {

        width: 100%;
        align-self: center !important;

    }

    div.card.left, div.card.right {

        margin: 0;

    }

    section#projects > div.projects-container {

        flex-direction: column;
        width: 100%;

    }

    div.projects-container > div.project-card {

        max-width: unset;
        width: 75vw;

    }

    section#contact > div.contacts-container {

        width: 60%;
        gap: 2em;

    }

    div.contacts-container > button.contact {

        width: 20vw;
        height: 7vh;

    }

}