body{
    font-family: 'Rubik';
    background-color: hsl(226, 43%, 10%);
    color: white;
}

span{
    display: flex;
    align-items: center;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dots{
    font-weight: bold;
    font-size: 35px;
    color: hsl(236, 100%, 87%);
}

.dots:hover{
    color: white;
}

.topInfo, .botInfo{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.person{
    grid-row-start: 1;
    grid-row-end: 3;
}

.person p{
    padding: 10px;
}

.person img{
    border-radius: 50%;
    border: 3px solid white;
    margin: 5px;
}

.person button{
    padding: 30px;
    font-size: 20px;
    width: 40%;
}

.personTitle{
    background-color: hsl(246, 80%, 60%);
    border-radius: 20px;
}

.person, .work, .play, .study, .exercise, .social, .selfCare{
    background-color: hsl(235, 46%, 20%);
    border-radius: 20px;
    margin: 15px;
    width: 24em;
}

.title{
    font-size: 20px;
}

.work{
    background-color: hsl(15, 100%, 70%);
    background-image: url("./images/icon-work.svg");
    background-repeat: no-repeat;
    background-position: right top;
}

.play{
    background-color: hsl(195, 74%, 62%);
    background-image: url("./images/icon-play.svg");
    background-repeat: no-repeat;
    background-position: right top;
}

.study{
    background-color: hsl(348, 100%, 68%);
    background-image: url("./images/icon-study.svg");
    background-repeat: no-repeat;
    background-position: right top;
}

.exercise{
    background-color: hsl(145, 58%, 55%);
    background-image: url("./images/icon-exercise.svg");
    background-repeat: no-repeat;
    background-position: right top;
}

.social{
    background-color: hsl(264, 64%, 52%);
    background-image: url("./images/icon-social.svg");
    background-repeat: no-repeat;
    background-position: right top;
}

.selfCare{
    background-color: hsl(43, 84%, 65%);
    background-image: url("./images/icon-self-care.svg");
    background-repeat: no-repeat;
    background-position: right top;
}

#reportFor{
    color: hsl(236, 100%, 87%);
    margin-top: 7px;
}

#personName{
    font-size: 25px;
    color: white;
    font-weight: 100;
    margin-top: 5px;
}

#buttons{
    display: flex;
    justify-content: center;
}

#workInfo, #playInfo, #studyInfo, #exerciseInfo, #socialInfo, #selfInfo{
    background-color: hsl(235, 46%, 20%);
    border-radius: 20px;
    padding: 25px;
    margin-top: 55px;
    white-space: nowrap;
}

#workInfo:hover, #playInfo:hover, #studyInfo:hover, #exerciseInfo:hover, #socialInfo:hover, #selfInfo:hover{
    background-color: hsl(235, 45%, 61%);
    cursor: pointer;
}

#workCurrent, #playCurrent, #studyCurrent, #exerciseCurrent, #socialCurrent, #selfCurrent{
    font-size: 35px;
    font-weight: lighter;
}

#workPrev, #playPrev, #studyPrev, #exercisePrev, #socialPrev, #selfPrev{
    color: hsl(236, 100%, 87%);
}

#dailyButton, #weeklyButton, #monthlyButton{
    background: transparent;
    border: none;
    font-family: 'Rubik';
    color: hsl(235, 45%, 61%);
}

#dailyButton:hover, #dailyButton:disabled, #weeklyButton:hover, #weeklyButton:disabled, #monthlyButton:hover, #monthlyButton:disabled{
    color: white;
    cursor: pointer;
}

@media (max-width: 70em){
    .personTitle{
        padding: 20px;
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 70em){
    body{
        margin: 70px;
        align-items: center;
        justify-items: center;
    }

    .container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        max-width: 85%;
    }

    .person button{
        padding: 15px;
        text-align: left;
    }

    .personTitle{
        height: 320px;
        padding: 25px;
    }

    .person, .work, .play, .study, .exercise, .social, .selfCare{
        width: 92%;
    }

    .botInfo{
        display: block;
        width: 100%;
    }

    #personName{
        font-size: 40px;
    }

    #buttons{
        display: flex;
        flex-direction: column;
        height: 150px;
        margin: 15px;
    }

    #workCurrent, #playCurrent, #studyCurrent, #exerciseCurrent, #socialCurrent, #selfCurrent{
        font-size: 55px;
        padding-top: 20px;
    }

    #workPrev, #playPrev, #studyPrev, #exercisePrev, #socialPrev, #selfPrev{
        padding-top: 5px;
    }
}