@charset "utf-8";

/* 
Author: Elizabeth Gress
Date: 09/18/2023
*/

.flex-container {
    display: flex;
    display: -webkit-flex;
}

fieldset {
    padding: 10px 10px;
    margin: 5px;
    width: 30%;
	font-size: 1.8vw;
}

.formRow {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    margin-bottom: 10px;
}

.formSection {
    padding: 10px;
    margin: 5px;
    width: 30%;
}

textarea, input {
    width: 100%;
    height: 40%;
}

#cakeType select {
    width: 100%;
    max-width: 100%;
}

/* Ratings Form */
.rateSection {
    width: 100%;
    max-width: 400px; 
    margin-bottom: 20px;
    text-align: center;
}

label {
    display: block;
    margin-bottom: 5px;
    font-size: 1.4vw;
}

/* Style for the slider */
input[type="range"] {
    width: 50%;
}

/* Style for the number output */
output {
    display: block;
    margin-top: 5px;
    font-size: 1.0vw;
    margin-bottom: 10px;
}

textarea#commBox {
    width: 100%;
    height: 200px;
}

/* Input background color and images */

input[type="text"]:focus:valid {
    background: hsl(180, 100%, 95%);
}

input[type="text"]:focus:invalid {
    background: hsl(0, 100%, 90%);
}

div#buttons {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    width: 15%;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: 10px;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .formRow {
        margin-right: 0;
    }
}