body{
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.main-containter{
    margin-top: 100px;
    width: 400px;
    height: 700px;
    background-color: #1C1C1C;
    border-radius: 25px;
    border: 5px solid white;
}

.result-containter{
    padding-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    height: 20%;
    
}

.result-area{
    background-color: #1C1C1C;
    width: 100%;
    height: 100%;

    color: white;
    font-size: 80px;
    font-family: Helvetica, sans-serif;

    display: flex;
    justify-content: end;
    align-items: end;
}

.buttons-containter{
    background-color: #1C1C1C;
    margin-top: 5%;
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
}

.buttons-area{
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4,1fr);
}

.tasto{
    height: 80px;
    width: 80px;
    border-radius: 50%;

    background-color: #505050;
    color: white;
    font-family: Helvetica, sans-serif;
    font-size: 40px;

    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
   
  
}

.buttons-area > div:nth-child(17){
    justify-self: center;
    width: 100%;
    border-radius: 50px;
    grid-column: span 2;
    justify-content: left;
    
}

.buttons-area > div:nth-child(4), .buttons-area > div:nth-child(8), .buttons-area > div:nth-child(12), .buttons-area > div:nth-child(16), .buttons-area > div:nth-child(19){
    background-color: #FF9500;
    font-weight: bold;

}

.buttons-area > div:nth-child(1), .buttons-area > div:nth-child(2), .buttons-area > div:nth-child(3){
    background-color: #D4D4D2;
    color: black;
    font-weight: bold;

}