* {
    box-sizing: border-box;

    h1 {
        font-family: "Syne", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }

    h2, h3, h4, h5, h6, p, ul, li, a {
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }
}

main {padding: 0 5%;}
.gap {
    width: 100%;
    height: 100px;
}

@media (max-width: 1000px) {.gap {height: 50px;}}
@media (max-width: 900px) {.gap {height: 80px;}}

:root {
    --scroll-y: 0;
    --header-footer: black;
    --background-cards: #F1F3F6;
    --hover: #6692ff;
    --white: #f9f9f9;

    --webDevelopment: #295ddd;
    --eventPhotography-icon: #FF6060;
    --shortCinematic-icon: #1b8ea5;
    --graphicDesign-icon: #E59846;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}
.section-header h3 {
    color: rgb(93, 97, 193);
    font-weight: 600;
    margin-bottom: -7px;
    font-size: clamp(10px, 5vw, 1.2rem);
}
.section-header h1 {
    text-transform: uppercase;
    font-size: clamp(20px, 5vw, 2.5rem);
    color: black;
}