main.css

/* Tasktive Color palate

#AC2968
#000000
#FFFFFE
#7189BC

*/
body{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: cursive;
}
button, input{
  font-family: cursive;
}
a{
  font-style: normal;
  text-decoration: none;
  color: #7189BC;
}
/* ----------------------- */
/* main app container style */
.app-main-container{
  background-color: #7189BC;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-size: 2.5vh;
  position: relative;
  overflow: hidden;

}
.my-task-app-container{
  background-color: #ffff;
  width: 75vh;
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 2vh;
  margin: 2vh 0vh;
}
/* header start */
.header{
  background-color: #fff;
  width: 72vh;
  height: 15vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.website-main-title{
  /* background-color: brown; */
  width: 50vh;
  height: 8vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vh;
  text-transform: capitalize;
}
.add-new-task-btn{
  width: 25vh;
  height: 5vh;
  text-transform: uppercase;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #AC2968;
  border-radius: 2vh;
  margin-bottom: 1vh;
  font-size: 2vh;
  color: #fff;


}
/* header end */

/* Modal start */
.modal-container{
  background-color: #ffff;
  width: 100%;
  height: 105vh;
  position: absolute;
  z-index: 1;
  /* ------------------------ */
  /* change display to flex in js */
  display: none;
  /* ------------------------ */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}

.modal{
  /* background-color: chartreuse; */
  width: 70vh;
  height: 60vh;
  display: flex;
  align-items: center;
  flex-direction: column; 
  position: relative; 
  justify-content: center;

}
.modal-close-btn{
  /* background-color: bisque; */
  width: 5vh;
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  user-select: none;
  font-size: 5vh;
  font-family: sans-serif;
  color: #000;
  opacity: 0.5;
}
.modal-content{
  width: 50vh;
  height: 50vh;
  background-color: #AC2968;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  color: #ffff;
  border-radius: 2vh;
}
.modal-title{
  font-size: 3vh;
  text-align: center;
  text-transform: capitalize;
}
.modal-input{
  background-color: #ffff;
  outline: none;
  border: none;
  width: 40vh;
  height: 5vh;
  margin: 5vh;
  padding: 1vh 2vh;
  font-size: 2.5vh;
  border-radius: 2vh;
}
.submit-new-task{
  display: flex;
  width: 25vh;
  height:5vh;
  padding: 2vh;
  border: none;
  outline: none;
  justify-content: center;
  align-items: center;
  font-size: 2vh;
  text-transform: uppercase;
  border: 0.5vh solid #c1c1c1;
  background-color: #ffff;
  border-radius: 2vh;
  cursor: pointer;
  color:#000;
}
/* Modal end */

/* task column body start */
.body{
  background-color: #fff;
  width: 72vh;
  height: 72vh;
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.task-column{
  background-color: #fff;
  width: 70vh;
  height: 70vh;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.task-status-column{
  width: 22vh;
  background-color: whitesmoke;
  height: 68vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

}
.column-title{
  background-color: #cfcfcf;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22vh;
  height: 6vh;
  text-transform: capitalize;
}
.task-container{
  background-color: #AC2968;
  color: #fff;
  width: 20vh;
  height: 12vh;
  margin-top: 2vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  justify-content: space-evenly;
  border-radius: 2vh;
}
.remove-task-btn{
  width: 4vh;
  height: 4vh;
  position: absolute;
  left: 0;
  top: 0;
  background-color: transparent;
  border: none;
  user-select: none;
  cursor: pointer;
  color: #fff;
  font-size: 3vh;
  font-family: sans-serif;
  opacity: 0.8;

}
.task-inner-text{
  /* background-color: #fff; */
  width: 18vh;
  height: 10vh;
  font-size: 2vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding-left: 1vh;
  color: #fff;
  font-size: 2vh;
}
/* task column body end */
/* footer section */
.footer{
  /* background-color: #fff; */
  width: 75vh;
  height: 4vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: smaller;
  font-weight: lighter;
}
.footer > a{
  color: #fff;
  text-decoration: underline;
  margin: 0vh 0.5vh;
  cursor: pointer;
  
}

/* end of style */