/* Solid colors */

:root {
    --code-blue: #2182BF;
    --code-blue-dark: #1462A6;
    --code-green: #32d252 ;
    --code-green-dark: #1ea439 ;
    --code-red: #BF2147;
    --code-red-dark: #A6142C;
    --white-1: #F8F3F3;
    --white-2: #D6DDE1;
    --white-3: #acb8bf;
    --black-1: #22303A;
    --black-2: #0B151D;
    --black-3: #131618;

    /* Gradients */

    --gradient-basic-hor: linear-gradient(90deg, #BF2147 0%, #1462A6 100%);
    --gradient-basic-ver: linear-gradient(180deg, #BF2147 0%, #1462A6 100%);
}

/* Animations */

* {
    transition: 0.2s;
}


@keyframes glow-btn-animate {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 400%;
    }
}

@keyframes rotateInfinitely {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ani-glow {
    background: linear-gradient(270deg, #bf2147, #1462a6);
    background-size: 400% 400%;
    -webkit-animation: GlowGradient 30s ease infinite;
    -moz-animation: GlowGradient 30s ease infinite;
    animation: GlowGradient 30s ease infinite;
}

@-webkit-keyframes GlowGradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes GlowGradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes GlowGradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}


/* General styles */

* {
    margin: 0;
    list-style: none;
    text-decoration: none;
}

body {
    background-color: var(--black-2);
    color: var(--white-1);
}

summary:before{
    display: none;
}

/* Fonts */

h1 {
    font-family: 'Comfortaa', sans-serif;
    font-size: 6vw;
    font-weight: 600;
    line-height: 15vh;
    text-transform: uppercase;
    background: var(--gradient-basic-hor);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-family: 'Comfortaa', sans-serif;
    font-size: 4vw;
    font-style: normal;
    font-weight: 500;
    line-height: 10vh;
    background: var(--gradient-basic-hor);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

h3 {
    font-family: 'Encode Sans', sans-serif;
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
}

p {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

p2 {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

p3 {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

li {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    list-style-type: disc;
    list-style-position: inside;
}

/* BARRA DE ROLAGEM */

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

::-webkit-scrollbar-track {
    background-color: var(--black-2);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--black-1);
    border-radius: 5px;
}

::-webkit-scrollbar-corner {
    background-color: var(--black-3);
}

::-webkit-scrollbar-button {
    display: none;
}

@media screen and (max-width: 600px) {
    h1{
        font-size: 15vw;
        line-height: 12vh;
    }

    h2 {
        font-size: 8vw;
        line-height: 5vh;
    }

    h3{
        font-size: 5vw;
        line-height: 3vh;
    }

    p,li{
        font-size: 4vw;
    }
}