* {
  margin: 0;
  padding: 0
}

/*header*/
header {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  height: 8.75em;
  background-color: #ffd6e0
}

/*logo*/
header img {
  max-width: 100%;
  max-height: 100%
}

/*navbar*/
nav {
  position: sticky;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  top: 0;
  z-index: 999;
  height: 3em;
  background-color: white;
  border-bottom: 1px solid #91867a
}

nav ul {
  list-style: none;
  text-align: center
}

nav li {
  display: inline
}

nav a {
  position: relative;
  top: 0.85em;
  margin-left: 5%;
  margin-right: 5%;
  font-family: 'Slabo 27px', serif;
  font-size: 1.1em;
  color: #91867a;
  text-decoration: none;
  max-height: 100%;
  max-width: 100%
}

nav a:hover {
  color: #ffc1dc
}

/*header image*/
.header {
  text-align: center;
  position: relative
}

.header p {
  position: absolute;
  color: white;
  font-family: 'Slabo 27px', serif;
  font-size: 3.2em;
  z-index: 888;
  left: 36%;
  top: 50%;
}

.header img {
  position: relative;
  outline: 2px solid white;
  outline-offset: -10px;
  width: 75%;
  top: 2em
}

/*form*/
.body {
  width: 75%;
  margin: 4% auto 0 auto;
  height: 20em
}

#name {
  position: relative;
  height: 10%;
  top: 5%;
  left: 20%;
  font-family: 'Slabo 27px', serif;
  outline: 0;
}

#birds {
  position: relative;
  top: 20%;
  right: 2.8%;
  font-family: 'Slabo 27px', serif;
  height: 10%
}

#date {
  position: relative;
  font-family: 'Slabo 27px', serif;
  right: 22%;
  top: 35.3%
}

#qn {
  position: relative;
  top: 55%;
  font-family: 'Slabo 27px', serif;
  right: 48.6%
}

#accept {
  position: relative;
  right: 43%;
  top: 55%;
  font-family: 'Slabo 27px', serif;
}

#deny {
  position: relative;
  right: 40%;
  top: 55%;
  font-family: 'Slabo 27px', serif;
}

#qn2 {
  position: relative;
  top: 70%;
  font-family: 'Slabo 27px', serif;
  left: 3.17%
}

#comment {
  position: relative;
  left: 3.3%;
  top: 95%;
  resize: none;
  outline: none
}

input[type="range"] {
  position: relative;
  top: 71%;
  left: 5%;
  width: 25%;
}

#rangeuseful {
  position: relative;
  width: 3%;
  text-align: center;
  font-family: 'Slabo 27px', serif;
  top: 63%;
  right: 9.5%
}

label[for="name"] {
  position: relative;
  right: 15%;
  top: 4.7%;
  font-family: 'Slabo 27px', serif;
}

label[for="birds"] {
  position: relative;
  right: 27.8%;
  font-family: 'Slabo 27px', serif;
  top: 20%
}

label[for="date"] {
  position: relative;
  right: 45.07%;
  font-family: 'Slabo 27px', serif;
  top: 35.3%;
}

#textcom {
  position: relative;
  right: 37.2%;
  font-family: 'Slabo 27px', serif;
  top: 37%
}

hr {
  margin: 8% auto 0 auto;
  width: 75%;
}

#submit2 {
  position: relative;
  top: 105%;
  right: 80.61%;
  font-family: 'Slabo 27px', serif;
  background-color: #ffd6e0;
  outline: none;
  border: none;
  cursor: pointer;
  border-radius: 25px;
  width: 7%;
  height: 10%
}

/*footer*/
footer {
  text-align: center;
  width: 80%;
  height: 6.5em;
  margin: 25% auto 0 auto;
  background-color: #ffd6e0;
  display: grid;
  grid-template-columns: 1fr 1fr
}

footer span {
  position: absolute;
  border: 0.5px solid black;
  height: 3.8em;
  left: 50%;
  margin-top: 1.7%
}

footer p {
  font-family: 'Slabo 27px', serif;
  font-size: 0.89em;
  margin-right: 17%;
  margin-bottom: 2%
}

#subscribe {
  position: relative;
  height: 2em;
  border: 0.5px solid #91867a;
  outline: none;
  font-family: 'Slabo 27px', serif;
}

#submit {
  position: relative;
  width: 8%;
}

footer form {
  margin-right: 50%;
  margin-top: 3%
}

.social {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 7%
}

.fb img {
  position: relative;
  width: 20%;
  left: 50%
}

.ins img {
  position: relative;
  width: 16%;
  top: 5%;
  right: 50%
}

.twt img {
  position: relative;
  width: 20%;
}

/*copyright*/
.copyright {
  width: 80%;
  margin: 1% auto 0.5% auto;
  font-family: 'Slabo 27px', serif;
  font-size: 0.75em
}