@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&family=Passion+One&family=Roboto&family=Sacramento&family=Sriracha&display=swap');

body{
    margin: 0px;
    padding: 0px;
}

div#container{
    background-color: lightblue;
    padding: 0px;
    margin: 0px;
    height: 90.3vh;
    padding-top: 20px;
}

div#calculadora{
    background-color: black;
    border-radius: 30px;
    font-family: 'Roboto', sans-serif;
    padding: 50px 10px 30px 10px;
    text-align: center;
    width: 300px;
    margin: auto;
}

div#historico{
    color: lightgray;
    height: 25px;
    text-align: right;
    padding: 0px 15px 0px 0px;
}

div#resultado{
    font-size: 3.1em;
    color: white;
    margin-bottom: 15px;
    text-align: right;
    padding-right: 10px;
}

input{
    width: 60px;
    height: 60px;
    border-radius: 30px;
    margin: 8px 4px;
    font-size: 1.4em;
    border-style: none;
}

input.func:active{
    background-color: rgba(241, 241, 241, 0.808);
}

input.operador{
    background-color: orange;
    color: white;
}

input.operador:active{
    background-color: rgba(255, 166, 0, 0.5);
}

input.num{
    background-color: grey;
    color: white;
}

input.num:active{
    background-color: rgba(128, 128, 128, 0.5);
}

input#zero{
    width: 132px;
    text-align: left;
    padding-left: 25px;
}

footer{
    background-color: grey;
    color: white;
    font-weight: bold;
    margin: 0px;
    height: 5vh;
    text-align: center;
    vertical-align: middle;
    padding-top: 10px;
}

a{
    color: white;
    text-decoration: none;
}