@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
:root {
    --primary-white:#ffffff;
    --primary-black:#000000;
    --navy950:#0E1323;
    --navy900:#1C204B;
    --navy800:#33397A;
    --navy200:#BBC0FF;
    --orange300:#FF8B64;
    --purple700:#7335D2;
    --purple600:#5747EA;
    --purple500:#7078C9;
    --blue300:#55C2E6;
    --pink400:#FF5E7D;
    --green400:#4BCF82;
    --yellow300:#F1C75B;
    --grey200:#D8D8D8;
    --font-rubik:'Rubik' , sans-serif;
}
* { padding:0; margin:0; box-sizing:border-box; }
body {
    display:flex;
    justify-content: center;
    align-items: center;
    width:100vw;
    background-color: var(--navy950);
    color:var(--primary-white);
    font-family: var(--font-rubik);
    padding:5.063rem 1.5rem; 
}
main {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    min-width: 100%;
}
button { border:none; background-color: transparent;  color:var(--primary-white); }

.dashboard-author-container {
    border-radius: 1.25rem;
    overflow: hidden;
    color: white;
    background-color: var(--navy900);
    height: fit-content;
}
.dashboard-header-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem;
    border-radius: 0.938rem;
    background-color: var(--purple600);
}
.dashboard-author-img { width: 4rem; border: solid 3px white; border-radius: 50%; }
.dashboard-title { font-size: 0.938rem; font-weight: 200; color: var(--navy200); }
.dashboard-author-name { font-size: 1.5rem; font-weight: 100; }

.dashboard-select-period-container {
    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 1.5rem 1.25rem;
    border-radius: 0.938rem;
}
.dashboard-select-timing-btn {
    color:var(--purple500);
    font-size: 1.125rem;
    font-weight:lighter;
    line-height: 1.313rem;
    letter-spacing: 1px;
    padding: 0.313rem 0.938rem;
    transition: color 0.3s ease-in-out;
}
.dashboard-select-timing-btn:hover { color: white; }

.active-state-card-btn { color:white; }

.time-card-container {  background-color: var(--orange300); border-radius: 0.938rem; }
.time-card-container.play { background-color: var(--blue300); }
.time-card-container.study { background-color: var(--pink400); }
.time-card-container.exercise { background-color: var(--green400);}
.time-card-container.social { background-color: var(--purple700); }
.time-card-container.self-care { background-color: var(--yellow300);}
.card-background-img-container {
   display: flex;
   justify-content: flex-end;
   margin-right: 1.063rem;
   overflow: hidden;
   object-fit: contain;
   height: 2rem;
}
.card-background-img { position: relative; bottom: 0.625rem; width:4.875rem; height:4.875rem }

.card-time-tracker {
    display:flex;
    flex-direction:column;
    row-gap:0.5rem;
    background-color: var(--navy900);
    border-radius: 0.875rem;
    height:fit-content;
    padding:1.5rem;
}
.card-time-tracker-name-container { display:flex; justify-content: space-between; align-items: center; }
.card-time-tracker-name { font-size:1.125rem; font-weight:500; }
.tracking-time-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.tracking-time { font-size:2rem; font-weight:100; }
.last-week-tracking-time { font-size: 0.938rem; font-weight:200; color:var(--navy200); }

                                                   /* MEDIA-QUERIES */
         /* TABLET */
@media (min-width:48rem) {
    body { padding: 10.813rem 4.875rem; }
    main {    
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 1.5rem;
        grid-row-gap: 1.5rem;
    }
    .dashboard-author-container { grid-area: 1 / 1 / 2 / 4; }   
    .time-card-container.work { grid-area: 2 / 1 / 3 / 2; }
    .time-card-container.play { grid-area: 2 / 2 / 3 / 3; }
    .time-card-container.study { grid-area: 2 / 3 / 3 / 4; }
    .time-card-container.exercise { grid-area: 3 / 1 / 4 / 2; }
    .time-card-container.social { grid-area: 3 / 2 / 4 / 3; }
    .time-card-container.self-care { grid-area: 3 / 3 / 4 / 4; }
    .card-background-img { width:4.125rem; height:4.125rem; bottom:0.5rem; }
    .dashboard-select-period-container { display:block; text-align: center; }
    .card-time-tracker { row-gap: 1rem; }
    .tracking-time-container { flex-wrap: wrap; flex-direction: column; align-items: flex-start; }
    .tracking-time { font-size: 3.5rem; margin-bottom: 0.5rem; }
}

         /* DESKTOP */
@media (min-width:90rem) {
    body { padding: 15.75rem 10.125rem; }
    main {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
    }
    .dashboard-author-container { grid-area: 1 / 1 / 3 / 2; }
    .time-card-container.work { grid-area: 1 / 2 / 2 / 3; }
    .time-card-container.play { grid-area: 1 / 3 / 2 / 4; }
    .time-card-container.study { grid-area: 1 / 4 / 2 / 5; }
    .time-card-container.exercise { grid-area: 2 / 2 / 3 / 3; }
    .time-card-container.social { grid-area: 2 / 3 / 3 / 4; }
    .time-card-container.self-care { grid-area: 2 / 4 / 3 / 5; }

    .dashboard-select-period-container {
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 1.313rem;
        padding:2rem 2rem;
    }
    .dashboard-select-timing-btn { padding:0; }
    .dashboard-header-container { flex-direction: column; align-items: flex-start; row-gap: 2.5rem; }
    .dashboard-author-name { font-size: 2.5rem; }
    .tracking-time-container { align-items: flex-start; }
}