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

:root{
    --orange:#d45c00;
    --green:#52D400;
    --dark_gray:#404040;
    --gray:#6c6a68;
    --light_gray:#b3b2b0;
    --black:#171717;
    --blue:#00bcd4;
}

img{
    image-rendering: pixelated;
}

.container{
    max-width: 800px;
    background-color: var(--dark_gray);
    border-radius: 25px;
    margin-top: 10px;
}

.container_list{
    display: flex;
    align-items: center;
}

.highlight{
    color: var(--green);
}

div{
    padding: 20px 40px;
    justify-content: space-around;
    margin: auto;
}

h1{
    color: var(--blue);
    font-size: 3em;
    font-weight: bold;
}

h2{
    color: var(--orange);
    font-size: 2em;
    font-weight: bold;
}

p{
    padding: 10px 50px;
    color: var(--light_gray);
    text-align: center;
    justify-self: center;
}

html, body{
    font-size: 1em;
    background-color: var(--black);
    text-align: center;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth; /* Adiciona rolagem suave */
    overflow-x: hidden; /* Evita rolagem horizontal */
}

nav{
    font-size: 1.2em;
    display: flex;
    align-items: center;
    margin-top: 10px;
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
        display: inline-flex;
        gap: 10px;
        li{
            display: inline;
            a{
                text-decoration: none;
                padding: 10px 15px;
                border-radius: 5px;
                color: var(--blue);
            }
            a:hover{
                color: var(--orange);
                background-color: var(--dark_gray);
            }
        }
    }
}

header{
    padding: 30px 20px;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    display: flex;
    nav{
        input{
            display: none;
        }
        .button{
            display: none;
            color: var(--blue);
            position: fixed;
            z-index: 3;
            @media (max-width: 880px) {    
                display: flex;
                right: 20px;
                position: fixed;
            }
        }
    }

    @media (max-width: 880px) {
        .sidebar{
            display: flex;
            overflow: hidden;
            flex-direction: column;
            height: 100%;
            width: 0%;
            position: fixed;
            z-index: 2;
            top: 0;
            right: 0;
            background-color: var(--black);
            padding-top: 60px;
            text-align:center;
            transition: 0.3s ease-out;
        }
        #sidebar_active:checked ~ .sidebar{
            width: 100%;
        }
    }
}       

footer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    padding: 40px 0;
}

main{
    justify-content: center;
}