@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;1,300&display=swap');

:root {
  --main-font: 'Rubik', sans-serif;
  --primary-bg: hsl(226, 43%, 10%);
  --secondary-bg: hsl(235, 46%, 20%);

}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* padding: 0 0 2em; */
}

p {
  margin: 0;
}

img,
.category > span,
.duration > span,
.activity__icon,
.frequency-container > span,
.user-info > span {
  display: block;
}

.curved-border {
  border-radius: .9em;
}

.avatar-container { 
  /* display: inline-block;  */
  /* display: block;  */
  width: 33%;
  min-width: 80px;
  max-width: 150px;
}

.primary-bg {
  background-color: var(--primary-bg);
}

.secondary-bg {
  background-color: var(--secondary-bg);
}

/* typography */
.tracker__owner {
  font-size: 1.2em;
}

.report-for { color: hsl(236, 100%, 87%); }

.frequency-container > span {
  color: hsl(235, 45%, 61%);
}

.activity,
.hrs,
.tracker__owner,
.frequency-container > span:hover {
  color: white;
}

.activity { font-size: 18px; }
.hrs { font-size: 2em; }
.last { 
  font-size: .8em;
  color: hsl(236, 100%, 87%); 
}

.frequency-container > span { font-size: 1.1em; }
.frequency-container > span:hover,
.activity-content:hover {
  cursor: pointer;
}

.frequency-container > span.active {
  color: white;
}

footer {
  text-align: center;
  font-family: var(--main-font);
  font-size: .75rem;
  color: hsl(236, 38%, 91%);
}

footer > a {
  color: hsl(236, 100%, 87%);
  text-decoration: none;
}
footer > a:hover { text-decoration: underline; }


/* general */
main {
  font-family: var(--main-font);
  padding: 2em;
}

.grid-container {
  /* padding: 2em 2em 6em; */
  display: grid;
}

.user-container {
  margin-bottom: 6.3em;
  position: relative;
}

.user-bar {
  padding: 1.5em 2em;
  position: relative;
  z-index: 5;

  background-color: hsl(246, 80%, 60%);
  display: flex;
  gap: 0 1.5em;
}

.frequency-container {
  padding: 2.8em 2em 2em;
  position: absolute;
  bottom: -5em;
  z-index: 1;
  width: 100%;

  display: flex;
  justify-content: space-between;
}

.avatar {
  border: .2em white solid;
  border-radius: 100%;

  width: 100%;
}

.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5em 0;
}

/* ----------activity-------- */
.main-activity-container {
  display: grid;
}

.activity-container {
  position: relative;
  margin-bottom: 7.5em;
}

.activity-bar { 
  padding: 0 2em;
  height: 5em;
  position: relative;
  overflow: hidden;
}

.activity__icon {
  position: absolute;
  right: 2em;
  top: -.9em;
}

.activity__icon.exer {
  top: -.4em;
}

.activity-content {
  padding: 1.8em 1.4em;
  /* padding: 2em; */
  position: absolute;
  width: 100%;
  top: 2.3em;
}


.category,
.duration {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category { margin-bottom: 1em; }

.activity-container.work > .activity-bar  { background-color: hsl(15, 100%, 70%); }
.activity-container.play > .activity-bar { background-color: hsl(195, 74%, 62%); }
.activity-container.study > .activity-bar { background-color: hsl(348, 100%, 68%); }
.activity-container.exercise > .activity-bar { background-color: hsl(145, 58%, 55%); }
.activity-container.social > .activity-bar { background-color: hsl(264, 64%, 52%); }
.activity-container.self-care > .activity-bar  { background-color: hsl(43, 84%, 65%); }

.activity-content:hover {
  background-color: hsl(236, 36%, 30%)
}

.exercise > .activity-bar > .activity__icon {
  /* position: relative;
  top: -.4em;
  left: 0; */
}


@media screen and (min-width:1000px) {
  body { 
    height: 100vh;
    padding-bottom: 3em;
  }
  main { 
    height: 100%;
    padding: 0 8em 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .grid-container {
    /* max-width: 1100px; */
    grid-template-columns: 1fr 3.5fr;
    gap: 0 1.5em;
  }

  .main-activity-container {
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: minmax(200px, 500px); */
    gap: 1.4em 1.5em;
  }

  /* typography */
  .tracker__owner { font-size: 1.8em; }
  .hrs { font-size: 2em; }
  .last { font-size: .8em; }
  .frequency-container > span { font-size: 1.1em; }


  /* design */
  .user-container {
    margin-bottom: 0;
    /* grid-row: 1 /4 ; */
  }

  .user-bar { 
    padding: 1.5em 1.5em 3.1em;
  }

  .frequency-container {
    padding: 3.5em 1.5em 1.5em;
    bottom: 0;
  }

  .user-bar,
  .frequency-container {
    flex-direction: column;
    gap: 1em 0;
  }

  /* activity */
  .activity-container {
    margin-bottom: 7.2em;
  }

  .category { margin-bottom: 1em; } 
  .duration {
    flex-direction: column;
    /* justify-content: start; */
    align-items: start;
    gap: .5em;
  }

}

@media screen and (min-width:1300px) {
  /* typography */
  .tracker__owner { font-size: 2em; }
  .hrs { font-size: 2.5em; }
  .last { font-size: 1.1em; }
  .frequency-container > span { font-size: 1.2em; }

  /* general */
  .grid-container {
    grid-template-columns: 1fr 3.5fr;
    gap: 0 1.5em;
  }

  .main-activity-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5em 1.8em;
  }

  .frequency-container {
    bottom: -1.31em;
    padding: 6em 2em 2.5em;
  }

  .activity-content {
    padding: 2em;
  }

  /* .category { margin-bottom: 2em; } */
}

@media screen and (min-width:1544px) {
  .tracker__owner { font-size: 2.3em; }

  .user-bar {
    padding-bottom: 3.5em;
  }
}