.build-container {
	display: block;
	width: 85%;
	color: var(--main_c);
	margin: 0 auto;
	padding: 1em;
}

.build-container label {
	color: var(--main_c);
	display: block;
	margin-top: 10px;
}


.build-container textarea {
	margin-top: 10px;
	min-height: 6em;
	width: 100%;
	resize: vertical;
	height: 18vh;
	padding: .5em;
	font: inherit;
	line-height: 1.4;
	outline: none;
	border-color: var(--build_border);
	transition: border-color 0.5s ease;
}

.build-container hr{
	margin-top: 10px;
	margin-bottom: 10px;
}

.build-container textarea:focus {
	border-color: var(--build_focus);
}

.build-container input{
	font-size: clamp(1rem, 1.3vw, 1.5rem);
	color: var(--signin_c);
	padding: 5px;
	margin: 10px;
}

.build-container input[type=submit]{
	padding: 10px;
}

/* Base styles = mobile (< 480px) already your default */

/* Small devices (large phones, 480px and up) */
@media (min-width: 480px) {
    .build-container {
        width: 90%;
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .build-container {
        width: 80%;
    }
}

/* Small laptops/desktops (1024px and up) */
@media (min-width: 1024px) {
    .build-container {
        width: 75%;
    }
}

/* Large desktops (1440px and up) */
@media (min-width: 1440px) {
    .build-container {
        max-width: 1200px; /* prevents it from getting absurdly wide */
        width: 75%;
    }
}