*{
 padding: 0;
 margin:0;
 box-sizing: border-box;
}

body {
 width: 100%;
 height: 100%;
 background-color: #90bcb9;
}
#description,
#submit,
label,
#pets,
#tools {
 font-family: "Arial Narrow", Arial, sans-serif;
}
#title {
 color: #337e79;
 font-family: "Arial Rounded MT Bold", Arial, sans-serif;
 font-size: 3em;
 border: 4px solid currentcolor;
 padding: 0.2rem;
 width: 50%;
 text-align: right;
 border-radius: 4px;
}
#description {
 color: #337e79;
 width: 50%;
 display: inline-block;
 font-size: 1.4rem;
}
#description strong {
 color: #fce3ab;
}
label,
#pets,
#tools {
 display: block;
 margin: 2rem 0;
 color: #dc7f43;
 text-align: center;
 font-size: 1.2rem;
}
label strong,
#pets strong,
#tools strong {
 color: #4c8d89;
}
#header-container {
 gap: 1rem;
 display: flex;
 align-items: center;
 margin: 1rem auto 2rem auto;
 width: 70vw;
 max-width: 600px;
 min-width: 300px;
}
#form-div {
 margin: 0 auto;
 background-color: #fce4af;
 padding: 3rem;
 width: 70vw;
 max-width: 600px;
 min-width: 300px;
 border-radius: 8px;
}
input,
select,
textarea {
 display: block;
 padding: 0.3rem;
 border: 0;
}
fieldset {
 border: 0;
 width: 100%;
}
input,
select,
textarea,
.field-content{
 width: 100%;
 margin: 0 auto;
 margin-top: 0.5rem;
 background-color: #fcf0d4;
 border-radius: 4px;
}
.field-content{
 display: flex;
 flex-wrap: wrap;
 gap: 1rem; 
 padding: 1rem;
}
textarea {
 resize: vertical;
}

#pets label,
#tools label {
 display: flex;
 align-items: center;
 width: fit-content;
 margin: 0;
}
#tools label {
 white-space: nowrap;
}
input[type="radio"],
input[type="checkbox"] {
 margin: 0 0.5rem 0 0;
}
option[value=""] {
 color: #7f8487;
}
option[value="1"] {
 color: #c62300;
}
option[value="2"] {
 color: #f26b0f;
}
option[value="3"] {
 color: #ecb365;
}
option[value="4"] {
 color: #519872;
}
option[value="5"] {
 color: #3282b8;
}
option[value="6"] {
 color: #7a0bc0;
}
option {
 font-weight: 700;
}
#submit {
 margin: 2rem auto 3rem auto;
 display: block;
 border: 0;
 background-color: #3d8581;
 color: #fce3ab;
 font-size: 1.4rem;
 padding: 0.5rem;
 border-radius: 4px;
 transition:
  transform 0.2s,
  box-shadow 0.2s,
  background-color 0.2s,
  border 0.2s;
}
#submit:hover {
 background-color: #fcdc94;
 color: #de8d58;
 transform: translateY(-5px) translateX(5px);
 box-shadow:
  -5px 5px 0 var(--shadow-color),
  -3px 3px 0 var(--shadow-color),
  -1px 1px 0 var(--shadow-color);
}
:root {
 --shadow-color: #de8d58;
}
#submit:focus {
 background-color: #ef9c66;
 color: #fce2a8;
 transform: translateY(5px) translateX(-5px);
 box-shadow: 0 0 0;
 border: 3px solid currentcolor;
}
hr {
 background-color: #ef9c66;
 border: 0;
 height: 3px;
 border-radius: 4px;
 width: 100%;
}