/* Adicionar uma fonte externa */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Reset (limpa as configurações padrão dos navegadores) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    background-color: #dddddd;
    color: #232323;
}

nav {
    background-color: #000000c3;
    color: #f9f9f9;

    /* Fixa a barra de navegação */
    position: fixed;
    z-index: 100;
    width: 100%;
    padding: 16px 32px;

    display: flex;
    justify-content: space-between;

    ul {
        display: flex;
        gap: 4px;
        list-style-type: none;

        a {
            text-decoration: none;
            color: #f9f9f9;
            padding: 8px;
            transition: 0.3s;
            
            &:hover {
                color: #8f5bff;
            }
        }
    }
}

header {
    /* height: 200px; */
    height: 400px;
    background-image: url("https://cdn.pixabay.com/photo/2016/02/01/00/56/news-1172463_1280.jpg");
    background-size: cover;
    background-position: center;
    /* opacity: 50%; */
    filter: brightness(50%);
}

main {
    padding: 32px;
}

/* --- Sections --- */
section {
    height: 600px;
    padding-top: 64px;

    border: 1px solid red;
}





footer {
    text-align: center;
    padding: 16px;
    background-color: #232323;
    color: #dddddd;
    position: fixed;
    z-index: 100;
    width: 100%;
    bottom: 0;
}

article{
    display: flex;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
    padding: 8px;

    img {
        height: 100%;
        width: 350px;
        border-radius: 8px;
        
        
    }
    border: solid 1px #8f5bff;
}



/* REVISAR POSITION ABSOLUTE, FIXED, RELATIVE, FLOAT */
/* X: 15px Y: -10px */