@charset "UTF-8";

/*Importação das fontes "Merriweather", "Montserrat", "Open Sans", "Roboto" e "Press Start 2P"*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


/*Importação das fontes "Nunito", "Poppins" e "Raleway"*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/*Importação da fonte "Lato"
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');*/

:root {
    --colorviolet-one: #4B0082;
    --colorviolet-two: #6A287E;
    --colorviolet-three: #9370DB;
    
    --colorgray-one: #4e4e4e;
    --colorgray-two: #D3D3D3;
    --colorgray-three: #F2F2F2;

    --coloryellow-one: #FFFF99;
    --coloryellow-two: #F0E68C;

    --colorwhite: #fefaf1;
    --colorblack: #101415;

    --fontpixel-art: "Press Start 2P", system-ui;
    --fonthover: "Montserrat", "Merriweather", sans-serif;
    --fontgeral: "Poppins", "Roboto", "Open Sans", sans-serif;
}

strong {
    color: var(--coloryellow-two);
}

.backgray, .backpurple {
    border-bottom: 4px solid black;
    padding: 1.5em;
}

.backpurple {
    background-color: var(--colorviolet-two);
}
.backgray {
    background-color: #4e4e4e;
}

main h2 {
    font: normal 600 1.4em var(--fontpixel-art);
    color: var(--colorwhite);
    letter-spacing: 1px;
    margin-bottom: 1.5em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.548);
    transition:  0.4s ease-in-out;
}

main h2:hover {
    font-size: 1.6em;
}

@keyframes float {
    0% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(4px);
    }
}