/*  =================================================
    Custom Fonts
    =================================================   */
@font-face {
    font-family: 'Rubik';
    src: url('../assets/fonts/Rubik-Light.woff2') format('woff2');
    font-weight: 300;
}

@font-face {
    font-family: 'Rubik';
    src: url('../assets/fonts/Rubik-Regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'Rubik';
    src: url('../assets/fonts/Rubik-Medium.woff2') format('woff2');
    font-weight: 500;
}

/*  =================================================
    Custom Properties (Variables)
    =================================================   */
:root {
    --white: hsl(0, 100%, 100%);
    --black: hsl(0, 0%, 0%);

    --navy-200: hsl(236, 100%, 87%);
    --navy-800: hsl(235, 41%, 34%);
    --navy-900: hsl(235, 46%, 20%);
    --navy-950: hsl(226, 43%, 10%);

    --orange: hsl(15, 100%, 70%);

    --purple-500: hsl(235, 45%, 61%);
    --purple-600: hsl(246, 80%, 60%);
    --purple-700: hsl(264, 64%, 52%);

    --blue: hsl(195, 74%, 62%);

    --pink: hsl(348, 100%, 68%);

    --green: hsl(145, 58%, 55%);

    --yellow: hsl(43, 84%, 65%);

    --grey: hsl(0, 0%, 85%);

    --spacing-100: 0.8rem;
    --spacing-200: 1.6rem;
    --spacing-300: 2.4rem;
    --spacing-400: 3.2rem;
    --spacing-500: 4.0rem;
}


/*  =================================================
    CSS Reset
    =================================================   */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* 11. 10 pixels = 1rem */
html {
  font-size: 62.5%;
}

/*  =================================================
    Typography Utilities
    =================================================   */
.text--p1 {
    font-family: 'Rubik', sans-serif;
    font-size: 5.6rem;
    line-height: 6.6rem;
    font-weight: 300;
}

.text--p2 {
    font-family: 'Rubik', sans-serif;
    font-size: 4.0rem;
    line-height: 4.7rem;
    font-weight: 300;
}

.text--p3 {
    font-family: 'Rubik', sans-serif;
    font-size: 3.2rem;
    line-height: 3.8rem;
    font-weight: 300;
}

.text--p4 {
    font-family: 'Rubik', sans-serif;
    font-size: 2.4rem;
    line-height: 2.8rem;
    font-weight: 300;
}

.text--p5-regular {
    font-family: 'Rubik', sans-serif;
    font-size: 1.8rem;
    line-height: 2.1rem;
    font-weight: 400;
}

.text--p5-medium {
    font-family: 'Rubik', sans-serif;
    font-size: 1.8rem;
    line-height: 2.1rem;
    font-weight: 500;
}

.text--p6 {
    font-family: 'Rubik', sans-serif;
    font-size: 1.5rem;
    line-height: 1.8rem;
    font-weight: 400;
}

/*  =================================================
    Base Styles
    =================================================   */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 8rem 0;
  background-color: var(--navy-950);
  color: var(--white);
}

.dashboard {
  display: grid;
  gap: var(--spacing-300);
  width: 87%;
  max-width: 45.0rem;
}

.profile-card {
  background-color: var(--navy-900);
  border-radius: 1.5rem;
}

.profile-card__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
}

.profile-card__info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-300);
  padding: var(--spacing-400);
  background-color: var(--purple-600);
  border-radius: 1.5rem;
}

.profile-card__picture{
  width: 6.4rem;
  height: 6.4rem;
  border: 3px solid var(--white);
  border-radius: 50%;
}

.profile-card__name {
  font-family: 'Rubik', sans-serif;
  font-size: 2.4rem;
  line-height: 2.8rem;
  font-weight: 300;
}

.profile-card__container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
}

.text--p6--color {
  color: var(--navy-200);
}

.profile-card__options {
  display: flex;
  justify-content: space-around;
  padding-bottom: 2.4rem;
}

.profile-card__option {
  border: none;
  padding: 0;
  color: var(--purple-500);
  background-color: transparent;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.profile-card__option--active,
.profile-card__option:hover {
  color: var(--white);
}

.activity-card {
  position: relative;
  overflow: hidden;
  padding-top: 4.5rem;
  border-radius: 1.5rem;
}

.activity-card__picture {
  position: absolute;
  top: -1rem;
  right: 1.5rem;
}

.activity-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
  position: relative;
  z-index: 1;
  padding: var(--spacing-300);
  background-color: var(--navy-900);
  border-radius: 1.5rem;
  transition: background-color .2s ease-in;
}

.activity-card__info:hover {
  background-color: var(--navy-800);
}

.activity-card__top-row {
  display: flex;
  justify-content: space-between;
}

.activity-card__menu {
  padding: 0;
  background-color: transparent;
  border: none;
}

.activity-card__time {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-card__hours {
  font-family: 'Rubik', sans-serif;
  font-size: 3.2rem;
  line-height: 3.8rem;
  font-weight: 300;
}

.activity-card--work {
  background-color: var(--orange);
}

.activity-card--play {
  background-color: var(--blue);
}

.activity-card__picture--play {
  top: -.5rem;
  right: 2rem;
  width: 9rem;
  height: 9rem;
}

.activity-card--study {
  background-color: var(--pink);
}

.activity-card__picture--study {
  top: -0.5rem;
  right: 2rem;
}

.activity-card--exercise {
  background-color: var(--green);
}

.activity-card__picture--exercise {
  top: 0;
  right: 2rem;
}

.activity-card--social {
  background-color: var(--purple-700);
}

.activity-card__picture--social {
  top: -0.8rem;
  right: 2rem;
}

.activity-card--self-care {
  background-color: var(--yellow);
}

.activity-card__picture--self-care {
  top: -0.8rem;
  right: 2rem;
  width: 7.2rem;
  height: 6.6rem;
}

/*  =================================================
    Tablet Styles
    =================================================   */
@media (min-width: 768px) {

  body {
    padding: 0;
  }

  .dashboard {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    max-width: 61.2rem;
  }

  .profile-card {
    grid-column: 1 / 4;
  }

  .profile-card__info {
    justify-content: flex-start;
  }

  .profile-card__options {
    justify-content: space-evenly;
    padding-bottom: 3rem;
  }

  .activity-card__info {
    gap: var(--spacing-200);
  }

  .activity-card__time {
    flex-direction: column;
    gap: var(--spacing-100);
  }

  .activity-card__hours {
    font-size: 5.6rem;
    line-height: 6.6rem;
    font-weight: 300;
  }
}
/*  =================================================
    Desktop Styles
    =================================================   */
@media (min-width: 1440px) {
  .dashboard {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    max-width: 111.6rem;
  }
  
  .profile-card {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  .profile-card__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
  }

  .profile-card__picture {
    width: 7.8rem;
    height: 7.8rem;
  }

  .profile-card__name {
    font-size: 4.0rem;
    line-height: 4.7rem;
  }

  .profile-card__options {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.1rem;
    padding: 0 3.2rem;
    height: 10.6rem;
  }

}