body{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'VT323', monospace;
    font-weight: 500;
    margin: 0;
    background-color: #1b1b1b;
    color: aliceblue;
    user-select: none;
}


.main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex:1;
}

.calculator-body{
    background-color:aliceblue;
    box-shadow: 0 0 10px aliceblue;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    width: calc(50vh);
    height: 70vh;
    border-radius: 10px;
    gap: 10px;
}

.display{
    box-shadow: 0 0 10px #1b1b1b;
    height: 15%;
    width: 90%;
    background-color: #1b1b1b;
    border-radius: 10px;
    text-align: end;
    font-size: calc(10vh);
    user-select: text;
}

.display-text{
    text-align: right;
    margin-right: calc(2vh);
    text-shadow: 0 0 3px aliceblue;
    text-overflow:ellipsis;
    overflow: hidden;
}

.btn-container{
    display: flex;
    width: 90%;
    height: 70%;
}

.button{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8vh;
    width: calc(8vh);
    background-color: #1b1b1b;
    box-shadow: 0 0 10px #1b1b1b;
    border-radius: 10px;
    font-size: calc(8vh);
    transition: background-color;
    text-shadow: 0 0 3px aliceblue;
    
}

.button:hover, .clear:hover, .back:hover{
    background-color: #3b3b3b;
    cursor: pointer;
}

.empty-button{
    height: 8vh;
    width: calc(8vh);
    margin-right: auto;
}

.left-buttons, .right-buttons{
    display: flex;
}

.left-buttons{
    flex-direction: column;
    flex: 1;

}


.left-buttons-row{
    display: flex;
    align-items: center;

    margin-bottom: auto;
}
.left-button-row{
    display: flex;
    margin-bottom: auto;
    gap: 10px;
}

.left-buttons-row .button{
    margin-right: auto;
}

.right-buttons{
    flex-direction: column;
    margin-left: 6%;
}
.right-buttons .button{
    margin-bottom: auto;
}


.clear, .back{
    width: 38%;
    height: 8vh;
    background-color: #1b1b1b;
    margin-bottom: auto;
    margin-right: auto;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(8vh);
    text-shadow: 0 0 3px aliceblue;
    box-shadow: 0 0 10px #1b1b1b;
}


.footer{
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 15px;
    flex-grow: 0;
    color: aliceblue;
}

.footer a{
    text-decoration: none;
    color: aliceblue;
    text-shadow: 0 0 10px aliceblue;
}

.footer a:hover{
    color: rgb(169, 169, 169)
}