/* Font Collection */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS Reset */
/* Resetting default margin, padding, and box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables */
:root {
    --primary-dark: #333;
    --primary-light: rgb(246 246 246);
    --secondary-light: rgb(248 248 248);
}

/* BODY */
body {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-family: "Montserrat", sans-serif;
    font-style: normal;
}

/* Calculator Container */
#calculator {
    background-color: #fff;
    display: grid;
    grid-template-rows: 1.5fr 4fr;
    text-align: right;
    height: 600px;
    width: 400px;
    margin: 50px auto;
    border-radius: 8px;
    box-shadow: 0px 0px 20px 0px #33333382;
}

/* Display Screen */
#display {
    background-color: var(--secondary-light);
    letter-spacing: 3px;
    line-height: 2;
    padding: 10px 20px;
    border-radius: 8px;
    overflow: hidden;
}

/* Result Display */
#result {
    font-size: 40px;
    font-weight: 700;
    overflow: hidden;
}

/* History Display */
#history {
    color: rgb(144 144 144);
    font-weight: 700;
    font-size: 20px;
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
}

#history:hover {
    transform: scale(1.05);
}

/* Button Container */
#button-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    padding: 20px;
}

/* Button Styles */
button {
    background-color: transparent;
    color: var(--primary-dark);
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 600;
    outline: none;
    border: none;
    border-radius: 10px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

button:hover {
    transform: scale(1.1);
}

.btn:hover {
    background-color: var(--primary-light);
}

.zero {
    grid-column: 1 / 3;
}

/* Colored Buttons */
.btn-color {
    color: #fff;
    font-size: 40px;
    height: 65px;
    width: 65px;
    margin-left: 15px;
    border: none;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

/* Violet Button */
.violet {
    background-color: violet;
}

.violet:focus {
    background-color: rgb(178, 39, 226);
}

/* Orangered Button */
.orangered {
    background-color: orangered;
}

.orangered:focus {
    background-color: rgb(241, 49, 1);
}

/* Blue Button */
.blue {
    background-color: #85C1E9;
}

.blue:focus {
    background-color: rgb(66, 138, 239);
}

/* Orange Button */
.orange {
    background-color: orange;
}

.orange:focus {
    background-color: rgb(241, 157, 1);
}

/* Green Button */
.green {
    background-color: #2ECC71;
}

.green:focus {
    background-color: rgb(0, 188, 94);
}

/* Footer */
footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    font-weight: bold;
    gap: 10px;
    width: 100%;
    padding: 5px;
    margin-top: 25px;
}

/* Footer Links */
footer a {
    height: 25px;
}

/* Footer Image & Hover Effect */
footer a img {
    height: 25px;
    width: 25px;
    transition: transform 0.5s ease;
}

footer a img:hover {
    transform: rotate(360deg);
}