@import "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900";
body {
  font-family: "Lato";
    background-color: rgb(238, 229, 229);
}

.container {
  width: 75%;
  height: 80vh;
  margin: auto;
  margin-top: 5%;
  display: flex;
  box-shadow: 0px 0px 50px 5px rgba(0, 0, 0, 0.1);
  border-radius: 13px;
}

.container div {
  width: 50%;
  padding: 25px;
}

.calculadora {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 13px 0px 0px 13px;
}

.calculadora h1{
    font-weight: 900;
    margin-bottom: 0px;
}
.calculadora p{
    font-weight: 100;
}

.calculadora input{
    padding: 10px;
    width: 60%;
    border-radius: 5px;
    border: none;
    background-color: rgb(230, 230, 230);
    margin-bottom: 15px;
}
.calculadora #error{
    margin: 0 0 10px 0;
    font-weight: bold;
    color: rgb(255, 81, 81);
}
.calculadora #btn-calcular{
    padding: 10px;
    width: 40%;
    border: 1px solid transparent;
    background-color: rgb(116, 235, 194);
    font-weight: bold;
    border-radius: 20px;

}

.calculadora #btn-calcular:hover{
    cursor: pointer;
    border: 1px rgb(61, 135, 109) solid;
}

.container #btn-detalle{
    position: absolute;
    margin-top: 10px;
    right: calc(-27.5px + 50%);
    border-radius: 50px;
    width: 55px;
    height: 53px;
    border: none;
    background-color: rgb(0, 115, 75);
    color: white;
    font-family: "Comic Sans MS";
    font-size: 23px;
    font-weight: 900;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);

}

.container #btn-detalle:hover{
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.4);

}

.calculadora .resultado{
    width: 80%;
    text-align: center;
}
.calculadora .resultado p{
    font-size: 23px;
    font-weight: bold;
    margin: 5px 0 0 0;
    color: #47c498;
} 

.calculadora .resultado p span{
    color: rgb(0, 134, 87);
    font-weight: 900;
}

.detalle {
    background-color: #74ebc2;
    border-radius: 0px 13px 13px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.detalle h1{
    font-weight: 900;
}