@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Syne:wght@400..800&family=Yellowtail&display=swap');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-straight/css/uicons-regular-straight.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');


:root{
    --theme: #010d20;
    --accent: #F9A03A;
    --background: #FFFFFF;
    --foreground: #06080c;
    --content: #242424;
    --dark: #121416;
}

::selection{
    color: var(--accent);
    background: var(--theme);
}

html{
    scroll-behavior: smooth;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lexend", serif;
}

body{
    width: 100%;
    min-height: 100vh;
    background: var(--background);
    color: var(--foreground);
}

p{
    color: var(--content);
}

a{
    color: inherit;
    text-decoration: none;
}

input{
    outline: 0;
}

button{
    cursor: pointer;
    outline: 0;
}

.container{
    width: 100%;
    padding: 40px 80px;
}

.syne{
    font-family: "Syne", serif !important;
}

.title{
    margin: 30px auto;
    text-align: center;
}

.title h1{
    font-size: 28px;
    font-family: "Syne", serif;
    font-weight: 700;
    text-transform: uppercase;
}

.title p{
    width: 70%;
    margin: 15px auto;
    display: block;
    color: #888;
    font-size: 14px;
}

.grid{
    display: grid;
}

.col-2{
    grid-template-columns: repeat(2, 1fr);
}


.col-3{
    grid-template-columns: repeat(3, 1fr);
}

.col-4{
    grid-template-columns: repeat(4, 1fr);
}

.gap-10{
    gap: 10px;
}

.gap-20{
    gap: 10px;
}


@media (max-width: 768px) {
    .col-2,
    .col-3,
    .col-4{
        grid-template-columns: 1fr;
    }

    .container{
        padding: 20px;
    }

    .title p{
        width: 100%;
    }
}