h1{
    display: flex;
    justify-content: center;
    background-color: bisque;
    padding-bottom: 10px;
    font-family: 'Lora', serif;
}

#btnToggleForm{
    margin-top: 3rem;
    margin-left: 3rem;
}

.btn.btn-danger{
    margin-left: 1rem;
    margin-top: 3rem;
}

main{
    display:flex;
    background-image: url(../images/12_clean.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.control{
    font-family: 'Lora', serif;
}

#list{
    flex: 3;
}

#form{
    flex: 2;
    background-color: rgb(243, 229, 229, 0.90);
    border-radius: 1%;
    margin-right: 2rem;
    margin-bottom: 2rem;
}

#iImportant{
    font-size: 25px;
    color:rgb(14, 1, 1);
    cursor: pointer;
}

#iImportant.fas{
    color:red;
}

.title{
    color:coral;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    text-decoration: underline;
    margin-left: 3rem;
    font-family: 'Lora', serif;
}

#form{
    margin-top: 6rem;
    padding-right: 2rem;
}

.form-label{
    padding-top: 1rem;
    font-weight: 600;
    padding-left: 10px;
    
}

#btnSave{
    color:rgb(14, 4, 1);
    background-color: coral;
    margin-top: 2rem;
    border-radius: 20px ;
    margin-bottom: 10px;
    margin-left: 10px;
}

.form-control{
   margin-left: 10px;
}

.btn-primary{
    color:rgb(8, 0, 0);
    background-color: coral;
    border-radius: 20px;
    border-color: black;
}

.box-color{
    border-radius: 10%;
}

.task{
    display: flex;
    margin-top: 4rem;
    margin-right: 2rem;
    padding-left: 10px;
    border: 2px solid coral;
    background-color: rgb(243, 229, 229, 0.90);
    max-width: 50rem;
    max-block-size: 300px;
    margin-left: 2rem;
    border-radius: 15px 50px 50px 5px;
    max-height: 300px;
}

.task h5{
    align-items: center;
}

.task .date{
    color:red;
   padding-top: 30px;
}


.btn.btn-sm.btn-danger{
    
    margin-top: 25px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 10px;
    font-size: 10px;
    width: 50px;
    height: 40px;
}

#task-list{
    font-family: 'Lora', serif;
}

.task .location{
    font-family: 'Lora', serif;
    padding-top: 2rem;
}

.task .main-info {
    flex: 4;
}

.task .data {
    flex: 1;
}

.task .second-info {
    flex: 2;
}

.task button {
    flex: 1;
}

.task .contact{
    padding-top: 20px;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    font-family: 'Lora', serif;
}
.task h5{
    padding-top: 10px;
}

.task .date{
    flex: 1;
   margin-left: 1rem;
   padding-left: 1rem;
}


.task p{
    padding-top: 10px;
}



.task .second-info{
    padding-left: 2rem;
}