html {
    height: 200vh;
}

body {
    background-color: var(--primary-color);
    height: 100%;
    top: 0;
}


.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50%;
    gap: 5vw;
    padding: 0 2vw;
}

.hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-container h1 {
    font-size: clamp(24px, 5vw, 40px);
}

.hero-container h2 {
      font-size: clamp(20px, 3vw, 26px);  
      text-align: center;
}

.img-container {
    width: clamp(160px, 14vw, 700px);
    height: clamp(160px, 14vw, 700px);
    border-radius: 100%;
    background-color: rgb(237, 237, 237);
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--text-color) 1.5px solid;
}

.img-container img {
    padding-left: 10px;
    padding-top: 10px;
    height: 120%;
}

@keyframes jumping-chevron {
    0% {
        top: 85%;
    }
    50% {
        top: 88%;
    }
    100% {
        top: 85%;
    }
}

.down-chevron {
    font-size: 2rem;
    position: absolute;
    top: 85%;
    font-weight: 900;
    animation: jumping-chevron 1s ease-out infinite;
    pointer-events: auto;
}

.down-chevron a {
    color: var(--text-color);
    text-decoration: none;
}



/* Second page */

.second-page {
    height: 50%;
}


.text-container {
    height: calc(100% - 8rem);
    padding: 4rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.column {
    flex: 1 0;
    background-color: rgba(255, 255, 255, 0.5);
}

:root[data-theme="dark"] .column {
    background-color: rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .column {
        background-color: rgba(0, 0, 0, 0.5);
    }
}

.right.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.left.column {
    text-align: end;
}

.intro::after {
    content: " →";
    font-weight: 700;
}

div.socials a {
    text-decoration: none;
}

.socials {
    pointer-events: auto;
}

.socials svg path {
    fill: var(--text-color);
    transition: fill 0.2s ease;
}

.socials a:hover svg path {
    fill: #666;
}


@media (max-width: 720px) {
    .container {
        flex-direction: column;
    }

    .hero-container {
        padding: 1rem;
    }

    h1, h2 {
        text-align: center;
    }

    .text-container {
        flex-direction: column;
        gap: 4rem;
    }

    .column {
        flex: 0 0;
    }

    .intro::after {
        content: " ↓";
    }
}