:root{
    --primary-color: #966b9d;
    --secundary-color: #c98686;
    --third-color: #f2b880;
    --fourth-color: #e7cfbc;
    --fifth-color: #fff4ec;
}

body{
    font-family: Courier New, serif;
    font-size: 40px;
    /*background: linear-gradient(var(--primary-color), var(--secundary-color), var(--third-color), var(--fourth-color), var(--fifth-color));*/
}

button{
    width: 200px;
    height: 60px;
    font-size: 40px;
}

#container{
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

#player{
    font-size: 50px;
    padding: 30px;
    background-color: var(--primary-color);
}

#welcome{
    padding-bottom: 30px;
    background-color: var(--primary-color);
    border-bottom: 1px solid black;
}

#challengeName{
    font-size: 60px;
    padding: 30px;
    background-color: var(--secundary-color);
}

#period{
    font-style: italic;
    padding: 20px;
    background-color: var(--secundary-color);
    border-bottom: 1px solid black;
}

#doneDays{
    font-size: 70px;
    padding: 30px;
    background-color: var(--third-color);
    border-bottom: 1px solid black;
}

#doneDaysLabel{
    padding-top: 30px;
    background-color: var(--third-color);
}

#remainingDays{
    padding: 20px;
    background-color: var(--fourth-color);
    border-bottom: 1px solid black;
}

#remainingDaysLabel{
    padding-top: 30px;
    background-color: var(--fourth-color);
}

#buttonRow{
    background-color: var(--fifth-color);
    padding: 20px;
}