body {
    display: flex;
    padding: 25px;
    gap: 10px;
    height: auto;

}

.CalculatorBody {
    width: 415px;
    height: auto;
    display: grid;
    padding: 20px;
    gap: 5px;
    grid-template-columns: 100px 100px 100px 100px;
    column-gap: 5px;
    border-radius: 15px;
}

.CalculatorBody button {
    width: 100%;
    height: 100%;
    font-size: 72px;
    border-radius: 10px;
}

.ResultBox {
    width: 100%;
    height: 100%;
    font-size: 72px;
    border-radius: 10px;
    text-align: right;
    grid-area: 1 / 1 / 1 / 5;
    overflow: hidden;
}



.styleList {
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: auto;
    gap: 20px;
    padding: 15px;
    border-radius: 8px;
}

.styleList button {
    width: 300px;
    height: 100%;
    font-size: 36px;
    border-radius: 10px;

}


.Classic {
    background-color: #242424;
    color: white;
}

.Classic button {
    background-color: #4b4b4b;
    color: white;
}

.Classic .ResultBox {
    background-color: #313131;
    color: white;
}

.Classic button:hover {
    background-color: #333333;
}


.Hacker {
    background-color: black;
    color: green;
    font-family: 'Courier New', Courier, monospace;

}

.Hacker .ResultBox {
    background-color: rgb(24, 24, 24);
    color: #00ff00;
}

.Hacker button {
    background-color: #252525;
    color: #00ff00;
    border-style: solid;
    border-width: 3px 0px 0px 3px;
    border-color: #1f490e;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;

}

.Hacker button:hover {
    background-color: #1f490e;
    box-shadow: 0 0 15px #00ff00;
}

.Water {
    background-image: linear-gradient(rgb(0, 204, 255), rgb(22, 0, 119));
    color: rgb(0, 183, 255);
    font-family: 'Courier New', Courier, monospace;
    border-style: solid;
    border-color: #252525;

}

.Water .ResultBox {
    background-color: rgb(0, 82, 102);
    color: rgb(255, 255, 255);

}

.Water button {
    background-color: rgb(0, 73, 92);
    color: rgb(255, 255, 255);
    letter-spacing: 2px;
    border-style: solid;
    border-radius: 50%;
    border-color: #252525;
    font-family: 'Times New Roman', Times, serif;

}

.Water button:hover {
    background-color: rgb(0, 161, 201);
    color: rgb(229, 255, 0);
}

.Wood {
    background-image: url("../Images/Wood.jpg");
    color: rgb(0, 183, 255);
    font-family: 'Courier New', Courier, monospace;
    border-style: solid;
    border-color: #252525;
    border-radius: 0px;

}

.Wood .ResultBox {
    background-color: rgb(0, 0, 0);
    color: rgb(229, 255, 0);
    border-radius: 6px;


}

.Wood button {
    background-image: url("../Images/Wood2.avif");
    color: rgb(128, 62, 0);
    letter-spacing: 2px;
    border-style: solid;
    border-color: #252525;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-radius: 0px;
}

.Wood button:hover {
    background-color: rgb(110, 53, 0);
    color: white;
}

.Desert {
    background-image: linear-gradient(rgb(209, 112, 0), rgb(211, 162, 0),
            rgb(209, 112, 0), rgb(211, 162, 0),
            rgb(209, 112, 0), rgb(211, 162, 0),
            rgb(209, 112, 0), rgb(211, 162, 0),
            rgb(209, 112, 0), rgb(211, 162, 0),
            rgb(209, 112, 0), rgb(211, 162, 0),
            rgb(209, 112, 0), rgb(211, 162, 0));

    color: rgb(0, 183, 255);
    font-family: 'Courier New', Courier, monospace;
    border-style: solid;
    border-color: #252525;
    border-radius: 0px;

}

.Desert .ResultBox {
    background-color: rgb(37, 35, 0);
    color: rgb(43, 184, 0);


}

.Desert button {
    background-color: rgb(89, 128, 0);
    color: rgb(128, 62, 0);
    letter-spacing: 2px;
    border-style: solid;
    border-color: #252525;
    font-family: sans-serif;
}

.Desert button:hover {
    background-color: rgb(124, 177, 0);
    color: rgb(252, 17, 0);
}