@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css);
@import url(path/to/font-awesome/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Roboto:wght@400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    border: 0;
}
body{
    margin: 2rem;
    background: #1b1f22;
}

main{
    display: grid;
    grid-template-columns: 1fr auto;
    max-width: 800px;
    min-height: 400px;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: white;
    margin-top: 3rem;
    margin-bottom: 5rem;
    font-family: "Poppins", sans-serif;
}

img {
    width: 300px; /* Define a largura da imagem */
    height: auto; /* Mantém a proporção da altura */
}

#calculadora, #resultado{
    border: none;
    box-sizing: border-box;
    padding: 1.25rem;
    margin: 0px;
    background-color: #1A2A33;
    border-radius: 5px;;
    color: #e3e7e9;
    font-size: 1.25rem;
    font-family: "Poppins", sans-serif;
}

#calculadora{
    resize: none;
}

#calculadora:focus{
    outline: none;
}

#resultado{
    color: #2e1;
    display: grid;
    text-align: right;
}

#total{
    align-self: end;
    margin-top: 1.25rem;
}

/*inicio footer*/
footer{
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    font-family: "Poppins", sans-serif;
    padding-top: 100px;
    color: #fff;
}
.footer-content{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.footer-content p{
    max-width: 500px;
    margin: 10px auto;
    line-height: 28px;
    font-size: 14px;
}
.socials{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0px;
}
.socials li{
    margin: 0 10px;
}
.socials a{
    text-decoration: none;
    color: #fff;
}
.socials a i{
    font-size: 1.5rem;
    transition: color .4s ease;

}
.socials a:hover i{
    color: aqua;
}

.footer-bottom{
    width: auto;
    padding: 20px 0;
    text-align: center;
}
.footer-bottom p{
    font-size: 16px;
    word-spacing: 2px;
}
.footer-bottom a, .footer-content a {
    text-decoration: none;
    color: #fff;
}

/*fim footer*/