@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;

}

.coffee-screen img{

    display:block;

    width:100%;

    height:auto;

}
.coffee-question{

    position: absolute;

    top: 15%;

    left: 50%;

    transform: translateX(-50%);

    width: 80%;

    text-align: center;

    color: #413F3F;

    font-size: 60px;

    font-family: "Railey";

}
.coffee-screen{

    position: relative;

}

.coffee-selector{

    position: absolute;

    top: 48%;

    left: 50%;

    transform: translateX(-50%);

    width: 230px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 150px 30px;

}
.coffee-selector button{

    background: transparent;

    border: none;

    font-size: 45px;

    color: #413F3F;

    cursor: pointer;

    font-family: "Pompiere";

}
.coffee-number.selected{

    color: #E78A8A;

    transform: scale(1.25);

    transition: all .2s ease;

}