@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
:root{
  --purple600: hsl(246, 80%, 60%); 
  --orange300work: hsl(15, 100%, 70%);
  --pink400study: hsl(348, 100%, 68%);
  --green400exercise: hsl(145, 58%, 55%);
  --purple700social: hsl(264, 64%, 52%);
  --yellow300selfcafe: hsl(43, 84%, 65%);
  --navy950: hsl(226, 43%, 10%);
  --navy900: hsl(235, 46%, 20%);
  --purple500: hsl(235, 45%, 61%);
  --navy200: hsl(236, 100%, 87%); 
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Rubik;/* font weights:300,400,500 */
  color:white;
}

body{
  background: var(--navy950);
  display: flex;
  justify-content: center;
}
main{
  display: flex;
  flex-direction: column;
  gap:1.5rem;
  margin-top: 4rem;
}
.titlebox{
  background:var(--purple600);
  display:flex;
  gap:1rem;
  padding: 2rem 1.5rem;
  align-items: center;
  border-radius: 1rem;
}
.jeremy-image{
  width:70px;
  border: 3px solid white;
  border-radius: 50%;
}
.choice-box{
  background: var(--navy900);
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
}
.choice-box p{
  color: var(--purple500);
  font-weight: 400;
  font-size: 1.2rem;
  transition: all 200ms ease-in-out;
}
.choice-box p:hover{
  color:white;
  cursor: pointer;
}
.choice-box p:active{
  color:white;
}

.jeremy-card{
  background: var(--navy900);
  border-radius: 1rem;
}
.jeremy-card,.work-box,.play-box,.study-box,.exercise-box,.social-box,.self-care-box{
  width:85vw;
  max-width: 400px;
}
.report-for{
  color: var(--navy200);
  font-weight: 300;
}
.jeremy-name{
  font-weight: 300;
  font-size: 1.5rem;
}
.work-box{
  background: var(--orange300work);
  border-radius: 1rem;
}
.title-box-work{
  background: var(--navy900);
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 1rem;
  position:relative;
}
.work-image,.play-image,.study-image,.exercise-image,.social-image,.self-care-image{
  height:70px;
  position:absolute;
  top:-15px;
  right: 1rem;
}
.h2{
  font-size:18px;
  font-weight: 500;
}
.time{
  font-size: 1.7rem;
  font-weight: 300;
  margin-top: .5rem;
}
.previous-box{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ellipsis-image{
  width:18px;
  align-self: flex-end;
}
.last-week{
  color:var(--navy200);
  font-weight: 300;
  font-size:14px;
}
.play-box{
  background: hsl(195, 74%, 62%) ;
  border-radius: 1rem;
}
.study-box{
  border-radius: 1rem;
  background: var(--pink400study);
}
.exercise-box{
border-radius: 1rem;
background: var(--green400exercise);
}
.social-box{
  border-radius: 1rem;
  background: var(--purple700social);
}
.self-care-box{
  border-radius: 1rem;
  background: var(--yellow300selfcafe);
}
.work-box,.play-box,.study-box,.exercise-box,.social-box,.self-care-box{
  position:relative;
}
.image-box{
  height:35px;
  overflow: hidden;
  position: relative;
}
@media (min-width:768px){
  main{
    display:grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 15rem;
  }
  .jeremy-card,.work-box,.play-box,.study-box,.exercise-box,.social-box,.self-care-box{
  max-width: 200px;
  width:22vw;
  }
  .jeremy-card{
    grid-row:1/3;
  }
  .titlebox{
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  .report-for{
    font-size: 12px;
  }
  .choice-box{
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
  }
  .title-box-work{
    flex-direction: column;
    align-items: flex-start;
    padding: 1.6rem;
  }
  .jeremy-name{
    margin-bottom: 2.5rem;
  }
  .ellipsis-image{
    position: absolute;
    right: 2rem;
    top: 2rem;
    
  }
  .time{
    font-size: 2.5rem;
  }
  .h2{
    margin-bottom: 1.2rem;
  }
  .last-week{
    margin-top: 1rem;
  }
  .title-box-work:hover{
    cursor: pointer;
    background: #34397b ;
  }
}