@font-face {
    font-family: "Railey";
    src: url("../../assets/fonts/Railey.ttf") format("truetype");
}

@font-face {
    font-family: "Pompiere";
    src: url("../../assets/fonts/Pompiere.ttf") format("truetype");
}
*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body{

    background: #F7F1E4;

}

.evolution-screen{

    position: relative;

}

.evolution-screen >img{

    display: block;

    width: 100%;

    height: auto;

}
.evolution-title{

    position: absolute;

    top: 14%;

    left: 50%;

    transform: translateX(-50%);

    width: 80%;

    text-align: center;

    color: #413F3F;

    font-size: 62px;

    font-family: "Railey";

}


.evolution-icon{

    width: 90px;

    height: 90px;

    object-fit: contain;
}

.coffee-icon{

    position:absolute;

    width:00px;

    top:43%;

    left:8%;

}
.back-button{

    position: absolute;

    bottom: -600%;

    left: 50%;

    transform: translateX(-50%);

    width: 70px;

    height: 70px;

    background: transparent;

    opacity: .1;

    border: none;

    cursor: pointer;

}
.day-today{

    position: absolute;

    top: 100%;

    left: 30%;

    transform: translateX(-50%);

    font-family: "Pompiere";

    font-size: 38px;

    color: #7F7F7F;

}

.day-yesterday{

    position: absolute;

    top: 100%;

    left: 55%;

    transform: translateX(-50%);

    font-family: "Pompiere";

    font-size: 38px;

    color: #7F7F7F;

}

.day-before{

    position: absolute;

    top: 100%;

    left: 90%;

    transform: translateX(-50%);

    font-family: "Pompiere";

    font-size: 38px;

    color: #7F7F7F;

}