@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;400;500&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--black);
  font-family: "Outfit", serif;
}
html,
body {
  --black: #19151f;
  --white: #fff;
  --offwhite: #f3f3f3;
  --brown: #dcbb9f;
  --grey: #b6b6b6;
  --red: #f57790;
  --lightgreen: #97cb99;
  --darkgreen: #0c2e10;

  height: 100%;
}

/* Grid */
#container {
  width: 100%;
  height: 100%;
}
.grid {
  display: grid;
  grid-template-columns: repeat(20, calc(5% - 1em));
  grid-template-rows: repeat(20, calc(5% - 1em));
  gap: 1rem;
  padding: 1rem;
  padding-right: 0;
}

/* Utils */
button {
  padding: 15px 30px;
  border: none;
  font-size: 1.2rem;
  font-weight: 400;
  cursor: pointer;
}
.btn-light {
  background-color: var(--offwhite);
}
.btn-dark {
  background-color: var(--black);
  color: var(--white);
}
.input {
  margin: 15px 0;
}
.input > label {
  font-size: 1.2rem;
}
.input > input {
  background-color: var(--offwhite);
  outline: none;
  border: none;
  padding: 20px;
  width: 100%;
  font-size: 1.1rem;
}
h1 {
  font-size: 2.5rem;
  font-weight: 400;
}
h2 {
  font-size: 2.5rem;
  font-weight: 400;
}
h3 {
  font-size: 2.2rem;
  font-weight: 400;
}
h4 {
  font-size: 2rem;
  font-weight: 400;
}
h5 {
  font-size: 1.8rem;
  font-weight: 500;
}
h6 {
  font-size: 1.6rem;
  font-weight: 500;
}
.hero {
  font-size: 1.3rem;
  line-height: 3rem;
  font-weight: 300;
}
.lead {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 2rem;
}
.grey {
  color: var(--grey);
}

/* Widget Styling */
.widget {
  background-color: var(--white);
  box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

/* Account widget */
#account {
  grid-column: 1/7;
  grid-row: 1/18;
}
#account > img {
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
  object-fit: cover;
  object-position: center top;
}
#account button {
  width: 100%;
}

/* Weather widget */
#weather {
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  grid-column: 1/7;
  grid-row: 18/21;
}
#weather > button {
  font-size: 1.7rem;
  background-color: var(--offwhite);
  padding: 10px 15px;
  border-radius: 50%;
  box-shadow: 0 5px 10px 3px rgba(0, 0, 0, 0.3);
}
#weather > i {
  font-size: 1.4rem;
  border: 1px solid var(--grey);
  border-radius: 50%;
  padding: 2px 5px;
  cursor: pointer;
}

/* Payment Widget */
#payment {
  grid-column: 7/13;
  grid-row: 1/7;
}
#payment i {
  position: relative;
}
#payment i::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 3px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: var(--red);
}
#payment > h4 {
  display: flex;
  justify-content: space-between;
}
#payment > p {
  margin-top: 20px;
}

/* Current Widget */
#current {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-column: 7/13;
  grid-row: 7/10;
}
#current i,
#user > i {
  font-size: 2rem;
}
#current p,
#user > span {
  font-size: 1.2rem;
}

/* Time Widget */
#time {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  grid-column: 7/13;
  grid-row: 10/21;
}
#time div {
  background-color: var(--offwhite);
  box-shadow: 8px -9px 39px 0px rgba(0, 0, 0, 0.2);
  height: 250px;
  width: 250px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#time > div > div {
  height: 200px;
  width: 200px;
  flex-direction: column;
  border: 5px solid var(--brown);
}
#time h1 {
  color: var(--brown);
}
#time p {
  position: absolute;
  bottom: 40px;
  font-size: 1.2rem;
}

/* Health Widget */
#glucose,
#pressure {
  grid-column: 13/17;
}

#temperature,
#sleep {
  grid-column: 17/21;
}
#glucose,
#temperature {
  grid-row: 1/9;
}
#pressure,
#sleep {
  grid-row: 9/18;
}
.health-widget > .main-icon {
  color: var(--brown);
  font-size: 3.5rem;
}
.health-widget > h5 {
  margin-top: 20px;
}
.health-widget > span {
  display: block;
  font-weight: 400;
}
.health-widget > p {
  margin-top: 10px;
  margin-bottom: 15px;
}

/* Upload Widget */
#upload {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  grid-column: 13/21;
  grid-row: 18/21;
}
#upload > span:nth-of-type(1) {
  display: inline-block;
  font-size: 1.7rem;
  background-color: var(--black);
  padding: 8px 12px;
  border-radius: 50%;
}
#upload > span:nth-of-type(1) > i {
  color: var(--white);
}
#upload > div {
  margin: 0 40px;
}
#upload > div > div {
  display: flex;
  align-items: center;
}
#upload > div > div > span {
  margin-left: 20px;
}
.progress {
  width: 300px;
  height: 10px;
  border-radius: 50rem;
  background-color: var(--offwhite);
  position: relative;
  overflow: hidden;
}
.progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 75%;
  background-color: var(--brown);
}
#upload > i {
  font-size: 1.75rem;
  border: 1px solid var(--grey);
  border-radius: 50%;
  padding: 0px 4px;
}

/* Travel Widget */
#travel {
  display: inline-flex;
  align-items: center;
  grid-column: 1/11;
  grid-row: 1/9;
}
#travel p {
  margin: 10px 0;
}
#travel img {
  height: 250px;
  width: 200px;
  object-fit: cover;
  margin-right: 30px;
}

/* Icons Widget */
#icons {
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 0;
  grid-column: 1/7;
  grid-row: 9/12;
}
#icons i {
  font-size: 2rem;
}

/* User Widget */
#user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-column: 7/11;
  grid-row: 9/12;
}

/* Blogs Widget */
#blogs {
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  justify-content: space-evenly;
  grid-row: 12/21;
  grid-column: 1/11;
}
.blog img {
  width: 300px;
  height: 220px;
  object-fit: cover;
}
.blog span {
  margin-right: 20px;
}
.blog:nth-of-type(3) {
  display: none;
}
/* Progress Widget */
#progress {
  height: 100%;
  grid-row: 1/21;
  grid-column: 11/16;
}
#progress img {
  width: 100%;
  object-fit: cover;
  height: 300px;
}
#progress span {
  display: inline-block;
  margin-top: 10px;
  font-size: 1.4rem;
  font-weight: 500;
}
#progress h3 {
  color: var(--brown);
}
#progress p {
  margin: 30px 0;
}
#progress .progress {
  width: 90%;
}

/* Travel Widget */
#ticket {
  display: inline-block;
  grid-row: 1/15;
  grid-column: 16/21;
}
#badge {
  display: inline-block;
  font-size: 1.2rem;
  padding: 2px 5px;
  background-color: var(--lightgreen);
  color: var(--darkgreen);
}
#ticket > h2 {
  margin: 30px 0;
}
#ticket button {
  margin: 0 4px;
  margin-top: 30px;
}

/* Map Widget */
#map {
  grid-row: 15/21;
  grid-column: 16/21;
}
#map img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}
#map p {
  margin-top: 15px;
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
}

/* Responsiveness */
@media (max-width: 1420px) {
  h1 {
    font-size: 2.3rem;
  }
  h2 {
    font-size: 2.3rem;
  }
  h3 {
    font-size: 2rem;
  }
  h4 {
    font-size: 1.8rem;
  }
  h5 {
    font-size: 1.6rem;
  }
  h6 {
    font-size: 1.4rem;
  }
  .hero {
    font-size: 1.2rem;
    line-height: 2.5rem;
  }
  .lead {
    font-size: 1.1rem;
  }
  button {
    padding: 13px 20px;
    font-size: 1rem;
  }
  .blog img {
    width: 250px;
  }
  .progress {
    width: 225px;
  }
}
@media (max-width: 1200px) {
  #account {
    grid-column: 1/8;
  }
  #pressure,
  #glucose {
    display: none;
  }
  #temperature {
    grid-column: 16/21;
    grid-row: 1/9;
  }
  #payment {
    grid-column: 8/16;
    grid-row: 13/18;
  }
  #weather {
    flex-direction: column;
    grid-column: 16/21;
    grid-row: 9/13;
    text-align: center;
  }
  #weather button {
    margin-bottom: 10px;
  }
  #weather > i {
    display: none;
  }
  #sleep {
    grid-column: 16/21;
    grid-row: 13/21;
  }
  #time {
    grid-column: 8/16;
    grid-row: 1/13;
  }
  #upload {
    grid-column: 1/10;
  }
  #current {
    grid-row: 18/21;
    grid-column: 10/16;
  }
  #travel {
    grid-row: 15/21;
    grid-column: 1/15;
  }
  #ticket .hero {
    font-size: 1.3rem;
    line-height: 3rem;
  }
  #ticket button {
    padding: 15px 30px;
    font-size: 1.4rem;
  }
  #progress .lead {
    font-size: 1.3rem;
    line-height: 3rem;
  }
  #icons {
    grid-row: 11/13;
  }
  #user {
    grid-row: 13/15;
  }
  .blog img {
    width: 220px;
  }
  #icons,
  #user {
    grid-column: 8/15;
  }
  #blogs {
    grid-row: 5/21;
    grid-column: 15/21;
    flex-direction: column;
    text-align: center;
  }
  .blog:nth-of-type(3) {
    display: block;
  }

  #ticket {
    grid-row: 1/11;
    grid-column: 8/15;
  }
  #progress {
    padding-bottom: 50px;
    grid-column: 1/8;
    grid-row: 1/15;
  }
  #map {
    grid-row: 1/5;
    grid-column: 15/21;
  }
  #map img {
    height: 70%;
  }
  .blog {
    padding: 20px;
  }
}
@media (max-width: 992px) {
  #time {
    grid-row: 1/10;
  }
  #time p {
    bottom: 30px;
  }
  #payment {
    grid-row: 10/18;
  }
  #temperature {
    grid-row: 1/7;
  }
  #weather {
    grid-row: 7/12;
  }
  #sleep {
    grid-row: 12/18;
  }
  #upload {
    grid-column: 1/13;
  }
  #current {
    grid-column: 13/21;
  }
  .input {
    margin: 30px 0;
  }
  .health-widget .main-icon {
    font-size: 2.5rem;
  }
  #progress {
    grid-column: 1/11;
    grid-row: 1/11;
  }
  #ticket {
    grid-row: 1/9;
    grid-column: 11/21;
  }
  #map {
    grid-row: 9/12;
    grid-column: 11/21;
  }
  #user {
    grid-column: 1/11;
    grid-row: 11/12;
  }
  #blogs {
    grid-row: 12/17;
    grid-column: 1/18;
    flex-direction: row;
    text-align: left;
  }
  .blog img {
    height: 250px;
    width: 270px;
  }
  .blog:nth-of-type(3) {
    display: none;
  }
  #icons {
    grid-column: 18/21;
    grid-row: 12/17;
    flex-direction: column;
  }
  #travel {
    grid-row: 17/21;
    grid-column: 1/21;
  }
}
@media (max-width: 768px) {
  #account {
    grid-row: 1/16;
    grid-column: 1/11;
  }
  #account img{
    height:120px;
  }
  .input{
    margin: 20px 0;
  }
  #time {
    grid-row: 1/9;
    grid-column: 11/21;
  }
  #time > div {
    width: 200px;
    height: 200px;
  }
  #time > div > div {
    width: 175px;
    height: 175px;
  }
  #time p{
    bottom:10px;
  }
  #payment{
    grid-row: 9/16;
    grid-column: 11/21;
  }
  #payment h4{
    font-size:1.5rem;
  }
  .health-widget{
    display:none;
  }
  #upload{
    grid-column: 1/17;
  }
  #weather{
    grid-row:16/21;
    grid-column: 17/21;
  }
  #current{
    grid-column: 1/17;
    grid-row: 16/18;
  }
  #progress{
    grid-column: 1/21;
    grid-row: 1/7;
  }
  #ticket{
    grid-row: 7/11;
    grid-column: 1/21;
  }
  #map{
    grid-row: 11/13;
    grid-column: 1/21;
  }
  #user{
    grid-row: 13/14;
    grid-column: 1/9;
  }
  #icons{
    flex-direction: row;
    grid-column: 9/21;
    grid-row: 13/14;
  }
  #blogs{
    flex-direction: column;
    text-align: center;
    grid-column: 1/12;
    grid-row: 14/21;
  }
  #travel{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    grid-row: 14/21;
    text-align: center;
    grid-column: 12/21;

  }
  #travel img{
    margin: 0;
    height:300px
  }
}
@media (max-width: 576px) {
  .grid{
    display:flex;
    flex-direction: column;
  }
  #account img{
    height:200px;
  }
  #upload >div{
    margin:0;
  }
}