*{
    margin: 0;
}
p ul{
    color: #8E8A87;
    font-family: 'font-p';
}

ul{
    font-size: 1.3vh;
    font-family: 'font-p';
    color: #8E8A87;;
}


@font-face {
    font-family: 'font-h2';
    src: url("fonts/young-serif/YoungSerif-Regular.ttf");
}
@font-face {
    font-family: 'font-p';
    src: url("fonts/outfit/Outfit-VariableFont_wght.ttf");
}
main{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #F3E5D8;
}
#receita{
    height: 100%;
    width: 45vh ;
    background-color: white;
    border-radius: 1vh;
    box-shadow: 0px 0px 11px 0px black;
    margin: 1vh;
    gap: 0.8vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}
#img{
    height: 20vh;
    width: 40vh;
    border-radius: 1vh;
    margin: 2vh;
    background-image: url("images/image-omelette.jpeg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
   
}
#area-01{
    height: 12vh;
    width: 93%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    flex-direction: column;
}
#area-01 > h2{
    font-size: 2.2vh;
    margin: 1vh;
    font-family: 'font-h2';
    
}
#area-01 > p{
    font-size: 1.3vh;
    margin: 1vh;
    color: #8E8A87;
}

/* Essa é a Area onde estão o tempo que leva a preparação do omolete */
#area-02{
    height: 11vh;
    width: 93%;
    background-color: #F3E5D8;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    border-radius: 1vh;
}
#area-02 > ul{
    font-size: 1.3vh;
    font-family: 'font-p';
    color: #8E8A87;
}
#area-02 > h2{
    font-size: 1.2vh;
    margin: 1vh;
    margin-left: 2vh;
    color: #84432F;
    font-family: 'font-h2';
}
#area-03{
    height: 15vh;
    width: 93%;
    border-radius: 1vh;
}
#area-03 > h2{
    font-size: 1.8vh;
    margin: 1vh;
    margin-left: 2vh;
    color: #84432F;
    font-family: 'font-h2';
}
.linha{
    height: 0.1vh;
    width: 93%;
    background-color: #8E8A87;
}
#area-04{
    height: 30vh;
    width: 93%;
    border-radius: 1vh;
}
#area-04 > h2{
    font-size: 1.8vh;
    margin: 1vh;
    margin-left: 2vh;
    color: #84432F;
    font-family: 'font-h2';
}
ol{
    font-size: 1.3vh;
    font-family: 'font-p';
   
}
li{
    color:#8E8A87;
}

#area-05{
    height: 30vh;
    width: 93%;
    border-radius: 1vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    margin: 1.7vh;
}
#area-05 > h2{
    font-size: 1.8vh;
    margin: 1vh;
    margin-left: 2vh;
    color: #84432F;
    font-family: 'font-h2';
}
#area-05 > p{
    font-size: 1.3vh;
    margin: 1vh;
    color: #8E8A87;
}
.calor{
    height: 2vh;
    width: 22vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1vh;
    margin-left: 3vh;
}
.cor-01{
    font-size: 1.3vh;
    margin: 1vh;
    color: #8E8A87;


}
.cor-02{
    font-size: 1.3vh;
    margin: 1vh;
    color: #84432F;
    
}
.linha-01{
    height: 0.1vh;
    width: 93%;
    margin-left: 1vh;
    background-color: #8E8A87;
}
@media only screen and (max-width: 650px) {
    main {
            height: 128vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: #F3E5D8;
        }
    #receita {
        height: 100%;
        width: 100%;
        background-color: white;
        gap: 0.8vh;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        border-radius: 0vh;
    }

    #img {
        height: 18vh;
        width: 100%;
        background-image: url(images/image-omelette.jpeg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}