:root {
  /* Font variables */
  --text-preset-1-font-family:
    "Rubik-light", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --text-preset-1-font-size: 5.6rem;
  --text-preset-1-line-height: 6.6rem;
  --text-preset-1-letter-spacing: 0rem;

  --text-preset-2-font-family:
    "Rubik-light", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --text-preset-2-font-size: 4rem;
  --text-preset-2-line-height: 4.7rem;
  --text-preset-2-letter-spacing: 0rem;

  --text-preset-3-font-family:
    "Rubik-light", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --text-preset-3-font-size: 3.2rem;
  --text-preset-3-line-height: 3.8rem;
  --text-preset-3-letter-spacing: 0rem;

  --text-preset-4-font-family:
    "Rubik-light", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --text-preset-4-font-size: 2.4rem;
  --text-preset-4-line-height: 2.8rem;
  --text-preset-4-letter-spacing: 0rem;

  --text-preset-5-medium-font-family:
    "Rubik-medium", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --text-preset-5-medium-font-size: 1.8rem;
  --text-preset-5-medium-line-height: 2.1rem;
  --text-preset-5-medium-letter-spacing: 0rem;

  --text-preset-5-regular-font-family:
    "Rubik-regular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --text-preset-5-regular-font-size: 1.8rem;
  --text-preset-5-regular-line-height: 2.1rem;
  --text-preset-5-regular-letter-spacing: 0rem;

  --text-preset-6-font-family:
    "Rubik-regular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --text-preset-6-font-size: 1.5rem;
  --text-preset-6-line-height: 1.8rem;
  --text-preset-6-letter-spacing: 0rem;

  /* Color variables */
  --color-white: hsl(0, 100%, 100%);
  --color-black: hsl(0, 0%, 0%);
  --color-navy-950: hsl(226, 43%, 10%);
  --color-navy-900: hsl(235, 46%, 20%);
  --color-navy-800: hsl(235, 41%, 34%);
  --color-navy-200: hsl(236, 100%, 87%);
  --color-orange-300: hsl(15, 100%, 70%);
  --color-purple-500: hsl(235, 45%, 61%);
  --color-purple-600: hsl(264, 80%, 60%);
  --color-purple-700: hsl(264, 64%, 52%);
  --color-blue-300: hsl(195, 74%, 62%);
  --color-pink-400: hsl(348, 100%, 68%);
  --color-green-400: hsl(145, 58%, 55%);
  --color-yellow-300: hsl(43, 84%, 65%);
  --color-grey-200: hsl(0, 0%, 85%);
  /* Spacing variables */
  --spacing-0: 0rem;
  --spacing-100: 0.8rem;
  --spacing-200: 1.6rem;
  --spacing-300: 2.4rem;
  --spacing-400: 3.2rem;
  --spacing-500: 4rem;
}

html {
  font-size: 62.5%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-inline: 2.4rem;
  padding-block: 8.1rem;
  background-color: var(--color-navy-950);
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-300);
}
.main-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--spacing-100);
  height: 20.3rem;
  border-radius: 1.5rem;
  background-color: var(--color-navy-900);
}
.main-card-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--spacing-300);
}
.main-card-info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--spacing-100);
  height: 13.3rem;
  padding: var(--spacing-400);

  border-radius: 1.5rem;
  background-color: var(--color-purple-600);
}
.main-card-info {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-300);
}
.main-card-image {
  flex-shrink: 0;
  width: 6.4rem;
  height: 6.4rem;
  border: 0.35rem solid var(--color-white);
  border-radius: 5rem;
}
.main-card-info-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  gap: var(--spacing-100);
  padding-right: 0.2rem;
}
.main-card-title {
  color: var(--color-navy-200);
  font-feature-settings:
    "liga" off,
    "clig" off;

  font-family: var(--text-preset-6-font-family);
  font-size: var(--text-preset-6-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-preset-6-line-height);
}
.main-card-header {
  color: var(--color-white);
  font-feature-settings:
    "liga" off,
    "clig" off;

  font-family: var(--text-preset-4-font-family);
  font-size: var(--text-preset-4-font-size);
  font-style: normal;
  font-weight: 300;
  line-height: var(--text-preset-4-line-height);
}
.timeframe-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-0);
}

.timeframe-selector p {
  width: 10.9rem;
  text-align: center;
  color: var(--color-white);
  font-feature-settings:
    "liga" off,
    "clig" off;

  font-family: var(--text-preset-5-regular-font-family);
  font-size: var(--text-preset-5-regular-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-preset-5-regular-line-height);
}
.timeframe-selector p:hover {
  cursor: pointer;
}
/* Styling the time frame selector */
.timeFrameSelector[data-selected="true"] {
  color: var(--color-white);
  transition: color ease 0.5s;
}
.timeFrameSelector[data-selected="false"] {
  color: var(--color-purple-500);
  transition: color ease 0.5s;
}
/* Stlying for all cards container */
.all-cards-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: var(--spacing-300);
}
/*Styling for three cards */
.three-cards-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--spacing-300);
}

/* Other cards common styles */
.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-100);
  height: 16rem;
  position: relative;
}
.card-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1.5rem;
  z-index: -1;
  overflow: hidden;
}
/* Uncommon card styles */
.work-card-wrapper {
  background-color: var(--color-orange-300);
}
.play-card-wrapper {
  background-color: var(--color-blue-300);
}
.study-card-wrapper {
  background-color: var(--color-pink-400);
}
.exercise-card-wrapper {
  background-color: var(--color-green-400);
}
.social-card-wrapper {
  background-color: var(--color-purple-700);
}
.selfCare-card-wrapper {
  background-color: var(--color-yellow-300);
}
.card-icon {
  position: absolute;
  top: -10.91px;
  right: 17.42px;
}
.card-info-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  gap: var(--spacing-100);
  padding: var(--spacing-300);
  height: 12.2rem;

  border-radius: 1.5rem;
  background-color: var(--color-navy-900);
}
.card-info-wrapper:hover {
  cursor: pointer;
  background-color: var(--color-navy-800);
}
.card-info-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--spacing-100);
  align-self: stretch;
}
/*Both of them share same design*/
.card-header,
.card-state {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.card-title {
  color: var(--color-white);
  font-feature-settings:
    "liga" off,
    "clig" off;

  font-family: var(--text-preset-5-medium-font-family);
  font-size: var(--text-preset-5-medium-font-size);
  font-style: normal;
  font-weight: 500;
  line-height: var(--text-preset-5-medium-line-height);
}

.current-hours {
  color: var(--color-white);
  font-feature-settings:
    "liga" off,
    "clig" off;

  font-family: var(--text-preset-3-font-family);
  font-size: var(--text-preset-3-font-size);
  font-style: normal;
  font-weight: 300;
  line-height: var(--text-preset-3-line-height);
}
.last-hours {
  color: var(--color-navy-200);
  font-feature-settings:
    "liga" off,
    "clig" off;

  font-family: var(--text-preset-6-font-family);
  font-size: var(--text-preset-6-font-size);
  font-style: normal;
  font-weight: 300;
  line-height: var(--text-preset-6-line-height);
}
.footer {
  .attribution {
    font-size: 11px;
    text-align: center;
    color: var(--color-white);
  }
  .attribution a {
    color: var(--color-orange-300);
  }
}