*{
    box-sizing: 0;
    margin: 0;
    padding: 0;
}


body{
    font-family: Arial, Helvetica, sans-serif;
}

header{
    background-color: #fbfbfb;
    text-align: center;
    border-bottom: 2px solid #ffebff ;
    padding: 20px;
    margin-bottom: 20px;

    h1{
        font-size: 50px;
        font-weight: bolder;
    }
}

.pequeno{
    display: none;
}
main{
    padding: 30px;
    margin: auto;
    
        button{
        margin: auto;
        background-color: #fbfbfb;
        display: flex;
        padding: 20px;
        align-items: center;
        justify-items: center;
        border: none;
        font-size: 40px;
        box-shadow: 5px 5px 5px 5px rgb(224, 224, 224);
    }
}

#pequenoAlmoço{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}



.conteudo{
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
    width: 380px;
    margin: 19px;
    padding: 20px;
    background-color: #ffebff;
    border-radius: 20px;

    li{
        margin: 9px;
        font-size: 23px;
        font-weight: bolder;
        list-style: none;
    }
    p{
        color: red;
        margin-left: 12px;
      
    }

    .preco{
        font-size: 20px; ; 
        color: black;
        margin-right: 9px;  

    }


}



.titulo{
    background-color: #fbfbfb;
    display: flex;
    align-items: center;

    img{
        width: 90px;
        margin-left: 12px;
    }

    h3{
        font-size: 30px;
        display: inline-block;
    }

        img{
            border: 1px solid white;
            width: 90px;
            margin: 5px;
        }
}


#subio1, #desceu1{
    display: none;
}

footer{
    border-top: 5px solid #ffebff;
    background-color: #fdfdfd;
    padding: 30px;
    text-align: center;
    h1{
        font-size: 20px;
        margin: 10px;
        padding: 25px;
        display: inline-block;
        background-color: #ffd0ff;
        box-shadow: 4px 4px 4px black;
        a{
            text-decoration: none;
            color: black;
        }
    }

    h1:hover{
        background-color:  #aaaaaa;
    }


.whatsaap{

            text-decoration: none;
            color: white;

        .redessociais{
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 10px;
        background-color: green;
        padding: 10px;
        border-radius: 5px;
        width: 100px;


        img{
            width: 30px;
        }
    }

        }
}



        .redessociais::before, .redessociais::after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: green;
            z-index: -1;
            border-radius: 5px;
            opacity: .7;
        }

        @keyframes pulsar {
            100%{
                transform: scale(1.3);
                opacity: 0;
            }
            
        }

        .redessociais::before{
            animation: pulsar 2s ease-in-out infinite;
        }

         .redessociais::after{
            animation: pulsar 2s 1s ease-in-out infinite;
        }