@charset "UTF-8";

html {
   background-color: yellow;
}

body {
   font-family: Verdana, Geneva, sans-serif;
   background-color: skyblue;
   margin: 25px;
}

header {
   background-image: url("images/eddiejo.jpg");
   background-size: contain;
   text-align: center;
   padding: 20px;
   font-size: 3em;
   font-family: cursive;
   text-shadow: 0 0 10px red;
   letter-spacing: .3em;
}

h2 {
   font-size: 1.3em;
}

nav {
   background-color: brown;
   padding: 15px;
   text-align: center;
}

nav a {
   padding-left: 10px;
   padding-right: 10px;
   text-decoration: none;
   color: white;
}

nav a:hover {
   text-decoration: underline;
   color: yellow;
}

main {
   padding-left: 25px;
   padding-right: 25px;
}

img {
   width: 20%;
   padding: 25px;
   float: right;
}

footer {
   background-color: brown;
   color: rgba(255, 255, 255, .7);
   font-weight: bold;
   font-size: .9em;
   text-align: center;
   margin-top: 10px;
   padding: 10px;
}

ul li {
   list-style-type: square;
}

blockquote p {
   font-size: 1.1em;
   font-style: italic;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
      'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

blockquote {
   border-top: 2px solid green;
}

blockquote:last-of-type {
   border-bottom: 2px solid green;
}


/* =========================
   Assignment 6 Form Styles
   ========================= */

form {
   width: 90%;
   margin: 0 auto;
   border: 2px solid black;
}

fieldset {
   width: 90%;
   margin: 20px auto;
}

input,
select,
textarea {
   width: 70%;
   margin-bottom: 20px;
}

label {
   width: 100px;
   text-align: right;
   display: inline-block;
   vertical-align: top;
   font-weight: bold;
}

.formfield {
   text-align: center;
}


/* Radio buttons and checkboxes */

div.radio input,
div.radio label,
div.checkbox input,
div.checkbox label {
   display: inline-block;
   width: auto;
}


/* Focus */

input:focus,
select:focus,
textarea:focus {
   background-color: rgb(235, 245, 255);
}


/* Valid fields */

input:valid,
select:valid,
textarea:valid {
   background-color: rgb(235, 255, 235);
}


/* Invalid fields */

input:invalid,
select:invalid,
textarea:invalid {
   background-color: rgb(255, 235, 235);
}


/* Submit and Reset buttons */

input[type="submit"],
input[type="reset"] {
   width: 20%;
   height: 40px;
   border-radius: 25%;
   text-align: center;
   background-color: blue;
   color: white;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
   background-color: white;
   color: blue;
}


/* =========================
   Mobile Styles
   ========================= */

@media screen and (max-width: 799px) {

   header {
      padding: 20px;
      font-size: 2em;
      letter-spacing: normal;
   }

   /* Show only the cabin/beach image */

   .beach-cabin {
      width: 90%;
   }

   .beach-other {
      display: none;
   }

   /* Form */

   form {
      width: 100%;
      font-size: large;
   }

   label {
      display: block;
      text-align: left;
   }

   fieldset {
      width: 100%;
      padding: 5px;
      margin: 0;
   }

   input[type="text"],
   input[type="email"],
   select,
   textarea {
      width: 90%;
      height: 50px;
   }

   input[type="submit"],
   input[type="reset"] {
      width: 40%;
      font-size: 1.5em;
   }
}