html {
  font-size: 16px;
}

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

* {
  margin: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

:root {

  --Blue: hsl(246, 80%, 60%);
  --LightRedWork: hsl(15, 100%, 70%); /* work */
  --SoftBlue: hsl(195, 74%, 62%); /* play */
  --LightRedStudy: hsl(348, 100%, 68%); /* study */
  --LimeGreen: hsl(145, 58%, 55%); /* exercise */
  --Violet: hsl(264, 64%, 52%); /* social */
  --SoftOrange: hsl(43, 84%, 65%); /* self care */

  --VeryDarkblue: hsl(226, 43%, 10%);
  --DarkBlue: hsl(235, 46%, 20%);
  --DesaturatedBlue: hsl(235, 45%, 61%);
  --PaleBlue: hsl(236, 100%, 87%);
}

@font-face {
  font-family: 'Rubik';
  src: url(Rubik-VariableFont_wght.ttf);
  font-weight: 300-900;
}

h1 {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.596);
  font-size: 1rem;
}

h2 {
  font-weight: 300;
}

p {
  font-size: 1.125rem;
  color: white;
}

.bold {
  font-weight: 600;
}

/* main */

body {
  background-color: var(--VeryDarkblue);
  color: white;
  font-family: 'Rubik';
}

main {
  padding: 4rem 1.5rem;
}

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

/* header card styles */

.container__header-card {
  background-color: var(--DarkBlue);
  border-radius: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 20.45rem;
}

.header-card__inner-card {
  background-color: var(--Blue);
  border-radius: inherit;
  padding: 2rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;

  img {
    width: 4rem;
    height: 4rem;
    border: 3px solid white;
    border-radius: 100rem;
  }
}

.sort-type {
  display: flex;
  justify-content: space-between;
  margin: 0 2rem;

  button {
    color: var(--DesaturatedBlue);
    background-color: transparent;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    max-width: max-content;
  }

  button.sort-active {
    color: white;
  }
}

/* sort type card styles */

.container__card-type {
  border-radius: 1rem;
  z-index: 5;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 20.45rem;

  .sort-icons {
    width: 100%;
    height: 2.6rem;
    position: relative;
    overflow: hidden;


    img {
      position: absolute;
      z-index: 20;
      top: -0.5rem;
      right: 1rem;
    }
  }
}

.container__card-type:nth-of-type(2){
  background-color: var(--LightRedWork);
}

.container__card-type:nth-of-type(3){
  background-color: var(--SoftBlue);
}

.container__card-type:nth-of-type(4){
  background-color: var(--LightRedStudy);
}

.container__card-type:nth-of-type(5){
  background-color: var(--LimeGreen);
}

.container__card-type:nth-of-type(6){
  background-color: var(--Violet);
}

.container__card-type:nth-of-type(7){
  background-color: var(--SoftOrange);
}

.card-type__inner-card {
  background-color: var(--DarkBlue);
  padding: 2rem 1.5rem;
  border-radius: 0.9rem;
  margin: 0;
  z-index: 20;

  div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    

    button {
      border: none;
      cursor: pointer;
      background-color: transparent;
      padding: 0;
    }
  }

  div:nth-of-type(1) {
    margin-bottom: 0.5rem;
  }

}

.now-hours {
  font-size: 2rem;
  font-weight: 300;
}

.last-hours {
  font-size: 1rem;
  color: rgba(185, 205, 221, 0.623);
  font-weight: 400;
}



/* footer */
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

@media screen and (min-width: 48rem) {

  main {
    padding: 5rem 0;
  }

  .container {
    display: grid;
    grid-template-columns: repeat(2, 17rem);
    gap: 2rem;
    grid-template-areas: 
    "block-1 block-2"
    "block-1 block-3"
    "block-4 block-5"
    "block-6 block-7" ;
  }

  #block-1 {
    grid-area: block-1;
  }

  #block-2 {
    grid-area: block-2;
  }

  #block-3 {
    grid-area: block-3;
  }

  #block-4 {
    grid-area: block-4;
  }

  #block-5 {
    grid-area: block-5;
  }

  #block-6 {
    grid-area: block-6;
  }

  #block-7 {
    grid-area: block-7;
  }

  .container__header-card {
    width: 100%;
    height: 100%;
    max-width: 18rem;
    margin: 0;

    .header-card__inner-card {
      flex-direction: column;
      align-items: unset;

      h2 {
        font-size: 2.8rem;
        margin-bottom: 2rem;
      }

      img {
        width: 6rem;
        height: 6rem;
        margin-bottom: 1.5rem;
      }
    }

    .sort-type {
      flex-direction: column;
      gap: 1rem;
    }
  }

  .container__card-type {
    width: 100%;
    max-width: 18rem;
    margin: 0;
  }

  .card-type__inner-card {
    padding: 2rem;

    div:nth-of-type(1) {
      margin-bottom: 1rem;
    }

    div:nth-of-type(2) {
      flex-direction: column;
      align-items: unset;

      .now-hours {
        font-size: 4rem;
      }
    }
  }


}

@media screen and (min-width: 80rem) {

  .container {
    display: grid;
    grid-template-columns: repeat(3, 17rem);
    gap: 2rem;
    grid-template-areas: 
    "block-1 block-2 block-3"
    "block-1 block-4 block-5"
    "block-6 . block-7" ;
  }

}

@media screen and (min-width: 90rem) {

  .container {
    display: grid;
    grid-template-columns: repeat(4, 16rem);
    gap: 2rem;
    grid-template-areas: 
    "block-1 block-2 block-3 block-4"
    "block-1 block-5 block-6 block-7";
  }

}