:root {
  /* Primary */

  /* title */
  --Purple-600: hsl(246, 80%, 60%);
  /* (work) */
  --Orange-300: hsl(15, 100%, 70%);
  /* (play) */
  --Blue-300: hsl(195, 74%, 62%);
  /* (study) */
  --Pink-400: hsl(348, 100%, 68%);
  /* (exercise) */
  --Green-400: hsl(145, 58%, 55%);
  /* (social) */
  --Purple-700: hsl(264, 64%, 52%);
  /* (self care) */
  --Yellow-300: hsl(43, 84%, 65%);

  /* Neutral */

  --Navy-950: hsl(226, 43%, 10%);
  --Navy-900: hsl(235, 46%, 20%);
  --Purple-500: hsl(235, 45%, 61%);
  --Navy-200: hsl(236, 100%, 87%);

  /* misc */
  --border-rad: 0.8rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Rubik";
  color: white;
}

html,
body {
  font-size: 18px;
  background-color: var(--Navy-950);
}

#main-container {
  margin: 4rem 1rem;
}

.picture-name-time {
  background-color: var(--Navy-900);
  border-radius: var(--border-rad);
  height: 11rem;
  max-width: 33rem;
  margin: 0 auto;

  & .picture-name {
    display: flex;
    height: 65%;
    align-items: center;
    padding-left: 1.5rem;
    background-color: var(--Purple-600);
    border-radius: var(--border-rad);

    & .image-jeremy {
      border-radius: 50%;
      height: 3.5rem;
      border: 0.2rem solid white;
    }

    & .name {
      padding-left: 0.7rem;
      line-height: 1.3;
      & p {
        font-size: 0.8rem;
        font-weight: 300;
      }

      & h1 {
        z-index: 0;
        font-weight: 400;
        font-size: 1.3rem;
      }
    }
  }

  & .time-period {
    display: flex;
    height: 35%;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;

    & button {
      color: var(--Purple-500);
      font-weight: 500;
      background-color: var(--Navy-900);
      border: none;
      font-size: 0.8rem;
    }
    
  }
}

.category {
  border-radius: var(--border-rad);
  height: 8.8rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
  max-width: 33rem;
  margin: 1.5rem auto;

  & .category-icon {
    position: absolute;
    top: -0.5rem;
    right: 1rem;
    z-index: -1;
  }
}

.details {
  background-color: var(--Navy-900);
  height: 6.6rem;
  border-radius: var(--border-rad);
  margin-top: 2.3rem;
  z-index: 2;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.details-name-ellipses,
.hours {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ellipses {
  height: 0.25rem;
}

.hours {
  & .current {
    font-size: 1.7rem;
    font-weight: 300;
  }

  & .previous {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--Navy-200);
  }
}

#work {
  background-color: var(--Orange-300);
}

#play {
  background-color: var(--Blue-300);
}

#study {
  background-color: var(--Pink-400);
}

#exercise {
  background-color: var(--Green-400);
}

#social {
  background-color: var(--Purple-700);
}

#self-care {
  background-color: var(--Yellow-300);
}

.attribution {
  font-size: 0.7rem;
  text-align: center;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 64rem) {
  #main-container {
    margin: 20vh auto;
    width: 55rem;
    height: 26rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1.4rem;
  }

  .category {
    margin: 0;
    height: auto;
  }

  .picture-name-time {
    grid-row-start: 1;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 2;
    height: auto;

    & .picture-name {
      flex-direction: column;

      & .image-jeremy {
        margin-top: 1.5rem;
        align-self: flex-start;
        height: 4rem;
      }

      & .name {
        margin-top: 2rem;
        padding: 0;
        line-height: 1.2;

        & p {
          font-size: 0.7rem;
          font-weight: 300;
        }

        & h1 {
          z-index: 0;
          font-weight: 400;
          font-size: 1.8rem;
        }
      }
    }

    & .time-period {
      flex-direction: column;
      justify-content: space-evenly;
      align-items: flex-start;

      & button:hover {
        cursor: pointer;
        color:white !important; 
      }
    }
  }

  #work {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
  }

  #play {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 4;
  }

  #study {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 4;
    grid-column-end: 5;
  }

  #exercise {
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column-start: 2;
    grid-column-end: 3;
  }

  #social {
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column-start: 3;
    grid-column-end: 4;
  }

  #self-care {
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column-start: 4;
    grid-column-end: 5;
  }

  .details {
    height: 10.1rem;
  }

  .details:hover {
    cursor: pointer;
    background-color: hsl(235, 46%, 40%);;
  }
  
  .hours {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    & .current {
      margin-top: 0.7rem;
      font-size: 2.6rem;
      font-weight: 300;
    }

    & .previous {
      margin-top: 0.7rem;
      font-size: 0.7rem;
      font-weight: 500;
      color: var(--Navy-200);
    }
  }
}