@charset "UTF-8";

*{
    margin: 0%;
    padding: 0%;
}
body {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    background-color: #202020;
    color: aliceblue;

    background-image: url(https://wallpaperset.com/w/full/6/3/3/418412.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;

    /* grid-area: stack;
    animation: parallax linear;
    animation-timeline: scroll(); */
}

h2{
    font-size: 50px;
    text-shadow: 8px 8px 20px #000000ce;
}

#container {
    margin-top:100px;
    
    grid-area: stack;
    animation: parallax-reverse linear;
    animation-timeline: scroll();
    
}
  
input[type="number"] {
    padding: 10px;
    margin-right: 10px;

}
  
button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}
  
button:hover {
    background-color: #45a049;
}

table{
    text-align: center;
    margin: auto;
    background-color: #4caf4f;


    box-shadow: 8px 8px 50px #000000b6;
    transition: 2s;
}

main{  

    display: flex;
    justify-content: space-around;
    align-items: center;

    transition: 2s;
}

main img{
    width: 300px;



    transition: 2s;
}

.fundo img{
    width: 100%;

    /* --parallax-speed: -100px;
    z-index: 1; */
    grid-area: stack;
    animation: parallax linear;
    animation-timeline: scroll();
}

svg{
    margin-bottom: 0;

}

footer{

    background-color: #202020;
    width: 100%;
    /* height: 200px; */

    display: flex;
    flex-direction: column;

    /* animation: parallax-footer linear;
    animation-timeline: scroll(); */
}

footer p{
    padding-bottom: 30px;

    animation: parallax-footer linear;
    animation-timeline: scroll();
}

@keyframes parallax {
    to{
        /* transform: translateY(calc(var(--parallax-speed)*-220px)); */

        transform: translateY(-20%);
    }
    
}

@keyframes parallax-reverse {
    to{
        transform: translateY(120%)
    }
    
}

@keyframes parallax-footer {
    to{
        transform: translateY(-100%)
    }
    
}