:root {
  --primary-color: #5458db;
  --secondary-color: #dadada;
  --text-color: #686868;
  --heading: 30px;
  --normal-text: 24px;
}
body {
  height: 100vh;
  margin: 0;
  background: linear-gradient(
    14deg,
    #fc7475 0%,
    #fc7475 40%,
    #5458db 30%,
    #5458db 100%
  );
  display: flex;
  justify-content: center;
  align-items: end;
  font-family: Arial, Helvetica, sans-serif;
}
.container {
  width: 80vw;
  height: 84.8vh;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  overflow: auto;
}
.container::-webkit-scrollbar {
  width: 0;
}
.container::-webkit-scrollbar-thumb {
  background-color: #fc7475;
  border-radius: 10px;
}
.container::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 0 20px 0 0;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.row-1 {
  padding: 10px 40px;
  border-radius: 20px 20px 0 0;
  background-color: whitesmoke;
  border-bottom: 1px solid #c2c2c2;
}
.col-1 {
  line-height: 10px;
}
.weekday {
  font-size: var(--heading);
  color: var(--primary-color);
}

.month,
.col-2 {
  font-size: var(--normal-text);
  color: var(--text-color);
}
.icon-div {
  display: flex;
  justify-content: end;
}
.icon {
  background-color: #fc7475;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  bottom: 42px;
}
input[type="checkbox"] {
  width: 30px;
  height: 30px;
  accent-color: #fc7475;
  mix-blend-mode: normal;
  outline: none;
}
.row-2 {
  position: relative;
  bottom: 80px;
}

.col-3 {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #c2c2c2;
  padding: 20px 40px;
}
.col-3 div {
  width: 100%;
  margin-left: 15px;
}
.list-text {
  color: #c2c2c2;
  font-size: var(--heading);
}
del {
  color: #c2c2c2;
}
.list-time {
  color: #c2c2c2;
  font-size: var(--normal-text);
}
.text {
  color: #686868;
  font-size: var(--heading);
}
.time {
  color: #686868;
  font-size: var(--normal-text);
}

@media only screen and (max-width: 767px) {
  .weekday,
  .list-text ,
  .text{
    font-size: 20px;
  }
  .month,
  .col-2 ,
  .list-time,
  .time{
    font-size: 18px;
  }
  .icon {
    width: 50px;
    height: 50px;
    font-size: 40px;
    bottom: 27px;
  }
  input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
  .row-2{
    bottom: 50px;
  }
  
}
@media only screen and (max-width: 567px){
    .container{
        width: 100%;
        margin-top: 0;
        border-radius: 0;
        height: 100vh;
    }
    .row-1{
        border-radius: 0;
    }
}