@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&family=Roboto:wght@400;700&display=swap');

@keyframes fadeInUp {
    0% {
        transform: translateY(-30%);
        opacity: 0;
    }
    70%{
        transform: translateY(3%);
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
  }


body {
    margin: 0px;
    padding: 0vh 10vh;
    background-color: #fcc718f5;
    display: flex;
    flex-direction: column;
    font-family: 'Quicksand', 'Roboto', sans-serif;
    animation: 1.5s fadeInUp;
}

.key{
    background-color: #DDE6ED;
    border: 2px solid #526D82;
    font-family: 'Quicksand', 'Roboto', sans-serif;
    box-shadow: rgba(0, 0, 0, 0.15) 5.95px 5.95px 2.6px;
    cursor: pointer;
}
.clicked{
    background-color: #84b0d1;
    transform: translateY(+0.13rem);
}
.calculator-container{
    user-select: none;
}
.main-container{
    background-color: #27374D;
    border: 2px solid #526D82;
    width: 350px;
    height: 550px;
    box-shadow: rgba(0, 0, 0, 0.15) 5.95px 5.95px 2.6px;
}
.display-container{
    display: flex;
    border: 2px solid #526D82;
    flex-direction: column;
    min-height: 100px;
}
.display-main{
    margin: 0vh 2vh;
    text-align: end;
    color: #afc7d6;
    font-size: 30px;
    font-weight: bold;
    word-wrap: break-word;
    min-height: 35px;
}

footer{
    margin-top: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 800px){
    body{
        padding: 0vh 2vh;
        height: 100vh;
    }
    .main-container{
        margin-top: 2vh;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        border-radius: 30px;
    }
    .display-container{
        height: 28vh;
        border-radius: 30px;
        margin: 10px;
    }
    .display{
        height: 90%;
        margin: 0px 25px;
    }
    .display-main{
        margin-top: 2vh;
        font-size: 30px;
    }
    .key {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 5px 5px;
        font-size: 26px;
        border-radius: 10px;
        min-width: 25px;
        min-height: 25px;
        transition: all .13s ease-in-out;
    }
    button:active{
        background-color: #84b0d1;
        transform: translateY(+0.13rem);
    }
    .calculator-container{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: 100%;
        padding: 5px;
    }
}

@media screen and (min-width: 800px){
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .main-container{
        display: flex;
        flex-direction: column;
        width: 350px;
        height: 550px;
        border-radius: 10px;
        justify-self: center;
    }
    .display-container{
        height: 23vh;
        border-radius: 10px;
        margin: 10px;
    }
    .display{
        height: 90%;
        margin: 0px 25px;
    }
    .display-main{
        font-size: 36px;
    }
    .key {
        margin: 10px 10px;
        font-size: 22px;
        border-radius: 10px;
        transition: all .13s ease-in-out;
    }
    button:hover{
        background: #84b0d1;
        color: #212121;
        transform: translateY(-0.2rem);
    }
    button:active{
        transform: translateY(0rem);
    }
    .calculator-container{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: 100%;
    }
}