*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    font-family: sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.header{
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    padding: 2rem;
}

.header__title{
    width: 20rem;
    text-align: center;
}

.header__button{
    width: 4rem;
    height: 4rem;
    padding: 1rem;
    border-radius: 50%;
    border: none;
    background: #7cad7e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__button__text{
    font-size: 2rem;
    color: white;
}

.main{
    width: 100vw;
    height: calc(100vh - 7rem);
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.grid{
    width: 100%;
    height: 10%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

.dayOfTheWeek{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.grid2{
    width: 100%;
    height: 90%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.main__day{
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.day{
    font-size: 2rem;
}

.gray {
    background: gray;
}

.today {
    background: #7cad7e;
}