body {
    font-family: 'PT Mono', monospace;
    font-weight: normal;
    color: white;
    background-color: black;

    section {
        max-width: 1200px;
        margin: 100px auto;

        h1 {
            font-size: clamp(36px, 5vw, 70px);
        }

        h2 {
            width: 100%;
            font-size: clamp(30px, 3vw, 36px);
        }

        h3 {
            font-size: clamp(20px, 3vw, 32px);
            font-weight: normal;
        }

        p {
            font-size: clamp(16px, 3vw, 20px);
        }
    }

    .contact-button {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        padding: 10px;
        font-size: clamp(16px, 3vw, 20px);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 25px;
        text-decoration: none;
        box-sizing: border-box;

        p {
            width: 40px;
            height: 40px;
            margin: 0;
            border-radius: 10px;
            color: black;
            background-color: #D8D8D8;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .gradient {
        background-image: linear-gradient(to right, #0D79F2, #0DF2C9, #E40DF2);
    }

    .gradient-border {
        border: solid 2px transparent;
        border-radius: 100vw;
        background: linear-gradient(black, black) padding-box, linear-gradient(to right, #0D79F2, #0DF2C9, #E40DF2) border-box;
    }

    #hero {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 100px;

        img {
            width: 100%;
            height: 100%;
            max-width: 300px;
        }

        &>div {
            max-width: 750px;
            text-align: center;
        }
    }

    #what-i-do {
        margin-top: 100px;

        div {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;

            .what-i-do-cards {
                max-width: 575px;
                margin-block: 50px;
                padding: 25px;
                border: solid 1px #797979;
                border-radius: 50px;
                box-sizing: border-box;

                h3 {
                    position: absolute;
                    max-width: 400px;
                    margin-top: -75px;
                    padding-inline: 25px;
                    background: black;
                }
            }
        }
    }

    #techstack {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;

        .techstack-card {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;

            div {
                max-width: 720px;
                margin-block: 16px;
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                justify-content: flex-start;
                gap: 30px;

                .techs {
                    width: clamp(160px, 12vw, 220px);
                    margin: 0;
                    padding: 10px;
                    border-radius: 35px;
                    background-color: #D8D8D8;
                    color: black;
                    text-align: center;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 20px;

                    img {
                        max-width: 25px;
                    }
                }
            }
        }
    }

    #numbers {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 50px;

        .bento {
            width: 100%;
            max-width: 550px;
            padding: 20px 50px;
            color: black;
            background-color: #D8D8D8;
            border-radius: 50px;
            box-sizing: border-box;

            h3 {
                font-weight: bold;
            }
        }
    }

    #studio {
        display: flex;
        flex-direction: column;
        align-items: center;
        border: solid 1px #797979;
        border-radius: 50px;

        #studio-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            gap: 50px;

            h2 {
                margin-bottom: 0;
            }

            p {
                margin-top: 0;
            }

            img {
                width: 100%;
                height: 100%;
                max-width: 200px;
            }
        }

        div {
            text-align: center;

            h2 {
                font-size: 50px;
            }
        }

        #studio-link {
            width: 100%;
            margin-block: 25px;
        }
    }

    #contact-me {
        &>div {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            gap: 50px;
            margin-block: 50px;
        }
    }
}