*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

h1{
    width: 100%;
}

h1, h3{
    text-align: center;
    
}

h3{
    color: rgb(0, 0, 0);
    /* color: green; */
    
}

#primeira_secao{
    margin: 2% auto;
    padding: 0;
    width: 100%;
    
}
 
.container-da-calc{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    row-gap: 2%;
    column-gap: 1%;
    
    border-radius: 1%;
    padding: 1%;
    box-shadow: 3px 3px 10px rgba(0, 1, 0.500);
}

.container-da-calc input[type="text"] {
    grid-column: 1 / span 5;
    padding: 0 10px 0 10px;
    font-size: 1.5em;
    text-align: right;
    border-radius: 0px;
    border: none;
    background-color: darkturquoise; 
    color: black;
} 

#button-igual, .numbers{
    border: 0;
}

#button-igual{
    background-color: darkturquoise; 
    grid-column: 4 / span 2;
}

button{
    font-size: larger;
}

#button-igual:hover{
    background-color: rgb(5, 165, 168);
}

.numbers{
    background-color: rgb(207, 206, 206);
}

.numbers:hover{
    background-color: rgb(158, 157, 157);
}

hr{
    border-radius: 5%;
    border: #79736d solid 3px;
    
}

.container-links-das-calcs{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 5px;
    justify-content: space-around;

     
    margin: auto;
    width: 80%;
}

.links-calcs{
    text-align: left;
    width: 100%;
    margin-top: -2.5%;
    list-style: none;
}

.links-calcs a{
    font-size: 1em;
    color: rgb(73, 73, 188);
    text-decoration: none;
}

.links-calcs a:hover{
    text-decoration: underline;
}


footer{
    margin: 15% auto 0;
    width: 70%;
    text-align: justify;
}

#footer-paragrafo-2{
    margin-top: 3%;
}

/* media queries */
@media (max-width: 450px) {
    h1{
        margin-top: 5%;
        margin-bottom: -5%;
    }

    hr{
        width: 80%;
        margin: 7% auto 8%;
    }

    .container-links-das-calcs{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 15px;
    }

    .container-links-das-calcs fieldset{
        padding-bottom: 5%;
    }
    
    .links-calcs li {
        padding-left: 5%;
        margin-bottom: 3%;
    }

    h3{
        background-color: aquamarine;
        margin-bottom: 10%;
        height: 10vh;
         
        padding-left: 1%;
    }
    
    .container-da-calc {
        height: 35vh;
        margin: 10% auto;
    } 
    
    .container-da-calc {
        width: 80%;
    }

    footer{
        width: 80%;
        margin: -1% auto 10%;
        height: 30vh;
    }
}

@media (min-width: 450px) and (max-width: 768px) {
    h1{
        margin-top: 5%;
        margin-bottom: -5%;
    }

    hr{
        width: 80%;
        margin: 7% auto 5%;
    }

    .container-links-das-calcs{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 15px;
        
    }

    .container-links-das-calcs fieldset{
        padding-bottom: 5%;
    }
    
    .links-calcs li {
        padding-left: 5%;
        margin-bottom: 3%;
    }

    h3{
        background-color: aquamarine;
        margin-bottom: 10%;
        height: 7vh;
        
    }
    .container-da-calc {
        height: 30vh;
        margin: 10% auto 5%;
    }    
    
    footer, .container-da-calc {
        width: 80%;
    }

    footer{
        margin: -1% auto 10%;
        height: 30vh;
         
    }

   
    
}

@media (min-width: 768px) and (max-width: 1024px) {
    h1{
        margin-top: 5%;
        margin-bottom: -2%;
    }
    
    hr{
        width: 80%;
        margin: 7% auto 5%;
    }

    .container-links-das-calcs fieldset{
        padding-bottom: 5%;
    }
    
    .links-calcs li {
        padding-left: 5%;
        margin-bottom: 3%;
    }

    h3{
        background-color: aquamarine;
        margin-bottom: 10%;
        height: 10vh;
         
         
    }

    .container-da-calc {
        height: 30vh;
        margin: 10% auto 5%;
    } 

    .container-da-calc {
        margin: 6% auto;
        height: 25vh;
    }     

    .container-da-calc {
        width: 40%;
    }
    footer{
        width: 80%;
        margin: 0.5% auto 10%;
        height: 20vh;
    }
}

@media (min-width: 1024px) {
    h1{
        margin-top: 3%;
        margin-bottom: -1%;
    }
    
    hr{
        width: 80%;
        margin: 3% auto 3%;
    }

    .container-links-das-calcs fieldset{
        padding-bottom: 5%;
    }
    
    .links-calcs li {
        padding-left: 5%;
        margin-bottom: 3%;
    }

    h3{
        background-color: aquamarine;
        margin-bottom: 10%;
        height: 8vh;
         
         
    }
    
    .container-da-calc {
        height: 30vh; 
        margin: 3.5% auto;
    }     

    .container-da-calc {
        width: 30%;
    }

    footer{
        width: 80%;
        margin: 0.5% auto 10%;
        height: 20vh;
    }

    footer #footer-paragrafo-2{
        margin-top: 1%;
    }
}