.tp-main {
    display: flex;
    flex-direction: column;
    align-items: center;

}


.calc-container {
   /* background-color: #d0d0d0;
    background-color: #c0d8e8;*/
    background-color: #60606a;
    width: 380px;

    height: 50vh;
    min-height: 700px;
    padding: 20px;
    border-radius: 20px;
    display:flex;
    flex-direction: column;
    justify-content:space-between;

}

.calc-container p {
    color: #ddd;
    font-size: 1rem;
    font-style: italic;
    padding: 0;
    margin: 0;
}

.calc-btn-container {
    height: 500px;
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(5,1fr);
}

.calc-btn-container > button {
    cursor: pointer;
    font-size: 2rem;
    border: 1px solid #111111;;
    outline: none;
    background-color: rgba(255,255,255,.9);
    border-radius: 10px;
    margin: 3px;
    /*aspect-ratio: 1;*/
}

.calc-btn-container > button:hover {
    background-color: rgba(255,255,255,.5);
}

.span-column-2 {
    grid-column: span 2;
}

.calc-btn-container > button.calc-operation {
    background-color: #d0805a;
}

.calc-btn-container > button.calc-operation:hover {
    background-color: #f89030;
}
.calc-btn-container > button.clear-operation {
    background-color: #eeaaaa;
}
.calc-btn-container > button.clear-operation:hover {
    background-color: #ff7777;
}

.output {
    grid-column: 1 / -1;
    background-color: rgba(255,255,255,.8);
    display: flex;
    flex-direction: column;
    flex:1;
    align-items: flex-end;
    justify-content: space-around;
    margin: 10px 0px;
    padding: 10px;
    word-wrap: break-word;
    word-break: break-all;
    border-radius: 10px;
    min-height: 120px;

}

.output .prev-calculation, .output .current-operand {
    color: #444444;
    font-size: 1rem;
}

.output .current-number {
    color: #222222;
    font-size: 2rem;
}

/*********************************  Small Screens   ***********************/

@media (max-width: 500px) {
    .calc-container {
         width: 280px;
         height: 50vh;
         min-height: 500px;
         padding: 5px;
         border-radius: 5px;
     }
     .calc-btn-container {
        height: 500px;    
     }
     .calc-btn-container > button {
        border-radius: 3px;
        margin: 2px;

    }     

    .output {
        margin: 5px;
        padding: 5px;
        word-wrap: break-word;
        word-break: break-all;
        border-radius: 5px;
        min-height: 120px;
    }    
}