@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&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&family=Recursive:wght@300..1000&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 
 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
 .container{
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
  background-color: #fff8e7;
   color: #0e172c;
   font-family: "Recursive", sans-serif;
 }
 .boardContainer{
    width: 700px;
    height: 700px;
    border: 1px solid black;
    display: grid;
 }
 h1{
   margin-top: 10px ;
   margin-bottom: 1rem;
   font-family: "Caprasimo", sans-serif;
   font-size: 4rem;
  font-weight: bold;
  background: linear-gradient(
    90deg,
    #ff6f61,   /* Coral */
    #f7d51d,   /* Doodle Yellow */
    #70c1b3,   /* Mint Green */
    #b29dd9,   /* Lavender/Purple */
    #ff9f1c    /* Tangerine Orange */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 .buttons{
   display: flex;
   flex-wrap:wrap ;
   gap: 10px;
 }
 .colorBtn{
   width: 150px;
   height: 40px;
   border-radius: 10px;
   margin-bottom: 20px;
   color: #fffffe;
   font-size: 1.2rem;
   font-family: "Recursive", sans-serif;
   background-color: #0e172c;
   transition: .02s;
   cursor: pointer;
   margin-right: 2px;
 }
 .colorBtn:hover{
   background-color:  rgba(14, 23, 44, 0.904);
    color: #fffffe54;
    transform: scale(1.05);
 }
 .colorBtn:active{
   background-color:  rgb(14, 23, 44);
    color: #fffffe;
    transform: scale(1);
 }
 #randomBtn{
   text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
   transition: transform 0.2s ease;
 }
#randomBtn:hover {
      transform: scale(1.05);
      background-color: #0e172c;
      font-weight: 800;
   }
#randomBtn:active{
      transform: scale(1);
      background-color: #0e172c;
      font-weight: 400;
   }
.ran{
    background-image: linear-gradient(
        90deg,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
      );
        -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
}
.colorPick{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-bottom: 5px;
}
.colorPick label{
   font-weight: 600;
}
.colorP{
   border: none;
   background-color: none;
   padding: 0;
   margin: 0;
   appearance: none;
   outline: none;
   height: 20px;
}
.sizeBtn{
   font-family: "Recursive", sans-serif;
   font-weight: 500;
   margin: 10px 0; 
}
#size{
   width: 200px;
   border-radius: 40px;
   height: 25px;
   border: none;
   box-shadow: inset 0px 1px 14px -5px rgba(0,0,0,0.79);
   padding: 10px;
}
#size:focus{
   outline: none;
}
.Sizebtn{
   width: 60px;
   height: 25px;
   border-radius: 35px;
   border: none;
   color: #fffffe;
   font-size: 0.8rem;
   font-family: "Recursive", sans-serif;
   background-color: #0e172c;
   transition: .02s;
   cursor: pointer;
   margin-right: 2px;

}
 .Sizebtn:hover{
   background-color:  rgba(14, 23, 44, 0.904);
    color: #fffffe54;
    transform: scale(1.05);
 }
 .Sizebtn:active{
   background-color:  rgb(14, 23, 44);
    color: #fffffe;
    transform: scale(1);
 }
 .status-mode{
   width: 50%;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
 }
#resetBtn{
   width: 150px;
   height: 40px;
   border-radius: 10px;
   margin: 20px 0;
   color: #fffffe;
   font-size: 1.2rem;
   font-family: "Recursive", sans-serif;
   background-color: #0e172c;
   transition: .02s;
   cursor: pointer;
   margin-right: 2px;
}
#resetBtn:hover{
   background-color:  rgba(14, 23, 44, 0.904);
    color: #fffffe54;
    transform: scale(1.05);
 }
#resetBtn:active{
   background-color:  rgb(14, 23, 44);
    color: #fffffe;
    transform: scale(1);
 }

 footer{
   margin-top: 0.5rem;
  padding: 1rem 0;
  text-align: center;
  font-family: 'Recursive', sans-serif;
  font-size: 1.2rem;
  color:#fffffe;
   width:100%;
  background-color: #0e172c;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);

 }