*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Laila", serif;
    font-weight: 600;
    font-style: normal;
}
body{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #C06C84;
    transition: background-color 0.7s  ease-in;
}
header{
    text-align: center;
    font-size: 30px;
}
footer{
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
}
.flex-container{
    display: flex;
    justify-content:space-around ;
    align-items: center;
}
.calculator-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #FFC6C6;
    border-radius: 15px;
    height: 550px;
    width: 400px;
    padding: 20px;
}
.display{
    background: black;
    color: white;
    width: 360px;
    height: 60px;
    text-align: right;
    font-size: 2em;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    margin-top: 20px;

    overflow: hidden;
}
/* button grid  */
.button-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 10px;
    
}
.ob{
    display: flex;
}
.button-grid button{
    flex: 0 0 calc(20% - 10px); /* Set each button to take 20% of the width of the container, minus gap */
    height: 40px;            /* Fixed height for each button */
    font-size: 1.2em;           /* Font size */
    cursor: pointer;            /* Change cursor on hover */
    background-color: #E493B3;     /* Background color */
    border: none;               /* No border */
    border-radius: 10px;        /* Rounded corners */
    transition: all 0.2s ease-in-out; /* Transition for hover effects */
    margin: 5px;          
    /* ptional: margin around buttons */
    color: white;
}
.button-grid button:hover {
    background-color: #B51B75;      /* Change background color on hover */
    transform: scale(1.09);
}
.button-grid button:active {
    transform: scale(0.90); /* Slightly shrink on click */
}
/* Theme Switcher */
.theme-switcher {
    margin-top: 23px;
    font-size: 1.2em;
    margin-bottom: 23px;
    height: 200px;
    width: 350px;
}
#indicator-light {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color:yellow;
}
.btn-onoff {
    position: relative;
    left: 310px;
    width: 30px; /* Adjust size as needed */
    height: 30px; /* Maintain aspect ratio */
    cursor: pointer; /* Change cursor on hover */
    background-color: transparent; /* Removes any background */
    border: none; /* Removes default button border */
    overflow: hidden; /* Ensures that any overflow is hidden */
    border-radius: 50%; /* Makes the button circular */
}

.btn-onoff img {
    width: 100%; /* Ensures the image covers the button */
    height: 100%; /* Ensures the image covers the button */
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures the image fills the button */
}
header, footer {
    text-align: center;
    z-index: 10;
}

h1, h2 {
    margin-bottom: 20px;
}
.theme-switcher {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #FFC6C6;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.theme-switcher label {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.theme-switcher select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 9px;
    border: 1px solid #ccc;
    background-color: #FFEBD4;
    color: #333;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.theme-switcher select:hover {
    border-color: #F7C566;
    border-color: #F7C566;

}
.theme-switcher option {
    background-color: #FFEBD4;  /* Background color for the options */
    color: #333;                /* Text color for the options */
}

/* Optional: style the hover of the options if desired */
.theme-switcher option:hover {
    background-color: #F7C566;  /* Background color when hovering over an option */
}

.theme-switcher select:focus {
    outline: none;
    border-color: #F7C566;
    background-color:#FFEBD4 ;
}
.btn-sound {
    background-color: #E493B3; /* Blue color */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 7px; /* Rounded corners */
    padding: 10px 15px; /* Padding for size */
    font-size: 1em; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
    margin: 10px;
}

.btn-sound:hover {
    background-color: #B51B75; /* Darker blue on hover */
    transform: scale(1.05); /* Slightly grow the button */
}

.btn-sound:active {
    transform: scale(0.95); /* Slightly shrink on click */
}

/* Default Theme */
body.default-theme {
    background-color: #C06C84;
}

body.default-theme .button-grid button {
    background-color: #E493B3;
    color: white;
}

body.default-theme .button-grid button:hover {
    background-color: #B51B75;
}

/* Dark Theme */
body.dark-theme {
    background-color: #6EACDA;
    color:#021526;
}
body.dark-theme .calculator-container {
    background-color: #021526;
    color: #021526;
}
body.dark-theme header{
    color: #021526;
}
body.dark-theme .theme-switcher{
    background-color: #021526;
    color:#021526;
}
body.dark-theme label{
    color: white;
}
body.dark-theme .btn-sound{
    background-color: #E2DFD0;
    color:#021526;
}
body.dark-theme .button-grid button {
    background-color: #E2DFD0;
    color: #021526;
}
body.dark-theme .button-grid .btn-sound button:hover {
    background-color: #333333;
}
/* Light Green Theme */
body.light-green-theme {
    background-color: #9CDBA6;
    color: #16423C;
}
body.light-green-theme .calculator-container {
    background-color: #6A9C89;
}
body.light-green-theme header{
    color: #16423C;
}
body.light-green-theme .theme-switcher{
    background-color: #6A9C89;
}
body.light-green-theme .btn-sound{
    background-color: #E9EFEC;
    color: #16423C;
}
body.light-green-theme .button-grid button {
    background-color: #E9EFEC;
    color: #16423C;
}
body.light-green-theme .button-grid .btn-sound button:hover {
    background-color: #333333;
}

/* night-sky-theme */
body.night-sky-theme {
    background-color: #070F2B;
    color: #9290C3;
}
body.night-sky-theme .calculator-container {
    background-color: #910A67;
}
body.night-sky-theme header{
    color: #9290C3;
}
body.night-sky-theme .theme-switcher{
    background-color: #910A67;
}
body.night-sky-theme .btn-sound{
    background-color: #070F2B;
    color: #9290C3;
}
body.night-sky-theme .button-grid button {
    background-color: #070F2B;
    color: #9290C3;
}
body.night-sky-theme .button-grid .btn-sound button:hover {
    background-color: #333333;
}
/* sunset-sky-theme */

body.sunset-sky-theme {
    background-color: #FFB200;
    color: #E4003A;
}
body.sunset-sky-theme .calculator-container {
    background-color: #EB5B00;
}
body.sunset-sky-theme header{
    color: #E4003A;
}
body.sunset-sky-theme .theme-switcher{
    background-color: #EB5B00;
}
body.sunset-sky-theme .btn-sound{
    background-color: #FFF78A;
    color: #E4003A;
}
body.sunset-sky-theme .button-grid button {
    background-color: #FFF78A;
    color: #E4003A;
}
body.sunset-sky-theme .button-grid .btn-sound button:hover {
    background-color: #333333;
}

/* winters-theme */

body.winters-theme {
    background-color: #EEEEEE;
    color: #201E43;
}
body.winters-theme .calculator-container {
    background-color: #508C9B;
}
body.winters-theme header{
    color: #201E43;
}
body.winters-theme .theme-switcher{
    background-color: #508C9B;
}
body.winters-theme .btn-sound{
    background-color: #201E43;
    color: #EEEEEE;
}
body.winters-theme .button-grid button {
    background-color: #201E43;
    color: #EEEEEE;
}
body.winters-theme .button-grid .btn-sound button:hover {
    background-color: #333333;
}