* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}

body {
    background-color: black;
}

main {
    background-color: whitesmoke;
    width: 100vw;
    height: 100vh;

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

    font-size: 5vw;
}

h1 {
    user-select: none;
    gap: 0;
}

h1 span {
    display: inline-block;
    /* Ensures each span behaves independently */
    transition: transform 0.3s ease-in-out;
    /* Smooth transition for hover */
    transform: translateY(20%);
    /* Moves the hovered span upward */
}

h1 span:hover {
    transform: translateY(10%);
    /* Moves the hovered span upward */
}

.underline-container {
    width: 100%;
    height: 1.5%;

    display: flex;
    justify-content: left;
    margin-left: 50%;
}

#underline {
    width: 50%;
    height: 100%;
    background-color: black;
    animation: UnderlineAnimation 2s forwards;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

@keyframes UnderlineAnimation {
    0% {
        width: 0%;
    }

    100% {
        width: 50%;
    }
}

#description {
    width: 50%;
    font-size: 2vw;
    user-select: none;
    margin-bottom: 3%;
}

.nav-names {
    width: 70%;
    display: flex;
}

.nav-names p {
    width: 50%;
    user-select: none;
    font-size: 1.5vw;
}

.nav-names p:nth-child(1) {
    animation: wave 2s infinite;
}

.nav-names p:nth-child(2) {
    text-align: right;
}

nav {
    width: 70%;
    height: 10%;
    background-color: rgba(0, 0, 0, 0);

    display: flex;
}

.nav-div {
    width: 50%;
    height: 100%;

    display: flex;
    align-items: center;

    gap: 5%;
}

.nav-div img {
    width: 5%;

    position: relative;
}

.languages {
    width: 70%;

    justify-content: left;
    background-color: rgba(255, 192, 203, 0);
}

.links {
    width: 30%;
    background-color: rgba(173, 216, 230, 0);

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

.links a {
    width: 20%;
    height: 100%;

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

.links a img {
    width: 70%;
    transition: 0.3s;
}

.links a img:hover {
    transform: translateY(-10%);
}

@keyframes wave {

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

    50% {
        transform: translateY(-10%);
    }
}

.projects-title {
    position: absolute;
    bottom: 0;
    left: 0;

    font-size: 3vw;
    padding-left: 2%;
    padding-bottom: 1%;

    user-select: none;
}

@keyframes blinking {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.projects-title span {
    animation: blinking 1.5s steps(1, start) infinite;
}