:root {
    --fira-code: 'Fira Code', sans-serif;
    --montserrat: 'Montserrat', sans-serif;
    --background: #F0F0F4;
    --primary: rgb(24, 24, 24);
    --primary-light: rgb(31,31,31);
    --accent-color: rgb(99, 94, 154);
    --accent-blue: rgb(156, 221, 254);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 1rem;
}

body {
    margin: 0;
    background: var(--background);
    font-family: var(--montserrat);
}

p {
    font-size: clamp(1rem, 1vw + .25rem, 1.3125rem);
}

h1, h2 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

.container {
    width: 90%;
    max-width: 1128px;
    margin: 0 auto;
}

.row {
    display: flex;
    justify-content: space-between;
}

.col {
    width: 100%;
}

.header__container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: .5em;
}

.nav {
    background-color: var(--background);
    position: absolute;
    top: 100%;
    width: 100%;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 1000ms ease-in-out;
}

.nav-toggle {
    display: none;
}

.nav-toggle-label {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.nav-burger,
.nav-burger::before,
.nav-burger::after {
    background-color: var(--primary);
    width: 2.5em;
    height: .4em;
}

.nav-burger {
    position: relative;
}

.nav-burger::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 0;
}

.nav-burger::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
}

.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-block: 1em;
    margin: 0 auto;
    text-align: center;
}

.nav-list li + li {
    margin-top: 1em;
}

.nav-link {
    text-decoration: none;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

.nav-link:active,
.nav-link:hover {
    color: var(--accent-color);
}
.nav-link.active {
    color: var(--accent-color);
}

.nav-toggle:checked ~ .nav {
    transform: scale(1, 1);
}

.nav-toggle:checked ~ .nav .nav-link {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
}

.nav-logo {
    height: 2em;
    width: 2em;
    display: grid;
    place-content: center;

    background: var(--primary);
    color: #fff;
    font-size: 1.5em;
    font-weight: 900;
    border-radius: .2em;
}

.intro {
    padding-block: 3em;
}

.intro__container {
    border-radius: 1em;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    max-width: 800px;

    color: #fff;
    background-color: rgb(31, 31, 31);
}

.intro__header {
    padding: .75em;
    background-color: var(--primary);
    border-bottom: .3px solid rgb(43,43,43);
}

.intro__header-menu,
.intro__header-menu::before,
.intro__header-menu::after {
    display: block;
    border-radius: 50px;
    height: .9rem;
    width: .9rem;
}

.intro__header-menu {
    position: relative;
    background: rgb(255, 188, 47);
    margin-left: 1.4em;
}

.intro__header-menu::before {
    content: '';
    position: absolute;
    left: -1.2em;
    background: rgb(255, 94, 88);
}

.intro__header-menu::after {
    content: '';
    position: absolute;
    left: 1.2em;
    background: rgb(43, 200, 64);
}


.intro__content {
    padding: 1.5em;
}

.intro__title {
    position: relative;
    font-family: var(--fira-code);
    font-size: clamp(2.25rem, 3vw + 1rem, 4.5rem);
    font-weight: 300;
    text-align: center;
    line-height: 1.1;
    width: max-content;
    color: #fff;
}

.intro__title::before,
.intro__title::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.intro__title::before {
    background: rgb(31, 31, 31);
    animation: typewriter 2s steps(11) 1s forwards;
}

.intro__title::after {
    width: 0.125em;
    background: #fff;
    animation: 
        typewriter 2s steps(11) 1s forwards,
        blink 1s steps(5, start) infinite;
}

.intro__subtitle {
    color: var(--accent-blue);

    opacity: 0;
    transform: translateY(3rem);
    animation-name: fadeInUp;
    animation-duration: 2.5s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 3.5s;

    font-family: var(--fira-code);
}

/* Desktop */
@media (min-width: 750px) {
    .container {
        width: 80%;
    }
    .nav-toggle-label {
        display: none;
    }

    .nav {
        all: unset;
        position: relative;
    }

    .nav-list {
        display: flex;
        gap: 1.5em;
        padding-block: 0;
    }

    .nav-list li + li {
        margin-top: 0;
    }

    .nav-link {
        opacity: 1;
    }
}

/* Animations */
@keyframes typewriter {
    to {
        left: 100%;
    }
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}