@charset "utf-8";
/* CSS Document
white-elephant-styles.css
08/12/19
updating the styles to integrate into technovice

*/

textarea {
    width: 90%;
    height: 350px;
    padding: 20px;
    /*keeps information in text area from crowding the edge*/
    text-align: right;
}

.hideElement {
    display: none;
}

/*when default white was used, it looked too pale*/
form fieldset legend {
    padding: 10px;
}

form fieldset {
    background-color: #FEF5BC;
}

form fieldset label {
    margin-right: 10px;
    font-style: italic;
    font-size: 20px;
}


form #controls label {
    font-size: 16px;
}

form #total {
    text-align: center;
    margin-bottom: 5px;
    margin-top: -20px;
}

form #controls {
    width: 45%;
    float: left;
    margin-right: 5%;
}

form #results {
    width: 50%;
    float: right;
    font-size: 14px;
}

main {
    /*sticky footer help again*/
    min-height: calc(100vh - 125px);
    margin-top: -10px;
    padding: 3%;
}

.secondaryBtn {
    background-color: white;
}

#reload {
    background-color: white;
    padding: 5px;
    border-radius: 5px;
    margin-top: 2px;
}

#submit {
    background-color: #FF4F2F;
    padding: 10px;
    color: white;
    border-radius: 10px;
}

/*gray band*/
@media (min-width: 200px) {
    textarea {
        padding: 5px;
        font-size: 10px;
    }
}

/*black band*/
@media (min-width: 400px) {
    textarea {
        padding: 10px;
        font-size: 12px;
    }
}

/*red band*/
@media (min-width: 600px) {
    textarea {
        padding: 20px;
        font-size: 14px;
    }
}

/*blue band*/
@media (min-width: 800px) {
    main {
        padding-top: 10px;
        padding-left: 20%;
        padding-right: 20%;
        padding-bottom: 5px;
    }

    #bigContent main details p {
        font-size: 16px;
    }

    form fieldset {
        padding-top: 5px;
        padding-bottom: 10px;
    }

    form #total {
        margin-bottom: 5px;
        margin-top: 0px;
    }
}

/*green band*/
@media (min-width: 1200px) {

    main {
        padding-left: 30%;
        padding-right: 30%;
    }

    #inputName {
        width: 100%;
    }
}