@charset "utf-8";

/* 
Name: Maruos Balyos 
Date: March 29, 2026 
Hands-On Project 6-3 
*/ 

body { 
background-color: rgb(210, 210, 210); 
font-family: Arial, Helvetica, sans-serif; 
margin: 0; 
color: black; 
} 

body > h1 { 
font-size: 2.7em; 
margin: 25px 0 20px 0; 
} 

body > p { 
font-size: 1.05em; 
margin: 0 0 18px 0; 
} 

section { 
width: 720px; 
margin: 20px auto 40px auto; 
background-color: rgb(236, 197, 87); 
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 
padding-bottom: 25px; 
} 

section header { 
background-color: rgb(48, 127, 189); 
text-align: center; 
padding: 18px 0; 
margin-bottom: 20px; 
} 

section header h2 { 
color: white; 
font-size: 2.7em; 
font-weight: normal; 
margin: 0; 
} 

section h3 { 
font-size: 2em; 
margin: 0 0 20px 25px; 
} 

.formRow { 
display: flex; 
justify-content: space-between; 
gap: 10px; 
padding: 0 25px; 
} 

fieldset { 
width: 330px; 
border: 2px solid gray; 
min-height: 345px; 
padding: 15px 15px 20px 15px; 
box-sizing: border-box; 
} 

legend { 
font-size: 1.1em; 
font-weight: bold; 
padding: 0 8px; 
} 

label { 
display: inline-block; 
width: 135px; 
font-size: 0.95em; 
margin: 7px 0; 
} 

input[type="text"], 
select { 
width: 140px; 
height: 28px; 
box-sizing: border-box; 
margin-bottom: 8px; 
border: 1px solid gray; 
padding-left: 4px; 
} 

select { 
background-color: white; 
} 

span { 
color: red; 
} 

.checkRow { 
margin-bottom: 15px; 
} 

.checkRow input { 
width: auto; 
height: auto; 
margin-right: 8px; 
} 

.checkRow label { 
width: auto; 
} 

#errorBox { 
width: 660px; 
min-height: 34px; 
background-color: rgb(242, 242, 242); 
border: 1px solid rgb(180, 180, 180); 
margin: 22px auto 0 auto; 
padding: 10px 12px; 
box-sizing: border-box; 
color: rgb(212, 92, 49); 
font-weight: bold; 
} 

.buttonRow { 
text-align: center; 
margin-top: 22px; 
} 

button { 
padding: 8px 28px; 
font-size: 1em; 
cursor: pointer; 
} 

input:invalid { 
background-color: rgb(245, 203, 152); 
}