html,body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.main{
    width:100%;
    height: 100vh;
    background-color: #4DA8DA;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-container{
    width: 45%;
    min-height: 30vh;
    background-color: white;
    border-radius: 20px;
    padding: 30px 20px;
}

.text{
    text-align: center;
    font-size: 20px;
}

.input-container{
    margin-bottom: 25px;
}

.input-container input{
    width: 83%;
    padding: 10px 15px;
    outline: none;
    font-size: 15px;
    border: none;
    background-color: #e4dddd;
    border-radius: 3px;
}

.input-container input:hover{
   border: 1px solid #4DA8DA;
   transition: all ease-out 0.2s;
}

.input-container button{
    padding: 10px 15px;
    outline: none;
    font-size: 15px;
    border: none;
    background-color: #4DA8DA;
    border-radius: 3px;
    color: white;
}

.input-container button:hover{
   border: 1px solid #4DA8DA;
   transition: all ease-out 0.2s;
}

.task-container{
    min-height: 10vh;
    max-height: 45vh;
    overflow: auto;
}

.task-container::-webkit-scrollbar{
    display: none;
}

.task{
    background-color:  #e4dddd;
    width: 96%;
    border-radius: 3px;
    padding: 1px 10px;
    min-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.task-text{
    /* background-color: aquamarine; */
    min-height: 50px;
    display: flex;
    max-width:50%;
}

.task-text p{
    font-size: 18px;
}

.task-btn button{
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
}

.task-btn button:hover{
    transform: scale(1.02);
   transition: all ease-out 0.2s;
}

#delete{
    background-color: #FF3F33;
    color:white;
}

#edit{
    background-color: #4DA8DA;
    color: white;
}

#status{
    background-color:	#f08080;
    color: white;
}






@media (max-width:426px) {
  .input-container input {
    width: 60%;
    padding: 0.6rem 1rem;
    outline: none;
    font-size: 1rem;
    border: none;
    background-color: #e4dddd ;
    border-radius: 4px;
}

.main-container{
    width: 70%;
    min-height: 30vh;
    background-color: white;
    border-radius: 20px;
    padding: 30px 20px;
}

.task-container .task{
  display: flex;
  flex-direction: column;
  min-height: 20vh;
  padding: 10px;
  align-items: flex-start;
}

.task-container .task p{
 width: 100px;
}

}


@media (min-width:427px) and (max-width:769px) {
  .input-container input {
    width: 83%;
    padding: 0.6rem 1rem;
    outline: none;
    font-size: 1rem;
    border: none;
    background-color: #e4dddd ;
    border-radius: 4px;
}

.main-container{
    width: 75%;
    min-height: 20vh;
    background-color: white;
    border-radius: 20px;
    padding: 30px 20px;
}

.task-container .task{
  display: flex;
  flex-direction: column;
  min-height: 20vh;
  padding: 10px;
  align-items: flex-start;
}

.task-container .task p{
 width: 100px;
}

}


@media (min-width:769px) and (max-width:1025px) {
  .input-container input {
    width: 83%;
    padding: 0.6rem 1rem;
    outline: none;
    font-size: 1rem;
    border: none;
    background-color: #e4dddd ;
    border-radius: 4px;
}

.main-container{
    width: 75%;
    min-height: 20vh;
    background-color: white;
    border-radius: 20px;
    padding: 30px 20px;
}

.task-container .task{
  display: flex;
  flex-direction: column;
  min-height: 20vh;
  padding: 10px;
  align-items: flex-start;
}

.task-container .task p{
 width: 100px;
}

}