I need assistance in making my contact form responsive to match the eagle sprite on this specific webpage: The goal is to ensure that as the screen size changes, the eagle's mouth aligns perfectly with the form. While the sprites and form are both responsive, the challenge lies in maintaining alignment between the form and the eagle's mouth during resizing.
HTML:
<section id="two" class="window">
<img src="assets/contact.jpg" alt="background image">
<div id="sprite1_contact"></div>
<div id="sprite2_contact"></div>
<div id="content">
<div class="contact">
<form>
<fieldset class="name group">
<label for="name" class="name">Name</label>
<input id="name" name="name" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z]+" title="firstname lastname"/>
</fieldset>
<fieldset class="email group">
<label for="email" class="email">Email</label>
<input type="email" id="email" name="email" required title="Submit a valid Email">
</fieldset>
<fieldset class="phone group">
<label for="phone" class="phone">Telephone</label>
<input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number"/>
</fieldset>
<fieldset class="message group">
<label class="message">Message</label>
<input type="text" id="message" required/>
</fieldset>
<fieldset class="send group">
<input type="submit" value="Send" class="sendButton">
</fieldset>
</form>
</div>
</div>
</section>
CSS
#sprite1_contact{
background-image: url('sprite_contact2.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}
#sprite2_contact {
background-image: url('sprite_contact2.png');
width: 27.5%;
height: 0;
padding-bottom: 29%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}
#content{
max-width: 50.694%;
position: absolute;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, .55);
border-radius: 13px;
width: 678px;
margin: 0 0 7.6% 25.9167%;
box-shadow: 0 0 0 2px #000000, 2px 2px 30px 1px rgba(199, 255, 100, 0.73);}
.contact{
width: 100%;
margin: 10px;}
fieldset{
border: 0;
margin: 0;
width: 100%;
padding: 1%;}
.name, .email, .message{
padding-right: 29px;}
label{
color: #d8d9de;
font-family:'apple_chancerychancery';
font-size: 1.2em;
padding-left: 10px;}
input{
margin-right: 50px;
padding: 5px;
text-align: left;
border-radius: 10px;
background: none repeat scroll 0 0 rgba(255, 240, 260, 0.5);}
#name, #email, #phone, #message{
float: right;
color: #253c93;
text-decoration: none;
border: 1px dotted #29FF00;
font-family: 'Calibri', Arial, sans-serif;
font-size: 1em;
width: 73%;}
#name{
width: 73.5%;}
textarea {vertical-align: top;}
div#inner-editor{
padding: 30px;}
#message{
padding-top: 10%;}
.sendButton{
background: rgba(0, 0, 0, 0);
color: #d8d9de;
font-size: 1.2em;
font-family: 'apple_chancerychancery';
padding: 0.8% 4%;
border: none;
margin-left: 42%;
cursor: pointer;
box-shadow: inset 2px 2px 9px rgba(199, 255, 100, 0.73), inset -2px -2px 9px rgba(199, 255, 100, 0.73);}