* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Rubik", sans-serif;
  background-color: #0e1323;

  display: flex;
  justify-content: center;
}

/* IMAGES */

.pfp-img {
  width: 64px;
  height: 64px;
  border: 3px solid #fff;
  border-radius: 50%;
}

.work-icon {
  position: absolute;
  top: -10.91px;
  left: 230.58px;
}

.play-icon {
  position: absolute;
  top: -10px;
  left: 226px;
}

.study-icon {
  position: absolute;
  top: -6.05px;
  left: 231.93px;
}

.exercise-icon {
  position: absolute;
  top: -0.42px;
  left: 229.72px;
}

.social-icon {
  position: absolute;
  top: -15px;
  left: 239.92px;
}

.selfcare-icon {
  position: absolute;
  top: -16px;
  left: 245px;
}

/* TYPOGRAPHY */

.sub-heading,
.previous {
  font-size: 0.938rem;
  font-weight: 400;
  line-height: 18px;
  color: #bbc0ff;
}

.sub-heading,
h1 {
  margin: 0;
}

h1,
.current {
  font-weight: 300;
}

h1 {
  font-size: 1.5rem;
  line-height: 28px;
  margin-top: 0.5rem;
  color: #fff;
}

.timeframe,
.activity-header p {
  font-size: 1.125rem;
  line-height: 21px;
}

.timeframe {
  font-weight: 400;
  margin: 0;
  color: #7078c9;
}

/* .active {
  color: #fff;
} */

.activity-header p {
  font-weight: 500;
  color: #fff;
}

.current {
  font-size: 2rem;
  line-height: 38px;
  color: #fff;
}

.activity-header p,
.current,
.previous {
  margin: 0;
}

/* LAYOUT */

main {
  max-width: 20.438rem;
  padding: 48px 0;

  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.user-timeframe-wrapper,
.activity-bg {
  background-color: #1c204b;
}

.user-timeframe-wrapper,
.user-container {
  border-radius: 15px;
}

.user-timeframe-wrapper {
  padding-bottom: 1.563rem;
}

.user-timeframe-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.user-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  background-color: #5747ea;
}

.timeframe-selector {
  display: flex;
  justify-content: space-around;
}

.bg,
.activity-bg {
  border-radius: 0.938rem;
}

.bg {
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
}

.activity-bg {
  width: 100%;
  position: absolute;
  top: 45px;
  padding: 1.5rem;
}

.work-bg {
  background-color: #ff8b64;
}

.play-bg {
  background-color: #55c2e6;
}

.study-bg {
  background-color: #ff5e7d;
}

.exercise-bg {
  background-color: #4bcf82;
}

.social-bg {
  background-color: #7335d2;
}

.selfcare-bg {
  background-color: #f1c75b;
}

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

.activity-header {
  margin-bottom: 0.5rem;
}

/* MEDIA QUERIES */

/* TABLET */

@media (min-width: 768px) {
  /* IMAGES */

  .work-icon {
    width: 57.48px;
    height: 57.48px;
    top: -8.04px;
    left: 117.61px;
  }

  .play-icon {
    width: 66.33px;
    height: 66.33px;
    top: -10.61px;
    left: 113.53px;
  }

  .study-icon {
    width: 57.48px;
    height: 57.48px;
    top: -4.46px;
    left: 117.94px;
  }

  .exercise-icon {
    width: 58.7px;
    height: 39.41px;
    top: -0.31px;
    left: 116.24px;
  }

  .social-icon {
    width: 54.24px;
    height: 73.7px;
    top: -11.05px;
    left: 123.79px;
  }

  .selfcare-icon {
    width: 53.06px;
    height: 48.64px;
    top: -10px;
    left: 125px;
  }

  /* TYPOGRAPHY */

  .current {
    font-size: 3.5rem;
    line-height: 66px;
  }

  /* LAYOUT */

  body {
    align-items: center;
    height: 100vh;
  }

  main {
    max-width: 38.25rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .user-timeframe-wrapper {
    grid-column: span 3;
  }

  .timeframe-selector {
    justify-content: center;
    gap: 0.5rem;
  }

  .timeframe {
    padding: 0 28px;
  }

  .bg {
    width: 11.75rem;
    height: 13.313rem;
  }

  .activity-bg {
    top: 36px;
  }

  .activity-header {
    margin-bottom: 1rem;
  }

  .activity-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* DESKTOP */

@media (min-width: 1440px) {
  /* IMAGES */

  .pfp-img {
    width: 78px;
    height: 78px;
  }

  .work-icon {
    width: 78px;
    height: 78px;
    top: -10.91px;
    left: 159.58px;
  }

  .play-icon {
    width: 90px;
    height: 90px;
    top: -10px;
    left: 147px;
  }

  .study-icon {
    width: 78px;
    height: 78px;
    top: -6.05px;
    left: 159.93px;
  }

  .exercise-icon {
    width: 79.65px;
    height: 53.48px;
    top: -0.42px;
    left: 157.72px;
  }

  .social-icon {
    width: 73.6px;
    height: 100px;
    top: -15px;
    left: 167.92px;
  }

  .selfcare-icon {
    width: 72px;
    height: 66px;
    top: -12px;
    left: 170px;
  }

  /* TYPOGRAPHY */

  h1 {
    font-size: 2.5rem;
    line-height: 47px;
    margin-top: 0;
  }

  /* LAYOUT */

  main {
    max-width: 69.75rem;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .user-timeframe-wrapper {
    grid-column: 1;
    grid-row: span 2;
    padding-bottom: 2rem;
  }

  .user-timeframe-container {
    gap: 2rem;
  }

  .user-container {
    flex-direction: column;
    align-items: unset;
    gap: 2.5rem;
    padding: 2rem 5.313rem 5.75rem 2rem;
  }

  span {
    display: block;
  }

  .timeframe-selector {
    flex-direction: column;
    gap: 1.313rem;
  }

  .bg {
    width: 15.938rem;
    height: 15.25rem;
  }

  .activity-bg {
    top: 43px;
    padding: 2rem;
  }

  .activity-header {
    margin-bottom: 1.5rem;
  }
}

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