@charset "utf-8";

/*
author:Boe Mathewsob
Date:10/5/2022
filename: Style.css
*/


/* HTML and Body styles */

html {
   background: rgb(117, 202, 199) url(../images/BACKGROUND.png);
   font-family: Verdana, Geneva, sans-serif;
   height: 100%;
}

body {
   background-color: white;
   box-shadow: rgb(51, 51, 51) 20px 0px 40px,  rgb(51, 51, 51) -20px 0px 40px,
               inset rgb(51, 21, 21) 0px 0px 40px;
   border-left: 3px solid rgb(51, 51, 51);
   border-right: 3px solid rgb(51, 51, 51);
   min-height: 100%;  
   margin: 0px auto;
   min-width: 500px;
   max-width: 1300px;  
   width: 100%;
}


/* Header styles */

header img#logoimg {
   width: 100%;
}

header {
   background:  rgb(0, 0, 0);
   border-bottom: 1px solid rgb(0, 0, 0);
   color: white;
   text-decoration: none;
   text-align: center;

   
}


/* Navigation list styles */

header nav ul{
   
   list-style: none;
   list-style-image: none;
   text-decoration: none;

}
header nav a{
   
   text-decoration: none;

}

header nav ul li {
   font-size: 1.2em; 
   line-height: 2.3em; 
   height: 2.3em;
   padding: 0px 10px;


}

header nav ul li a {
   color: white;
   display: block;
   width: 100%;


}

header nav ul li a:hover {
   color: rgb(117, 202, 199);
}

a#navicon {
   display: none;
}



section {
   margin: 30px 5%;
}

section h1 {
   font-family: Arial, Helvetica, sans-serif Verdana, sans-serif;
   font-size: 1.5em;
   color: rgb(0, 0, 0);
   margin-bottom: 35px;
}

section p {
   line-height: 1.4em;
   margin: 15px 0px;
}



/* Form Layout Styles */

form {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   padding-left: 8%;
   padding-right: 8%;
   background-color: rgb(192, 212, 216);
   
} 

fieldset {
   background-color: rgb(117, 202, 199);
   -webkit-flex: 1 1 300px;
   flex: 1 1 300px; 
   margin: 10px;  
   
}

fieldset#petInfo {

   background: url(../images/CAT.png) top right / 50% no-repeat content-box, rgb(117, 202, 199);
}
fieldset#boarding {

   background: url(../images/kennel.png) bottom right / 80% no-repeat content-box, rgb(117, 202, 199);
}
fieldset#custinfo {

   background: url(../images/person.png) top right / 65% no-repeat content-box, rgb(117, 202, 199);
}
fieldset#compEntry {

   background: url(../images/bunny.png) bottom right / 50% no-repeat content-box, rgb(117, 202, 199);
}
div {
   margin: 5px;
   width: 100%;
}

legend {
   color: rgb(255, 255, 255);
   background-color: rgb(26, 57, 66);
   text-align: center;
   font-size: large;
   padding: 2%;
}

label {
   display: inline-block;
   width: 120px;
}


fieldset#pickupInfo label, fieldset#deliveryInfo label {
   margin-bottom: 10px;
   width: 100%;
}

textarea {
   display: block;
   width: 90%;
   height: 100px;
}

input[type="submit"] {
   height: 60px;
   width: 200px;
}
input[type="reset"] {
   height: 60px;
   width: 200px;
   float: right;

}
form img.slider {
   
   width: 15px;
}


/* Validation Styles */

input#customerName:focus:valid,  
input#phone:focus:valid, 
input#mail:focus:valid{
  background: rgb(220,255,220) url(../images/valid.png) bottom right/contain no-repeat; /*  */
}

input#customerName:focus:invalid, 
input#phone:focus:invalid, 
input#mail:focus:invalid{
  background: rgb(255,232,233) url(../images/invalid.png) bottom right/contain no-repeat; /*  */
}

footer {
   Clear: both;
   color: rgb(255, 255, 255);
   background-color: rgb(117, 202, 199);
   text-align: center;

}