@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdn-uicons.flaticon.com/2.3.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/2.3.0/uicons-brands/css/uicons-brands.css');
@import url('https://cdn-uicons.flaticon.com/2.3.0/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/2.3.0/uicons-thin-rounded/css/uicons-thin-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
:root {
    --page-width: 90rem;

    --dark-color: #161616;
    /* --light-color: #ffffff; */

    --primary-color: var(--secondary-color);
    --secondary-color: #FFA200;
    --tertiary-color: #DCE1E8;
    --quaternary-color: #828A95;
    --quintenary-color: #454545;
    --sextenary-color: #212121;
    --septerary-color: #252529;
    --octonary-color: #1E1E20;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    -webkit-tap-highlight-color: transparent;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body,
main,
header {
    transition: 0.5s;
}

body,
main {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
}

body {
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: var(--dark-color);
    color: var(--quaternary-color);
}

main {
    max-width: var(--page-width);
    gap: 6rem;
    padding-bottom: 4rem;
}

section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.duo {
    width: 12rem;
    align-self: center;
    object-fit: contain;
}

li {
    list-style: none;
}

::-webkit-tap-highlight-color {
   color: #161616;
}


::-webkit-scrollbar {
    width: 13px;
}

::-webkit-scrollbar-track {
    background-color: var(--sextenary-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 12px;
}

@media (max-width: 1280px) {
    :root {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    :root {
        font-size: 15px;
    }

    main {
        gap: 4rem;
    }
}