* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Adjust the title and body */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: monospace;
    flex-direction: column;
    background-image: url("background.jpg");
    background-size: cover;         /* Fit entire screen */
    background-repeat: no-repeat;   /* Prevent tiling */
    background-position: center;    /* Center the image */
}

body::before {
    content: "";                             /* Required to show the pseudo-element */
    position: fixed;                         /* Sticks to the screen, not scrollable */
    inset: 0;                                /* Shorthand for top: 0; right: 0; bottom: 0; left: 0; */
    background-color: rgba(0, 0, 0, 0.05);   /* Slight transparent dark layer */
    backdrop-filter: blur(2px);             /* Blurs whatever is behind it */
    z-index: -1;                             /* Puts it behind all normal content */
}

h1 {
    display: flex;
    margin: 30px;
    font-size: 50px;
    font-weight: 700;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
}

/* Frame for the calculator */
#calculator {
    display: flex;
    width: 400px;
    height: 500px;
    background-image: linear-gradient(rgba(246, 142, 50, 0.824), rgb(63, 130, 217));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
    
}

/* Display for answers and numbers */
div #display {
    overflow: auto;
    box-sizing: border-box;
    width: 360px;
    height: 85px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    margin-top: 20px;
}

/* Texts of the display */
.text1,       
.text2 {
    text-align: right;
    font-family: "Outfit", sans-serif;
    margin-right: 10px;
    white-space: normal;
    word-break: break-all;
}

.text1 {
    margin-top: 3px;
    font-size: 25px;
    font-weight: 400;
}

.text2 {
    margin-top: 12px;
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 2px;
}

/* Buttons */
#calculator #buttons {
    margin-top: 30px;
    width: 360px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

button {
    height: 60px;
    background-color: rgb(186, 83, 100);
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
    font-family: Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 25px;
    font-weight: 500;
    cursor: pointer;
    flex: 1 0 84px;
}

button[data-number] {
    background-color: rgba(255, 255, 255, 0.763);
}

button[data-op] {
    background-color: rgb(217, 166, 0);
}

button[data-op = "equal"] {
    background-color: green;
}


button[data-op="point"] {
    background-color: rgba(255, 255, 255, 0.763);
}


button:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

#twice {
    flex: 2 0 176px;
}