@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/***** Section reset*****/ 
*,::after,::before{margin: 0;box-sizing: border-box;}
img{vertical-align: bottom;}
button{cursor: pointer; padding: 0;}
a{text-decoration: none;}
ul{list-style: none; padding: 0;}
label{display: inline-block;}
:disabled{opacity: 0.5; cursor: not-allowed;}
iframe{border: none; padding: .5rem; width: 560px; height: 313px;}
.container{max-width: 1200px; margin: auto; padding: 0 1rem;}
/***** End Section reset*****/


html{font-size: 15px;

   --red:#ca3c3c;
   --white:#fff;
   scroll-behavior:smooth; 
   scroll-padding-top: 80px;
}

/**** Flexbox Utilities */
.flex{
  display: flex;
}
.flex-column{
  flex-direction: column;
}
.align-center{
  align-items: center;
}
.justify-center{
  justify-content: center;
}
.gap{gap: 5px;}
.mt-1{margin-top: .4rem;}
.mt-2{margin-top: 2rem;}
.pt-100{padding-top: 100px;}
.pb-100{padding-bottom: 100px;}
.mx-auto{margin: auto;}
.done, .remove{cursor: pointer;}
body{
     font-family: "Poppins", sans-serif;
     background-image: linear-gradient(to right, rgba(9, 159, 176, 0.11), rgba(118, 192, 44, 0.099));
}


/***** Section grid *****/ 
.row{display: grid; grid-template-columns: repeat(12, 1fr); gap: .5rem;}
.col-1{grid-column: span 1;}
.col-2{grid-column: span 2;}
.col-3{grid-column: span 3;}
.col-4{grid-column: span 4;}
.col-5{grid-column: span 5;}
.col-6{grid-column: span 6;}
.col-7{grid-column: span 7;}
.col-8{grid-column: span 8;}
.col-9{grid-column: span 9;}
.col-10{grid-column: span 10;}
.col-11{grid-column: span 11;}
.col-12{grid-column: span 12;}
.img-res{max-width: 100%; height: auto;}
.flex{display: flex;}
.align-center{align-items: center;}
.justify-space-bet{justify-content: space-between ;}
.justyfy-center{justify-content: center;}
.gy-4{row-gap: 4rem;}
/***** End Section grid  *****/


/***** Section header *****/

.header {
  min-height: 50vh;
  background-image:
    linear-gradient(to right, rgba(176, 9, 154, 0.692), rgba(133, 237, 6, 0.648)),  url("./img/bg-img.webp")
   ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.nav-bar{ background-color: rgba(0, 0, 0, 0.775); line-height: 70px; }
.nav-bar a{
    color: white;
    border-bottom: 2px solid var(--white);
    border-radius: 10px;
    padding: .5rem 1rem;
}
.nav-bar ul{justify-content: center; gap: 1.5rem;}
.nav-bar a:hover{
    background-color: rgba(255, 255, 255, 0.2);
}
.headline{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
/***** Section header End *****/

.container h1{
    font-family: "Dancing Script", cursive;
    font-weight: 700;
    font-size: 3rem;
}
.todo-section h2{
    font-size: 2rem;
    font-weight: 900;
    color: black;
    font-size: 3rem;
}



.btn-headline{
    padding: 1rem 2rem;
    font-size: 1.4rem;
    margin-top: 1rem;
    font-weight: 500;
    font-weight: 600;
    font-family: Georgia, 'Times New Roman';
}
.todo-section{
    margin-top: 3rem;
    text-align: center;
    color: black;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.todo-section h2{
    font-size: 2rem;
    font-weight: 600;
    color: black;
    margin-bottom: 2rem;
}

.todo-section .error {
    margin-top: .3rem;
    margin-bottom: .7rem;
    border:none;
    outline: none;
    color: red;
    padding: 5px;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    font-size: .9rem;
    text-align: start;
    background: transparent;
    border-bottom: 1px solid rgb(68, 0, 255);
    border-radius: 5px;
    text-align: center;
}
table {
  width: 100%;                /* table full width */
  border-collapse: collapse;  /* merge borders */
}

/* apply border only to table cells and table itself */
table, th, td{
  border: 1px solid gray;
}

/* cell padding and alignment */
th, td {

  text-align: left;
  vertical-align: middle;;
}
th{  padding: 8px 12px;}
td p{  padding: 8px 12px;}

.todo-list li input{
    outline: none;
    height: 2rem;
    font-weight: bold;
   padding-left: 10px;
   padding-right: 10px;
    vertical-align: middle;
    font-size: 1rem;
}
.todo-list li button{
    outline: none;
    height: 2rem;
    font-weight: bold;
   padding-left: 10px;
   padding-right: 10px;
    vertical-align: middle;
    font-size: 1rem;
}
.todo-list li{
    list-style: none;
}
.bg-dark{
    background: red;
    color: white;
}
.form-sec{
  display: block;
 
}
.form-sec input{
    outline: none;
    /* height: 2rem; */
    font-weight: 600;
    /* padding-left: 10px; */
    /* padding-right: 10px; */
    vertical-align: middle;
    font-size: 1rem;
    
}
.text{
    border: 1px solid gray;
    /* min-width: 100px; */
    padding: 4px 5px;
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    font-size: .9rem;
    text-align: start;
}
.sign-up{
    color: black;
    text-align: center;
    margin-top: 4rem;
    width: 100%;
}

.form-group input{
    height: 2rem;
    width: 100%;
    outline: none;
    font-size: 1.3rem ;
   
}
.form-group label{
    display: block;
 
}
.btn{
    padding: 5px 15px 5px 15px;
    /* background-color: rgb(248, 63, 63); */
    border-top: 2px solid wheat;
    font-size: 1.2rem;
    margin-bottom: 10rem;
    width: 30rem;
    border-radius: 12px;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
}

.form-section-01{
    max-width: 70%;
    margin: auto;
    text-align: left;
    box-shadow: 1px 1px 8px rgba(128, 128, 128, 0.258);
    margin-top: 12px;
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.form-section-01 input{
    border: none;
    box-shadow: 1px 1px 3.5px gray;
    padding-left: 5px;
}
.form-group textarea{
    width: 100%;
    outline: none;
    padding-bottom: 12px;
    font-size: 1rem;
    font-family: sans-serif;
    padding-left: 5px;
    
}
.form-group{
    margin-bottom: 15px;
    width: 100%;
}
.btn1{
    padding: 7px 13px 7px 13px;
    border-radius: 4px;
    color: black;
    background-color: rgba(251, 77, 77, 0.721);
    border:none;
    margin-bottom: 12px;
    font-weight: bold;
}

/** FOOTER */

footer p{
    background-color: black;
    color: white;
    line-height: 70px;
    text-align: center;
    opacity: 0.8;
    
}

/** --------------- MEDIA QUERIES ------------------ */

/** Section media queries */  
@media screen and (max-width: 1200px) {   /* ipad landscape */
  html{font-size: 13px;}
   h2{font-size: 60px;}
   .form-section-01{
    max-width: 60%;
    margin: auto;
   }
}

@media  screen and (max-width: 980px) {     /* ipad portrait */  
   .col-t-1{grid-column: span 1;}
   .col-t-2{grid-column: span 2;}
   .col-t-3{grid-column: span 3;}
   .col-t-4{grid-column: span 4;}
   .col-t-5{grid-column: span 5;}
   .col-t-6{grid-column: span 6;}
   .col-t-7{grid-column: span 7;}
   .col-t-8{grid-column: span 8;}
   .col-t-9{grid-column: span 9;}
   .col-t-10{grid-column: span 10;}
   .col-t-11{grid-column: span 11;}
   .col-t-12{grid-column: span 12;}

}

@media  screen and (max-width: 767px) {   /* mobile landscap */
   html{font-size: 12px;}
   .col-ml-1{grid-column: span 1;}
   .col-ml-2{grid-column: span 2;}
   .col-ml-3{grid-column: span 3;}
   .col-ml-4{grid-column: span 4;}
   .col-ml-5{grid-column: span 5;}
   .col-ml-6{grid-column: span 6;}
   .col-ml-7{grid-column: span 7;}
   .col-ml-8{grid-column: span 8;}
   .col-ml-9{grid-column: span 9;}
   .col-ml-10{grid-column: span 10;}
   .col-ml-11{grid-column: span 11;}
   .col-ml-12{grid-column: span 12;}
   .todo-list p{
      font-size: 10px;
       }
    .sign-up h2{font-size: 2.5rem;}
     .form-section-01{
    max-width: 90%;
    margin: auto;
   }
 }

@media  screen and (max-width: 460px) {   /* mobile portrait */
.col-mp-1{grid-column: span 1;}
.col-mp-2{grid-column: span 2;}
.col-mp-3{grid-column: span 3;}
.col-mp-4{grid-column: span 4;}
.col-mp-5{grid-column: span 5;}
.col-mp-6{grid-column: span 6;}
.col-mp-7{grid-column: span 7;}
.col-mp-8{grid-column: span 8;}
.col-mp-9{grid-column: span 9;}
.col-mp-10{grid-column: span 10;}
.col-mp-11{grid-column: span 11;}
.col-mp-12{grid-column: span 12;}
}

/** End Section media queries */