body {
    background-image: url("calculator.jpg");
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
}

input{
    height: 20px;
    width: 60px;
    border-radius: 30px;
}

#operator {
    width: 25px;
}

.cadre {
    display: flex;
    align-items: center;
    justify-content: center;
    text-wrap:initial;
    width: auto;
    z-index: 100;
}

.titre {
    font-size: 50px;
    font-family: 'Courier New', Courier, monospace;
    color: crimson;
    text-align: center;
    margin-top: 10%;
}

.res {
    color: white; 
    font-size: 80px; 
    font-weight: bold;
    z-index: 100;
}


.box {
    border-bottom: 2px solid white;
    width: auto;
    z-index: 100;
    animation: slide_opacity 0.2s ease-in-out forwards;
}

@keyframes slide_opacity {
    0%{
        opacity: 0;
        transform: translatex(-100px);
    }
    100%{
        opacity: 1;
        transform: translatex(0);
    }
}


.erreur {
    color: red;
    font-size: 100px;
    font-weight: bold;
}

button {
    background-color: green; 
    color: white;
    border-radius: 15px;
    padding:10px;  
    text-decoration: none;
    margin-top: 20px;
}

a{
    padding:10px; 
    text-decoration: none; 
    background-color: green; 
    color: white;
    border-radius: 15px;
}