body {


    background-image: url("images/bangunan.jpg");

    display: flex;

    justify-content: center;

    align-items: center;

    height: 99vh;

    flex-direction: column;

}

{

    font-family: cursive;

    box-sizing: padding-box;

}

form {

    width: 750px;

    border: 8px solid rgb(24, 0, 0);

    padding: 20px;



    background-image: url("images/paip.png");
   
    border-radius: 20px;

}

h2 {

    text-align: center;

    margin-bottom: 20px;

}

input {

    display: block;

    border: 2px solid #ccc;

    width: 95%;

    padding: 10px;

    margin: 10px auto;

    border-radius: 5px;

}

label {

    color: rgb(7, 4, 0);

    font-size: 18px;

    padding: 10px;

}

button {

    float: right;

    background: rgb(12, 12, 12);

    padding: 10px 15px;

    color: #fff;

    border-radius: 5px;

    margin-right: 10px;

    border: none;
    
    background-color:#0a0a23;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);
    min-height:30px; 
    min-width: 120px;

}

button:hover{

    opacity: .10;
    background-color:#002ead;
    transition: 8.7s;

}

.error {

   background: #F2DEDE;

   color: #0c0101;

   padding: 10px;

   width: 195%;

   border-radius: 5px;

   margin: 20px auto;

}

h1 {

    text-align: center;

    color: rgb(235, 65, 65);

}

a {

    float: right;

    background: rgb(183, 225, 233);

    padding: 10px 15px;

    color: #fff;

    border-radius: 10px;

    margin-right: 10px;

    border: none;

    text-decoration: none;

}

a:hover{

    opacity: .17;

}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:left;
 width:995px;	
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#1B4F72;
}
#wrapper h1 p
{
 font-size:18px;
}
#contact_form_div
{
 width:330px;
 margin-left:320px;
 padding:10px;
 background-color:#1B4F72;
}
#contact_form_div #contact_label
{
 margin:15px;
 margin-bottom:30px;
 font-size:25px;
 font-weight:bold;
 color:white;
 text-decoration:underline;
}
#contact_form_div input[type="text"]
{
 width:230px;
 height:40px;
 border-radius:2px;
 font-size:17px;
 padding-left:5px;
 border:none;
}
#contact_form_div textarea
{
 width:230px;
 height:70px;
 border-radius:2px;
 font-size:17px;
 padding5px;
}
#contact_form_div input[type="submit"]
{
 width:230px;
 height:40px;
 border:none;
 border-radius:2px;
 font-size:18px;
 background-color:#85C1E9;
 border-bottom:3px solid #3498DB;
 color:#1B4F72;
 font-weight:bold;
}

@media only screen and (min-width:700px) and (max-width:995px)
{
 #wrapper
 {
  width:100%;
 }
 #wrapper h1
 {
  font-size:30px;
 }
 #contact_form_div
 {
  width:50%;
  margin-left:25%;
  padding-left:0px;
  padding-right:0px;
 }
 #contact_form_div input[type="text"]
 {
  width:80%;
 }
 #contact_form_div textarea
 {
  width:80%;
 }
 #contact_form_div input[type="submit"]
 {
  width:80%;
 }
}
@media only screen and (min-width:400px) and (max-width:699px)
{
 #wrapper
 {
  width:100%;
 }
 #wrapper h1
 {
  font-size:30px;
 }
 #contact_form_div
 {
  width:60%;
  margin-left:20%;
 }
 #contact_form_div input[type="text"]
 {
  width:80%;
 }
 #contact_form_div textarea
 {
  width:80%;
 }
 #contact_form_div input[type="submit"]
 {
  width:80%;
 }
}
@media only screen and (min-width:100px) and (max-width:399px)
{
 #wrapper
 {
  width:100%;
 }
 #wrapper h1
 {
  font-size:25px;
 }
 #contact_form_div
 {
  width:90%;
  margin-left:5%;
  padding-left:0px;
  padding-right:0px;
 }
 #contact_form_div input[type="text"]
 {
  width:80%;
 }
 #contact_form_div textarea
 {
  width:80%;
 }
 #contact_form_div input[type="submit"]
 {
  width:80%;
 }
}