@charset "utf-8";
/* CSS Document
alien-language-styles.css
08/23/19
updating the styles to integrate into technovice

*/

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

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

form fieldset {
    background-color: #FEF5BC;
}

form #controls {
    display: inline-block;
    width: 45%;
/*    float: left;*/
    margin-right: 5%;
/*    clear:both;*/
}

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

.secondaryBtn {
    background-color: white;
}


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

div#results{
/*    background-color: yellow;*/
    margin-bottom: 30px;
}

/*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%;
    }
}