*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    line-height:1.5;
  }
  
  html, body {
    height: 100%;
    width: 100%;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
  }

#contact{
    background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(32, 29, 31, 0)), url(images/Site\ owner\ using\ the\ CSS\ background\ position\ property.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    background-attachment: fixed;
  }




@media (min-width: 769px) {
  
  form{
    display:inline-block;
      margin:30px 80px 30px 0;
      width:450px;
      padding: 17px;
      background-color:white;
      box-shadow: 20px 20px 20px 0px rgba(0,0,0,0.7);
}

.form-hor{
  width:400px;
  position:relative;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}

input, select {
  width:100%;
  padding: 15px;
  margin:5px 0 18px 0;
  display: inline-block;
  border:none;
  background:whitesmoke;
  border: 2px solid #ccc;
}

.back a{
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.197);
  width: 150px;
  height: 50px;
  padding: 14px;
}

.back:hover{
    opacity: 0.7;
}

.nav{
  position: absolute;
  top: 0;
  right: 0;
}
.nav span{
  color: rgba(255, 255, 255, 0.878);
}

.nav button{
    width:80px;
    height:40px;
    border-radius: 10px;
    margin: 10px 15px;
}

.nav button a{
  text-decoration: none;
  color: black;
}
}

@media (max-width: 768px) {
  
  form{
    display:inline-block;
      margin:5rem auto 5rem auto;
      align-items:center;
      justify-content:center;
      padding: 17px;
}

input, select {
  width:100%;
  padding: 15px;
  margin:5px 0 18px 0;
  display: inline-block;
  border:none;
  background:rgba(245, 245, 245, 0);
  border: 2px solid #ccc;
}

.back a{
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.197);
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 13px;
}

.back:hover{
    opacity: 0.7;
}

.nav{
  position: absolute;
  top: 0;
  right: 0;
}
.nav span{
  font-size:13px;
  color: rgba(255, 255, 255, 0.878);
}

.nav button{
    width:66px;
    height:35px;
    border-radius: 10px;
    margin: 3px 2px;
}

.nav button a{
  text-decoration: none;
  color: black;
  font-size:11px;
}

form label, p{
  color:#fff;
}

input::placeholder{
  color:#fff;
}
}

form button{
   background: rgba(114, 114, 135, 0.476);
  color: #fff;
   float:right;
   width:130px;
   height:60px;
   padding:10px 0;
   margin:17px 0;
   border-radius: 12px;
   border: 2px solid #ccc;
   font-size: 15px;
   font-weight: bold;
}

button:hover{
    cursor: pointer;
    opacity: 0.8;
}



 .form-hor button{
     margin-top: 4rem 0;
 }