:root{

    --background:#F7F1E4;

}

*{

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

}

body{

    background:var(--background);

}

img{

    width:100%;

    display:block;

}
.dashboard{
    position: relative;
}

.coffee-card{

    position: absolute;

    top: 47%;
    left: 52%;

    width: 44%;
    height: 10%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px;

    background: #fff5f5;

    border-radius: 28px;

    box-shadow: 0 8px 24px rgba(0,0,0,.10);

    text-decoration: none;


}


.coffee-progress{

    width: 100%;

    height: 10px;

    background: #F5D6D6;

    border-radius: 999px;

    overflow: hidden;

}

.coffee-progress-fill{

    width: 0%;

    height: 100%;

    background: #ef8d8d;

    transition: width .3s ease;


}

.coffee-icon{

    width: 70px;

    height: 70px;

    object-fit: contain;

}

.coffee-value{

    font-size: 22px;

    font-weight: bold;

    color: #413f3f;

    white-space: nowrap;

}
.coffee-left{

    display: flex;

    align-items: center;

    justify-content: center;

}

.coffee-right{

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 8px;

    margin-left: 12px;

}

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

.coffee-value{
    font-family: "Railey";
}
.evolution-card{

    position: absolute;

    top: 73%;
    left: 4%;

    width: 92%;

    height: 14%;

    background: #fff5f5;

    border-radius: 28px;

    box-shadow: 0 8px 24px rgba(0,0,0,.10);

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

}
.evolution-card img{

    width: 85%;

    height: auto;

    object-fit: contain;

}
.evolution-icon{

    width: 45%;

}

.evolution-icon img{

    width: 100%;

    height: auto;

    display: block;

}
.mood-card{

    position: absolute;

    top: 47%;
    left: 4%;

    width: 44%;
    height: 10%;

    background: #fff5f5;

    border-radius: 28px;

    box-shadow: 0 8px 24px rgba(0,0,0,.10);

    display: flex;

    align-items: center;

    padding: 16px;

    text-decoration: none;

}
.mood-text{

    font-family: "Railey";

}
.mood-text{

    font-family: "Railey";

    font-size: 22px;

    color: #413F3F;

    margin-left:5px;

    white-space: nowrap;

}
.mood-icon{

    flex-shrink: 0;

}
.mood-icon img{

    width: 70px;

    height: 70px;

    object-fit: contain;

}
.medication-card{

    position: absolute;

    top: 60%;
    left: 52%;

    width: 44%;
    height: 10%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px;

    background: #fff5f5;

    border-radius: 28px;

    box-shadow: 0 8px 24px rgba(0,0,0,.10);

    text-decoration: none;

}

.medication-value{

    font-family: "Railey";

    font-size: 22px;

    color: #413F3F;

    white-space: nowrap;

}

.medication-progress-fill{

    width: 0%;

    height: 100%;

    background: #7DBA8A;

    transition: width .3s ease;

}