* {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}

body {
   background-color: black;
   font-family: 'Kumbh Sans', sans-serif;
}

/* main container */
#mainContainer {
   width: 100%;
   min-height: 100vh;
}

.section1 {
   width: 85%;
   margin: 50px auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

/* title  styles */
#mainTitle {
   color: white;
   font-size: 60px;
}

.heading {
   color: ghostwhite;
   font-weight: 500;
}

/* button styles */
.button1 {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

#plus1 {
   color: rgba(0, 98, 255, 0.994);
   font-size: 35px;
}

.btntitle {
   color: gray;
   font-size: 35px;
   margin-left: 15px;
}

/* popup card */
.section2 {
   width: 550px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   padding: 50px;
   background: white;
   border-radius: 10px;
   z-index: 8;
   border: 1px solid rgb(255, 72, 0);
}

.popupTitle {
   color: rgb(255, 72, 0);
   text-align: center;
   font-size: 30px;
}

.input {
   display: block;
   margin: 20px auto;
   width: 90%;
   text-align: center;
   height: 50px;
   font-size: 20px;
   border: 2px solid rgb(255, 72, 0);
   box-shadow: 1px 1px 1px 0px rgb(255, 72, 0);
}

.addcloseholder {
   margin: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 70%;
}

.btnstyle1 {
   background: rgb(255, 72, 0);
   width: 40%;
   height: 50px;
   border: none;
   border-radius: 50px;
   font-size: 20px;
   color: white;
}

/* Card container styles */
h2 {
   color: rgb(183, 182, 182);
   margin: auto;
   font-size: 35px;
   font-family: Trebuchet MS ;
   width: 85%;

}

.cardcontainer {
   width: 85%;
   margin: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 50px;
   z-index: 9;
}

.card {
   border: 1px solid rgb(255, 72, 0);
   width: 320px;
   min-height: 450px;
   border-radius: 15px;
   background: white;
}

.cardTitle {
   margin: 20px auto;
   text-align: center;
   font-size: 30px;
   font-weight: 100;
   color: rgb(255, 72, 0);
   cursor: pointer;
}

.itemcontainer {
   min-height: 300px;
}

.holder {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   margin: 20px;
}

/* markdone special class */
.strike {
   text-decoration: line-through;
   text-decoration-color: rgb(255, 72, 0);
}

.buttoncontainer {
   width: 100%;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   padding: 20px;
   gap: 10px;
}

.trash{
   width: 35px;
   height: 35px;
   border-radius: 50%;
   background-color: rgb(255, 72, 0);
   color: white;
   font-size: 20px;
   display: grid;
   place-items: center;
}

.plus2 {
   border-radius: 50%;
   color: blue;
   font-size: 35px;
   display: grid;
   place-items: center;
}


/* second popup */
.item {
   font-size: 22px;
}

.markdone {
   background: rgb(0, 140, 255);
   border-radius: 50px;
   color: white;
   border: none;
   font-size: 15px;
   width: 80px;
   height: 20px;
}



/* singleCard */
.singleCard {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 350px;
   filter: none;
}

/* back Button */
.backButton {
   color: white;
   font-size: 35px;
}

#leftarrow {
   margin-right: 20px;
}

/* second title */
.secondTitle {
   color: white;
   font-size: 50px;
}

.hide {
   display: none;
}

.filter {
   filter: blur(10px);
}

@media screen and (min-width: 300px) and (max-width: 550px) {

   .section1 {
      gap: 30px;
   }

   /* title  styles */
   #mainTitle {
      color: white;
      font-size: 50px;
      width: 100%;
   }

   /* button styles */
   #plus1 {
      font-size: 25px;
   }

   .btntitle {
      font-size: 25px;
   }

   #temporaryTitle {
      font-size: 25px;
   }

   .section2 {
      width: 95%;
   }

   .popupTitle {
      font-size: 25px;
   }

   .input {
      height: 40px;
      font-size: 16px;
   }

   .btnstyle1 {
      height: 40px;
      font-size: 16px;
   }

    /* copy card styles */
   .singleCard {
      position: absolute;
      top: 80%;
      left: 78%;
      transform: translate(-80%, -78%);
      margin: auto;
   }

   /* card styles */
   .card {
      min-height: 300px;
   }

   .itemcontainer {
      min-height: 250px;
   }

   .backButton {
      font-size: 20px;
   }

   #leftarrow {
      margin-right: 10px;
   }

   .secondTitle {
      font-size: 30px;
   }
  
}

@media  screen and (min-width: 750px) and (max-width: 1200px) {
   .card {
      width: 300px;
   }
}