@font-face {
  font-family: karla;
  src: url(./fonts-karla/Rubik/static/Rubik-Light.ttf);
}
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
body {
  background-color: hsl(226, 43%, 10%);
}
.container {
  /* background-color: red; */
  width: 80%;
  margin: 30px auto;
  gap: 10px;
  height: 50vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid1 {
  background-color: hsl(235, 46%, 20%);
  border-radius: 12px;
  height: 80%;
  /* display: grid; */
  margin-top: 20%;
}
.box1 {
  background-color: hsl(246, 80%, 60%);
  width: 100%;
  height: 60%;
  padding: 20px;
  border-radius: 12px;
}
.name {
  color: hsl(240, 12%, 90%);
  font-family: karla;
  font-size: xx-large;
}
.report {
  font-family: sans-serif;
  color: hsl(236, 39%, 72%);
  padding-top: 30px;
  font-size: smaller;
}

.man {
  width: 30%;
  /* padding: 20px; */
  /* margin: 20px; */
  border: 2px solid white;
  border-radius: 100%;
}
.timing {
  font-family: sans-serif;
  color: hsl(235, 45%, 61%);
  font-size: small;
  padding: 10px;
  padding-left: 20px;
  margin-top: 10px;
}
#preloader {
  background-color: hsl(226, 43%, 10%);
  width: 100%;
  height: 120vh;
  margin-top: -40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 10;
}
#loader {
  border: 5px solid white;
  width: 400px;
  height: 3vh;
  border-radius: 20px;
}
#loaderfill {
  background-color: hsl(235, 45%, 61%);
  width: 10px;
  height: 100%;
  border-radius: 20px;
}
.daily {
  /* color: red; */
  display: none;
}
#weak {
  color: white;
  /* display: none; */
}
.timing:hover {
  color: white;
  cursor: pointer;
}
.grid2 {
  /* background-color: yellow; */
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.grid2a {
  background-color: hsl(15, 100%, 70%);
  border-radius: 12px;
  height: 80%;
  margin-top: 20%;
}

.work {
  height: 140%;
  float: right;
}
.playtext {
  color: white;
  font-family: sans-serif;
  font-size: smaller;
}
.ellipsis {
  float: right;
}
.ellipsis:hover {
  /* color: white; */
  /* background-color: white; */
  cursor: pointer;
}
.box:hover {
  background-color: rgb(68, 68, 141);
  cursor: pointer;
}
.hrs {
  font-family: karla;
  color: white;
  font-size: xx-large;
  padding-top: 30px;
  padding-bottom: 20px;
  /* font-weight: lighter; */
}
.weekhrs {
  font-family: sans-serif;
  font-size: smaller;

  color: hsl(236, 17%, 64%);
}
.box {
  background-color: hsl(235, 46%, 20%);
  height: 85%;
  padding: 20px;
  border-radius: 12px;
}
.grid2b {
  background-color: hsl(145, 58%, 55%);
  height: 80%;
  border-radius: 12px;
}

.grid3 {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.grid3a {
  background-color: hsl(195, 74%, 62%);
  margin-top: 20%;
  border-radius: 12px;
  height: 80%;
}

.grid3b {
  background-color: hsl(264, 64%, 52%);
  border-radius: 12px;
  height: 80%;
}
.grid4 {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.grid4a {
  background-color: hsl(348, 100%, 68%);
  margin-top: 20%;
  border-radius: 12px;
  height: 80%;
}
.namephone {
  display: none;
}
.img {
  height: 15%;
  overflow: hidden;
  border-radius: 12px;
}

.grid4abox {
  background-color: green;
  height: 85%;
  border-radius: 12px;
  margin-top: 20%;
}
.grid4b {
  background-color: hsl(43, 84%, 65%);
  height: 80%;
  border-radius: 12px;
}
.attribution {
  position: fixed;
  bottom: 30px;
  left: 20px;
  color: white;
  font-family: cursive;
}
#week {
  color: white;
}
#hrdaily,
#hrdailys,
#hrmonthly,
#hrmonthlys {
  display: none;
}
@media screen and (min-width: 300px) and (max-width: 1000px) {
  .container {
    display: flex;
    flex-direction: column;
    /* gap: 0px; */
    /* background-color: purple; */
    height: auto;
    /* margin-top: 0px; */
  }
  #loader {
    width: 80%;

    /* display: none; */
  }
  #load {
    width: 80%;
  }
  .box2 {
    margin-top: 0px;
    /* background-color: red; */
    display: flex;
    height: 150px;
    flex-direction: row;
  }
  .grid1,
  .grid2a,
  .grid2b,
  .grid3a,
  .grid3b,
  .grid4a,
  .grid4b {
    height: 100%;
    /* background-color: red; */
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .box1 {
    /* margin-top: 0px; */
    display: flex;
    /* background-color: rebeccapurple; */
    height: 200px;
    gap: 20px;
    padding: 30px;
    align-items: center;
  }
  .man {
    width: 20%;
  }
  .display {
    display: flex;
    flex-direction: column;
  }
  .report {
    padding-top: 0px;
    padding-bottom: 10px;
  }
  .hrsweek {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .name {
    display: none;
  }

  .namephone {
    color: hsl(240, 12%, 90%);
    font-family: karla;
    display: flex;
    font-size: larger;
  }
  .grid2b {
    /* gap: 20px; */
    height: 35vh;
  }
  .grid2a {
    height: 35vh;
  }
  .grid3a {
    height: 35vh;
  }
  .grid3b {
    height: 35vh;
  }
  .grid4a {
    height: 35vh;
  }
  .grid4b {
    height: 35vh;
  }
}