body{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: white;
    font-family: "Montserrat", sans-serif;
    flex-direction: column;
    padding-top: 4rem;

     
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%),
    url("Designs/pexels-pixabay-159045.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
   
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 4rem;
    flex-direction: column;
}
.navbar{
  
    position: fixed;
    top: 0;
    left: 4rem;
    width: 100%;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    color: aliceblue;
    background:linear-gradient(60deg, #09203F , #537895); 
    z-index: 50;
    border-radius: 0 0 0 4rem;
    box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.445);
    
}
.navbar:hover{
    transition: 0.3s;
    cursor: pointer;
}
.nav-content{
    gap: 2rem;
    display: flex;
    align-items: center;
}

.box{
    text-align: center;
    display: flex;
    padding: 5rem 13rem;  
    border-radius: 10px;
    color: white;
    flex-wrap: wrap;
    width: 80%;
    justify-content: center;
    align-items: center;

   
}
form{
    display: flex;
    gap: 1.5rem;
}
select{
    padding: 1rem;
    width: 20rem;
    height:3.5rem;
    border: none;
    background:linear-gradient(60deg, #09203F , #537895);
    border-radius: 10px;
    cursor: pointer;
    color: white;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}
option{
    cursor: pointer;

}
form button{
   text-align: center;
   border: none;
   background-color:#bfc0c0;
   border-radius: 10px;
   cursor: pointer;
   padding: 1rem ;
   color:white;
   height: 3.5rem;
   font-size: 20px;
   font-weight: bold;
   box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
   display: flex;
   justify-content: center;
   text-align: center;
   align-items: center;
   transition: 0.4s;
}
form button:hover{
    background:linear-gradient(60deg, #09203F , #537895);
    color: white;
    transition: 0.4s;
}
form input{
    padding: 1rem;
    width: 20rem;
    height:1.5rem;
    border: none;
    background:linear-gradient(60deg, #09203F , #537895);
    border-radius: 10px;
    cursor: pointer;
    color: white;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    outline: none;
}
.Result{
    flex-basis: 100%; 
    text-align: center;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;   
}
.extrainfo{
    padding: 20px;
    color: white;
    font-weight: bold;
    font-size: 25px;
}


.Sumary{
    display: flex;
    flex-direction: column;
}
.color1{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: rgb(223, 211, 191);
}
.color2{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: rgb(127 129 126);
}
.color3{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: rgb(209 203 193);
}
.color4{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: rgb(124 50 57);
}
.color5{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: rgb( 47 61 76);
}
.cont1{
   background-color: #636a70;  
    border-radius: 15px;
    display: flex;
    gap: 2rem;
    padding: 2rem 2rem;
    border-radius: 4rem 4rem 0 0;
    color: white;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
.cont2{
    background-color:  #636a70;
    display: flex;
    gap: 2rem;
    padding: 2rem 2rem;
    border-radius:0 0 4rem 4rem;
    color: white;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
.colorRal1{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: rgb(68 72 77);
}
.colorRal2{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: rgb(197 200 196);
}
.colorRal3{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: rgb(253 183 2);
}

.colorRal4{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: rgb(136 135 130);
}
.colorRal5{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: rgb(240 236 226);
}
.box-after{
    background-color: #636a70;
    padding: 5rem;
    box-shadow:  4px 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 4rem;
}


@media (max-width: 1366px) {
    body {
      padding-top: 3rem; 
    }
  
    .box {
      padding: 2rem 4rem; 
      width: 95%;
    }
  
    select, 
    form input, 
    form button {
      width: 18rem; 
      font-size: 18px;
    }
  
    .extrainfo {
      font-size: 1rem;
    }
  
    .color1, .color2, .color3, .color4, .color5,
    .colorRal1, .colorRal2, .colorRal3, .colorRal4, .colorRal5 {
      width: 120px;
      height: 120px;
    }
  }
  .colors{
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
  }