/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	*{ //border: thin solid black; margin: 0;}
	body{ margin: 0 auto; width: 100%;	border-left: 1.5px solid gold; border-right: 1.5px solid gold; }
	header{ text-align: center; padding-top: 10px;  background-color: gold; color: black;}
	h1{ letter-spacing: 20px; text-shadow:  0px 0px 5px green; }
	nav { text-align: center; display: block; padding-bottom: 10px; }
	nav a{ text-decoration: none; padding: 5px; color: green; }
		
	.hire{ width: 95%; margin: 0 auto; clear: both; display: grid; justify-content: center; margin-top: 10px; border-top: 1.5px solid gold; background-color: lightyellow;}
	form{ margin-top: 10px; width: 95%; margin: 0 auto; font-size: 13px;}
	fieldset { border: 1px solid green; padding: 12px; }
	legend { font-size: 16px; padding: 0 10px; }
	
	input[type="text"],
	input[type="email"],
	input[type="password"], input[type="tel"], input[type="date"], input[type="file"], select {
		width: 100%;
		padding: 5px;
		margin-bottom: 20px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		font-size: 16px;
	}
	input[type="radio"]{ padding: 0px; }
	input[type="submit"], input[type="reset"] {
            width: 100%;
            padding: 10px;
			margin-top: 5px;
            background-color: gold;
            color: black;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
	input[type="submit"]:hover { background-color: #E6C200; }
	
	.terms-label {
		margin-top: 10px;
		display: flex;
		//align-items: center;
		gap: 5px;
		font-size: 14px;
		cursor: pointer;
	}
	/* Styling the clickable legal link */
	.terms-link { color: #0066cc; text-decoration: none; }
	.terms-link:hover { text-decoration: underline; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
/*@media only screen and (max-width: 600px) {*/
@media only screen and (min-width: 600px) and (max-width: 768px){
	*{ //border: thin solid black; margin: 0;}
	body{ margin: 0 auto; width: 100%;	border-left: 1.5px solid gold; border-right: 1.5px solid gold; }
	header{ text-align: center; padding-top: 10px;  background-color: gold; color: black;}
	h1{ letter-spacing: 20px; text-shadow:  0px 0px 5px green; }
	nav { text-align: center; display: block; padding-bottom: 10px; }
	nav a{ text-decoration: none; padding: 5px; color: green; }
	
	.hire{ width: 95%; margin: 0 auto; clear: both; display: grid; justify-content: center; margin-top: 10px; border-top: 1.5px solid gold; background-color: lightyellow;}
	form{ margin-top: 10px; width: 95%; margin: 0 auto; font-size: 13px;}
	fieldset { border: 1px solid green; padding: 12px; }
	legend { font-size: 16px; padding: 0 10px; }
	input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="date"], [type="file"]){ width: 34%; padding: 3px; margin-right: 15px; margin-bottom: 10px; }
	input[type="radio"]{ padding: 5px; }
	select{ width: 39%; padding: 3px; margin-right: 15px; margin-bottom: 10px; }
	input[type="submit"], input[type="reset"]{ 
		width: 150px; 
		margin-right: 20px; 
		margin-top: 10px; 
		padding: 10px;
		background-color: gold;
		color: black;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}
	input[type="submit"]:hover, input[type="reset"]:hover { background-color: #E6C200; }	
	
	.terms-label {
		margin-top: 10px;
		display: flex;
		//align-items: center;
		//gap: 5px;
		font-size: 14px;
		cursor: pointer;
	}
	/* Styling the clickable legal link */
	.terms-link { color: #0066cc; text-decoration: none; }
	.terms-link:hover { text-decoration: underline; }
}

/* Medium devices (landscape tablets, 768px and up) */
/*@media only screen and (max-width: 768px) {*/
@media only screen and (min-width: 768px) and (max-width: 992px) {
	*{ //border: thin solid black; margin: 0;}
	body{ margin: 0 auto; width: 760px;	border-left: 1.5px solid gold; border-right: 1.5px solid gold; }
	header{ text-align: center; padding-top: 10px;  background-color: gold; color: black;}
	h1{ letter-spacing: 20px; text-shadow:  0px 0px 5px green; }
	nav { text-align: center; display: block; padding-bottom: 10px; }
	nav a{ text-decoration: none; padding: 5px; color: green; }
	
	.hire{ width: 95%; margin: 0 auto; clear: both; display: grid; justify-content: center; margin-top: 10px; border-top: 1.5px solid gold; background-color: lightyellow;}
	form{ margin-top: 10px; width: 95%; margin: 0 auto; font-size: 13px;}
	fieldset { border: 1px solid green; padding: 12px; }
	legend { font-size: 16px; padding: 0 10px; }
	input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="date"], [type="file"]){ width: 35%; padding: 5px; margin-right: 15px; margin-bottom: 10px; }
	input[type="radio"]{ padding: 5px; }
	select{ width: 40%; padding: 5px; margin-right: 15px; margin-bottom: 10px; }
	input[type="submit"], input[type="reset"]{ 
		width: 150px; 
		margin-right: 20px; 
		margin-top: 10px; 
		padding: 10px;
		background-color: gold;
		color: black;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}
	input[type="submit"]:hover, input[type="reset"]:hover { background-color: #E6C200; }
	
	.terms-label {
		margin-top: 10px;
		display: flex;
		//align-items: center;
		//gap: 5px;
		font-size: 14px;
		cursor: pointer;
	}
	/* Styling the clickable legal link */
	.terms-link { color: #0066cc; text-decoration: none; }
	.terms-link:hover { text-decoration: underline; }
	
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	*{ //border: thin solid black; margin: 0;}
	body{ margin: 0 auto; width: 1000px; border-left: 1.5px solid gold; border-right: 1.5px solid gold; }
	header{ text-align: center; padding-top: 10px;  background-color: gold; color: black;}
	h1{ letter-spacing: 30px; text-shadow:  0px 0px 5px green; }
	nav { text-align: center; display: block; padding-bottom: 20px; }
	nav a{ text-decoration: none; padding: 10px; color: green; }	
	
	.hire{ clear: both; display: grid; justify-content: center; margin-top: 10px; border-top: 1.5px solid gold; background-color: lightyellow;}
	form{ margin-top: 10px; }
	fieldset { //border: 1px solid#ddd; border: 1px solid green; padding: 12px; }
	legend { font-size: 18px; padding: 0 10px; }
	input{	padding: 3px; margin-right: 10px; margin-bottom: 10px; }
	input[type="submit"], input[type="reset"]{ 
		width: 150px; 
		margin-right: 20px;
		margin-top: 10px; 
		padding: 10px;
		background-color: gold;
		color: black;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}
	input[type="submit"]:hover, input[type="reset"]:hover { background-color: #E6C200; }

	/* Flexbox alignment for checkbox and text */
	.terms-label {
		margin-top: 10px;
		display: flex;
		//align-items: center;
		//gap: 5px;
		font-size: 14px;
		cursor: pointer;
	}
	/* Styling the clickable legal link */
	.terms-link { color: #0066cc; text-decoration: none; }
	.terms-link:hover { text-decoration: underline; }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
}