@font-face {
  font-family: "Rubik";
  font-style: normal;
  src: local("Rubik"),
    url("fonts/Rubik-VariableFont_wght.ttf") format("truetype");
}

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

img {
  inline-size: 100%;
  display: block;
}

:root {
  --orange-300: hsl(15, 100%, 70%);
  --blue-300: hsl(195, 74%, 62%);
  --pink-400: hsl(348, 100%, 68%);
  --green-400: hsl(145, 58%, 55%);
  --purple-700: hsl(264, 64%, 52%);
  --purple-600: hsl(246, 80%, 60%);
  --purple-500: hsl(235, 45%, 61%);
  --yellow-300: hsl(43, 84%, 65%);
  --navy-950: hsl(226, 43%, 10%);
  --navy-900: hsl(235, 46%, 20%);
  --navy-800: hsl(235, 41%, 34%);
  --navy-200: hsl(236, 100%, 87%);
  --grey: hsl(0, 0%, 85%);
  --font-step-1: 0.9375rem; /*15px*/
  --font-step-2: 1.125rem; /*18px*/
  --font-step-3: 1.5rem; /*24px*/
  --font-step-4: 2rem; /*32px*/
  --font-step-5: 2.5rem; /*40px*/
  --font-step-6: 3.5rem; /*56px*/
  --fluid-32-56: clamp(2rem, 0.5687rem + 6.1069vw, 3.5rem);
  --fluid-8-24: clamp(0.5rem, 0.1479rem + 1.5023vw, 1.5rem);
  --fluid-24-32: clamp(1.5rem, 0.9286rem + 1.1905vw, 2rem);
  --font-base: "Rubik", "sans-serif";
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --space-8: 0.5rem;
  --space-21: 1.3125rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-64: 4rem;
  --space-54: 3.375rem;
  --space-78: 4.875rem;
  --space-80: 5rem;
  --corner-radius: 0.9375rem;
  --work-img: url("images/icon-work.svg");
  --play-img: url("images/icon-play.svg");
  --study-img: url("images/icon-study.svg");
  --exercise-img: url("images/icon-exercise.svg");
  --social-img: url("images/icon-social.svg");
  --self-care-img: url("images/icon-self-care.svg");
}

body {
  background-color: var(--navy-950);
  font-size: var(--font-step-2);
  font-family: var(--font-base);
  font-weight: var(--font-regular);
  color: white;
  height: 100dvh;
  display: grid;
  justify-items: center;
  align-items: center;
}

main {
  padding-block: var(--space-80);
  padding-inline: var(--space-24);
}

h1 {
  font-size: var(--font-step-3);
  font-weight: var(--font-light);
}

h2 {
  font-weight: var(--font-medium);
  font-size: var(--font-step-2);
}

.report {
  display: grid;
  gap: var(--space-24);
}

.user-card {
  background-color: var(--navy-900);
  border-radius: var(--corner-radius);
  overflow: hidden;
}

.user-card header {
  display: flex;
  gap: var(--space-24);
  align-items: center;
  border-radius: inherit;
  background-color: var(--purple-600);
  padding: var(--space-32);
  img {
    inline-size: var(--space-64);
    border-radius: 50%;
    outline: white solid 3px;
    box-shadow: 0 4px 4px 0 black;
  }
}
.user-info {
  p {
    color: var(--navy-200);
    font-size: var(--font-step-1);
    font-weight: var(--font-regular);
  }

  h1 {
    margin-block-start: var(--space-8);
  }
}

.toggle-btn-group {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  text-align: center;
  padding: var(--space-24);
}

.toggle-btn {
  & label {
    font-size: inherit;
    font-weight: inherit;
    color: var(--purple-500);
  }
  input {
    &[type="radio"] {
      opacity: 0;
      position: absolute;
    }
    &[type="radio"]:checked + label {
      color: white;
    }
    &[type="radio"]:focus-visible + label {
      outline: 1px solid var(--navy-200);
      border-radius: 4px;
    }
  }
}

.time-card-main {
  border-radius: inherit;
  background-color: var(--navy-900);
  width: 100%;
  padding: var(--fluid-24-32);
  transition: background-color 100ms ease-in-out;
}

.time-card-main:hover {
  background-color: var(--navy-800);
}

.time-card {
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
  background-image: var(--time-card-image),
    linear-gradient(var(--time-card-color) 40%, var(--navy-900) 40%);
  background-repeat: no-repeat;
  background-size: var(--image-size, 4.125rem), cover;
  background-position: 92% var(--height-offset, -10px);
  padding-block-start: 2.375rem;
  border-radius: var(--corner-radius);
}

.time-card[data-type="work"] {
  --time-card-image: var(--work-img);
  --time-card-color: var(--orange-300);
  --image-size: 74px;
  --height-offset: -10%;
}
.time-card[data-type="play"] {
  --time-card-image: var(--play-img);
  --time-card-color: var(--blue-300);
  --image-size: 76px;
  --height-offset: -6%;
}
.time-card[data-type="study"] {
  --time-card-image: var(--study-img);
  --time-card-color: var(--pink-400);
  --image-size: 76px;
  --height-offset: -6%;
}
.time-card[data-type="exercise"] {
  --time-card-image: var(--exercise-img);
  --time-card-color: var(--green-400);
  --height-offset: -1%;
  --image-size: 79px;
}
.time-card[data-type="social"] {
  --time-card-image: var(--social-img);
  --time-card-color: var(--purple-700);
  --height-offset: -25%;
  --image-size: 74px;
}
.time-card[data-type="self-care"] {
  --time-card-image: var(--self-care-img);
  --time-card-color: var(--yellow-300);
  --height-offset: -14%;
  --image-size: 67px;
}

.time-card[data-hidden="true"] {
  display: none;
}

.time-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--font-medium);
  img {
    max-inline-size: 21px;
    height: 100%;
  }
}

.time-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--fluid-8-24);
  p:first-child {
    font-size: var(--font-step-4);
    font-weight: var(--font-light);
  }
  p:last-child {
    font-size: var(--font-step-1);
    color: var(--navy-200);
  }
}

@media (min-width: 768px) {
  .report {
    grid-template-columns: repeat(3, minmax(14.375rem, 1fr));
  }

  .user-card {
    grid-column: 1 / -1;
  }

  .time-card {
    padding-block-start: 2.0625rem;
  }

  .time-card-content {
    align-items: start;
    flex-direction: column;
    gap: var(--space-8);
    p:first-child {
      font-size: var(--font-step-6);
    }
  }

  .time-card[data-type="work"] {
    --image-size: 60px;
    --height-offset: -6%;
  }
  .time-card[data-type="play"] {
    --image-size: 59px;
    --height-offset: -4%;
  }
  .time-card[data-type="study"] {
    --image-size: 60px;
    --height-offset: -4%;
  }
  .time-card[data-type="exercise"] {
    --image-size: 60px;
    --height-offset: -1%;
  }
  .time-card[data-type="social"] {
    --image-size: 58px;
    --height-offset: -10%;
  }
  .time-card[data-type="self-care"] {
    --image-size: 50px;
    --height-offset: -6%;
  }
}

@media (min-width: 1280px) {
  .report {
    display: grid;
    grid-template-columns: repeat(4, minmax(auto, 16rem));
    grid-auto-rows: minmax(auto, 15.25rem);
    gap: var(--space-32);
  }

  .user-card {
    grid-column: 1 / 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;

    header {
      flex: 1;
      flex-direction: column;
      align-items: baseline;
      gap: var(--space-40);
      img {
        inline-size: var(--space-78);
        block-size: var(--space-78);
      }
    }
  }
  .user-info h1 {
    margin: 0;
    font-size: var(--font-step-5);
  }

  .time-card {
    padding-block-start: 2.8125rem;
  }

  .time-card[data-type="work"] {
    --image-size: 77px;
    --height-offset: -7%;
  }
  .time-card[data-type="play"] {
    --image-size: 76px;
    --height-offset: -4%;
  }
  .time-card[data-type="study"] {
    --image-size: 76px;
    --height-offset: -4%;
  }
  .time-card[data-type="exercise"] {
    --image-size: 76px;
    --height-offset: -1%;
  }
  .time-card[data-type="social"] {
    --image-size: 70px;
    --height-offset: -10%;
  }
  .time-card[data-type="self-care"] {
    --image-size: 62px;
    --height-offset: -6%;
  }

  .toggle-btn-group {
    grid-auto-flow: row;
    align-items: baseline;
    justify-items: baseline;
    padding: var(--space-32);
    gap: 1.3125rem;
  }
}