style.css

*,
*::before,
*::after{
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     text-decoration: none;
     list-style: none;
     border: none;
     font-family: 'Roboto', sans-serif;
}
:root{
     --main-color: #d98b16;
}
.container{
     width: 60%;
     height: 95vh;
     /* border: 5px solid rgba(235, 34, 34, 0.646); */
     box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.183);
     background-color: #f5f5f5;
     border-radius: 15px;
     margin: auto;
    margin-top: 15px;
    text-align: center;
    padding: 20px;
    

}

/* font-family: 'Roboto', sans-serif;
font-family: 'Righteous', cursive;
font-family: 'Indie Flower', cursive;
font-family: 'Anton', sans-serif; */


.theme{
     width: 100%;
     height: 90px;
     border-radius: 15px;
     cursor: pointer;
     

}    

.boxes{
     display: grid;
     grid-template-columns: repeat(5,1fr);
     gap: 10px;
     margin-bottom: 15px;
}



.btn{
     width: 100%;
     height: 150px;
     background-color:var(--main-color);
     border-radius: 20px;
     margin-bottom: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
     

}

.inputs{
     width: 100%;
     display: flex;
     justify-content: space-between;
    
}

.refresh{
      width: 300px;
      height: 60px;
      background-color: var(--main-color);
      border-radius: 15px;
      color: white;
      margin-top: 20px;


     cursor: pointer;



     
}
.inputdet{
     width: 15%;
     height: 30px;
     border-radius: 10px;
     text-decoration: none;
     text-align: center;
     box-shadow: 8px 5px 5px rgb(167, 167, 167);
     
     
}

.mobilview{
     display: none;
}