:root {
    --red: #E3646E;
    --purple: #BB72E9;
    --blue: #3996DB;
    --green: #82BC4F;
    --yellow: #EABD5F;

    --gray-100: #0D0E11;
    --gray-200: #16181D;
    --gray-300: #292C34;
    --gray-400: #878EA1;
    --gray-500: #C0C4CE;
    --gray-600: #E2E4E9;

    --title-lg: 700 56px/120% "Asap", sans-serif;
    --title-md: 700 24px/120% "Asap", sans-serif;
    --title-sm: 700 16px/120% "Asap", sans-serif;

    --subtitle: 400 20px/120% "Inconsolata", sans-serif;

    --text-md: 400 16px/120% "Maven Pro", sans-serif;
    --text-sm: 400 14px/120% "Maven Pro", sans-serif;
}

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

/* Remove default list styles */
ul,
ol {
    list-style: none;
}

/* Remove anchor underline and inherit colors */
a {
    text-decoration: none;
    color: inherit;
}

/* Improve typography */
body {
    -webkit-font-smoothing: antialiased;
}

/* Set up root font size for REM scaling */
html {
    font-size: 16px;
}

/* Ensure images, videos, and embeds don’t overflow */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

    .default-header {
        text-align: center;
        margin-bottom: 56px;

        p {
            font: var(--subtitle);
            color: var(--red);
        }

        h2 {
            font: var(--title-md);
            color: var(--gray-600);
        }
    }
}


#intro {
    background-image: url("assets/images/Background_Intro.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding-block: 120px 57px;

    header {
        display: flex;
        align-items: center;
        flex-direction: column;

        >div {
            margin-bottom: 56px;
            position: relative;

            figure {
                img {
                    width: 86px;
                    border-radius: 999px;
                    aspect-ratio: 1/1;

                    border: 4px solid transparent;
                    box-shadow: 0 0 0 2px var(--red);

                    box-sizing: content-box;
                }
            }

            >img {
                position: absolute;
                bottom: 0;
                right: -10px;
            }
        }

        p:first-of-type {
            font: var(--subtitle);
            color: var(--gray-500);
            margin-bottom: 8px;

            span {
                color: var(--red);
            }
        }

        h1 {
            font: var(--title-lg);
            color: var(--gray-600);
            margin-bottom: 20px;
        }

        p:last-of-type {
            font: var(--text-sm);
            color: var(--gray-400);
            max-width: 680px;
            margin-bottom: 80px;
        }
    }

    .carousel {
        width: 753px;
        overflow: hidden;
        position: relative;

        ul {
            display: flex;
            gap: 16px;
            align-items: center;
            margin-bottom: 94px;
            animation: scroll 15s linear infinite;
            animation-delay: 1s;
            overflow: hidden;
            width: max-content;

            li {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 16px;
                font: var(--text-md);
                background-color: var(--gray-300);
                border-radius: 999px;

                img {
                    width: 24px;
                    aspect-ratio: 1/1;
                }

                span {
                    font: var(--text-md);
                    color: var(--gray-500);
                }
            }
        }

        @media(max-width: 768px) {
            width: 95vw;
        }
    }

    >img {
        width: 32px;
    }
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

#projects {
    background-color: var(--gray-200);
    padding: 72px 120px 144px;

    ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1366px;

        li {
            display: flex;
            flex-direction: column;
            background: var(--gray-300);
            border-radius: 12px;
            padding: 12px;
            border: 1.5px solid transparent;
            transition: border 0.1s ease-in-out;

            img {
                border-radius: 8px;
            }

            span {
                display: block;
                margin-block: 24px 8px;
                font: var(--title-sm);
                color: var(--gray-600);
            }

            p {
                font: var(--text-sm);
                color: var(--gray-500);
            }

            &:hover {
                cursor: pointer;
                border-color: var(--gray-400);
            }
        }

        @media(max-width: 992px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media(max-width: 500px) {
            grid-template-columns: 1fr;
        }
    }
}

#services {
    background-color: var(--gray-100);
    padding: 88px 120px 120px;

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
        max-width: 890px;

        li {
            display: flex;
            flex-direction: column;
            padding: 20px;
            border-radius: 12px;
            border: 2px solid var(--gray-200);
            width: 280px;

            img {
                width: 48px;
                height: 48px;
            }

            span {
                display: block;
                margin-block: 20px 8px;
                font: var(--title-sm);
                color: var(--gray-600);
            }

            p {
                font: var(--text-sm);
                color: var(--gray-500);
            }
        }
    }
}

#contact {
    background-image: url("assets/images/Background_Contacts.png");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;

    padding: 128px 120px 200px;

    header {
        text-align: center;

        span {
            color: var(--purple);
            font: var(--subtitle);
        }

        h2 {
            margin-block: 8px;
            font: var(--title-md);
            color: var(--gray-600);
        }

        p {
            font: var(--text-md);
            color: var(--gray-500);
        }
    }

    ul {
        margin-top: 48px;

        display: flex;
        flex-direction: column;
        justify-content: stretch;
        width: 400px;
        gap: 16px;

        li a {
            display: flex;
            align-items: center;
            border: 1.5px solid transparent;
            border-radius: 8px;
            padding: 20px;
            background-color: var(--gray-300);
            cursor: pointer;

            img {
                &:first-of-type {
                    width: 28px;
                }

                &:last-of-type {
                    width: 20px;
                }
            }

            span {
                flex: 1;
                margin-left: 12px;
                font: var(--text-md);
                color: var(--gray-500);
            }

            &:hover {
                border-color: var(--blue);
            }

        }
    }
}

@media(max-width: 500px) {

    #intro,
    #projects,
    #services,
    #contact {
        padding-inline: 24px;
    }

    #intro {
        text-align: center;

        header {
            h1 {
                font-size: 48px;
            }
        }
    }

    #services {
        ul {
            flex-direction: column;
        }
    }

    #contact {
        ul {
            max-width: 80vw;
        }
    }
}

@media(min-width: 1920px) {

    #intro,
    #contact {
        background-position: center;
    }
}