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

html {
  font-family: "Rubik";
}

body {
  display: grid;
  min-height: 100vh;
  place-content: center;
  background-color: #0e1323;
  color: #fff;
  padding-inline: 24px;
}

main {
  margin-block: 64px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 32px;
}

.profile {
  background-color: #1c204b;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.profile-heading {
  font-size: 15px;
  font-weight: 400;
  color: #bbc0ff;
}

.profile-name {
  font-size: 24px;
  font-weight: 300;
  color: #fff;
}

.profile-info {
  background-color: #5747ea;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 40px;
  padding-block: 32px;
  gap: 16px;
}

.profile-image {
  max-inline-size: 100%;
  block-size: auto;
  border-radius: 50%;
  border: 3px solid #fff;
}

.profile-time {
  background-color: #1c204b;
}

.profile-data {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-times {
  list-style: none;
  padding-inline: 40px;
  padding-block: 40px;
  display: flex;
  justify-content: space-between;
  color: #7078c9;
  font-size: 18px;
  font-weight: 400;
}

.time {
  cursor: pointer;
}

.time:hover {
  color: #fff;
}

.active {
  color: #fff;
}

.tracks-container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 24px;
}

.tracking-container-Work {
  background-color: #ff8b64;
  background-image: url("/images/icon-work.svg");
  background-repeat: no-repeat;
  background-position: top right;
  padding-block-start: 72px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}
.tracking-container-Work .tracking-bottom {
  background-color: #1c204b;
  border-radius: 15px;
  margin-top: -24px;
  padding: 32px;
}
.tracking-container-Work .tracking-icon {
  margin-left: auto;
  margin-inline-end: 16px;
  margin-block-start: -8px;
}
.tracking-container-Work .options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tracking-container-Work .results {
  margin-block-start: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1440px) {
  .tracking-container-Work .results {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tracking-container-Work .results h2 {
    font-size: 48px;
    font-weight: 300;
  }
  .tracking-container-Work .options span {
    font-size: 18px;
    font-weight: 500;
  }
  .tracking-container-Work .results span {
    font-size: 18px;
    font-weight: 400;
  }
  .tracking-container-Work .tracking-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.tracking-container-Play {
  background-color: #55c2e6;
  background-image: url("/images/icon-play.svg");
  background-repeat: no-repeat;
  background-position: top right;
  padding-block-start: 72px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}
.tracking-container-Play .tracking-bottom {
  background-color: #1c204b;
  border-radius: 15px;
  margin-top: -24px;
  padding: 32px;
}
.tracking-container-Play .tracking-icon {
  margin-left: auto;
  margin-inline-end: 16px;
  margin-block-start: -8px;
}
.tracking-container-Play .options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tracking-container-Play .results {
  margin-block-start: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1440px) {
  .tracking-container-Play .results {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tracking-container-Play .results h2 {
    font-size: 48px;
    font-weight: 300;
  }
  .tracking-container-Play .options span {
    font-size: 18px;
    font-weight: 500;
  }
  .tracking-container-Play .results span {
    font-size: 18px;
    font-weight: 400;
  }
  .tracking-container-Play .tracking-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.tracking-container-Study {
  background-color: #ff5e7d;
  background-image: url("/images/icon-study.svg");
  background-repeat: no-repeat;
  background-position: top right;
  padding-block-start: 72px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}
.tracking-container-Study .tracking-bottom {
  background-color: #1c204b;
  border-radius: 15px;
  margin-top: -24px;
  padding: 32px;
}
.tracking-container-Study .tracking-icon {
  margin-left: auto;
  margin-inline-end: 16px;
  margin-block-start: -8px;
}
.tracking-container-Study .options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tracking-container-Study .results {
  margin-block-start: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1440px) {
  .tracking-container-Study .results {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tracking-container-Study .results h2 {
    font-size: 48px;
    font-weight: 300;
  }
  .tracking-container-Study .options span {
    font-size: 18px;
    font-weight: 500;
  }
  .tracking-container-Study .results span {
    font-size: 18px;
    font-weight: 400;
  }
  .tracking-container-Study .tracking-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.tracking-container-Exercise {
  background-color: #4bcf82;
  background-image: url("/images/icon-exercise.svg");
  background-repeat: no-repeat;
  background-position: top right;
  padding-block-start: 72px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}
.tracking-container-Exercise .tracking-bottom {
  background-color: #1c204b;
  border-radius: 15px;
  margin-top: -24px;
  padding: 32px;
}
.tracking-container-Exercise .tracking-icon {
  margin-left: auto;
  margin-inline-end: 16px;
  margin-block-start: -8px;
}
.tracking-container-Exercise .options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tracking-container-Exercise .results {
  margin-block-start: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1440px) {
  .tracking-container-Exercise .results {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tracking-container-Exercise .results h2 {
    font-size: 48px;
    font-weight: 300;
  }
  .tracking-container-Exercise .options span {
    font-size: 18px;
    font-weight: 500;
  }
  .tracking-container-Exercise .results span {
    font-size: 18px;
    font-weight: 400;
  }
  .tracking-container-Exercise .tracking-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.tracking-container-Social {
  background-color: #7335d2;
  background-image: url("/images/icon-social.svg");
  background-repeat: no-repeat;
  background-position: top right;
  padding-block-start: 72px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}
.tracking-container-Social .tracking-bottom {
  background-color: #1c204b;
  border-radius: 15px;
  margin-top: -24px;
  padding: 32px;
}
.tracking-container-Social .tracking-icon {
  margin-left: auto;
  margin-inline-end: 16px;
  margin-block-start: -8px;
}
.tracking-container-Social .options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tracking-container-Social .results {
  margin-block-start: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1440px) {
  .tracking-container-Social .results {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tracking-container-Social .results h2 {
    font-size: 48px;
    font-weight: 300;
  }
  .tracking-container-Social .options span {
    font-size: 18px;
    font-weight: 500;
  }
  .tracking-container-Social .results span {
    font-size: 18px;
    font-weight: 400;
  }
  .tracking-container-Social .tracking-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.tracking-container-Self-Care {
  background-color: #f1c75b;
  background-image: url("/images/icon-self-care.svg");
  background-repeat: no-repeat;
  background-position: top right;
  padding-block-start: 72px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}
.tracking-container-Self-Care .tracking-bottom {
  background-color: #1c204b;
  border-radius: 15px;
  margin-top: -24px;
  padding: 32px;
}
.tracking-container-Self-Care .tracking-icon {
  margin-left: auto;
  margin-inline-end: 16px;
  margin-block-start: -8px;
}
.tracking-container-Self-Care .options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tracking-container-Self-Care .results {
  margin-block-start: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1440px) {
  .tracking-container-Self-Care .results {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tracking-container-Self-Care .results h2 {
    font-size: 48px;
    font-weight: 300;
  }
  .tracking-container-Self-Care .options span {
    font-size: 18px;
    font-weight: 500;
  }
  .tracking-container-Self-Care .results span {
    font-size: 18px;
    font-weight: 400;
  }
  .tracking-container-Self-Care .tracking-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

@media screen and (min-width: 1440px) {
  main {
    grid-template-columns: repeat(4, 1fr);
    max-inline-size: 1100px;
    margin-inline: auto;
    gap: 24px;
  }
  .tracks-container {
    grid-column: 2/-1;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 24px;
  }
  .profile-info {
    flex-direction: column;
    align-items: start;
    gap: 40px;
    padding-inline-start: 24px;
    padding-block-end: 64px;
  }
  .profile-name {
    font-size: 40px;
  }
  .profile-times {
    flex-direction: column;
    gap: 24px;
  }
}

/*# sourceMappingURL=style.css.map */