/* === BODY === */
*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

body, html{
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
    overflow-y: auto;   
}

body{
    background: radial-gradient(circle, #000033, #000000);
}


/* == MAIN == */

main{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.extras_flex{
    margin: 100px;
    display: flex;
    justify-content: center;
}

.extras_grid{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    row-gap: 30px;
}

.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

.logoExtras{
    height: 80px;
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.986));
    transition: transform 0.4s ease, filter 0.4s ease;
}

.logoExtras:hover{
    transform: scale(1.3);
    filter: drop-shadow(0px 0px 10px rgba(233, 192, 8, 0.87));

}