@charset "utf-8";

/* =================================
   BACKGROUND
   ================================= */

html {
   background-image: url("images.jpg");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   background-attachment: fixed;
}


/* =================================
   BODY
   ================================= */

body {
   font-family: Verdana, Geneva, sans-serif;
   color: rgb(45, 55, 65);
   background-color: rgba(245, 248, 250, 0.95);

   width: 90%;

   margin-left: auto;
   margin-right: auto;

   margin-top: 0;
   margin-bottom: 0;
}


/* =================================
   HEADER
   ================================= */

header {
   text-align: center;
   padding: 0;
}

header img {
   width: 100%;
   display: block;
}


/* =================================
   HEADINGS
   ================================= */

h1,
h2 {
   text-shadow: 4px 6px 5px gray;
}

h2 {
   font-size: 1.3em;
}


/* =================================
   NAVIGATION
   ================================= */

nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

nav li {
   display: block;
   width: 20%;
   float: left;
}

nav a {
   display: block;

   background-color: rgb(35, 65, 100);

   color: white;

   line-height: 2.8em;

   text-decoration: none;

   text-align: center;

   /* Assignment 7 transitions */
   transition:
      background-color 0.5s ease-in 0.2s,
      color 0.5s ease-in 0.2s,
      font-size 1s ease;
}

nav a:hover {
   background-color: rgb(70, 130, 180);

   color: rgb(255, 235, 150);

   /* Assignment 7 hover font size */
   font-size: 1.2em;
}


/* =================================
   MAIN
   ================================= */

main {
   padding: 20px;

   /* Assignment 7: top margin */
   margin-top: 70px;
}


/* =================================
   MAIN IMAGES
   ================================= */

main > img {
   width: 25%;

   padding: 25px;

   float: right;
}


/* =================================
   EDUCATION VIDEO
   ================================= */

.video-container {
   position: relative;

   width: 100%;

   max-width: 800px;

   aspect-ratio: 16 / 9;

   margin: 20px 0;
}

.video-container iframe {
   position: absolute;

   top: 0;
   left: 0;

   width: 100%;
   height: 100%;

   border: 0;
}


/* =================================
   ASSIGNMENT 6 FORM
   ================================= */

form {
   width: 90%;
}


/* =================================
   FIELDSET
   ================================= */

fieldset {
   width: 90%;

   padding: 5px;

   margin-right: 10px;

   margin-bottom: 10px;
}


/* =================================
   FORM LABELS
   ================================= */

form label {
   display: block;

   position: absolute;

   padding: 5px;

   width: 30%;
}


/* =================================
   INPUT AND SELECT
   ================================= */

form input,
form select {
   display: block;

   position: relative;

   left: 30%;

   padding: 5px;

   height: auto;

   width: 60%;

   box-sizing: border-box;
}


/* =================================
   TEXTAREA
   ================================= */

form textarea {
   display: block;

   position: relative;

   left: 30%;

   padding: 5px;

   width: 60%;

   box-sizing: border-box;

   margin-bottom: 10px;
}


/* =================================
   RADIO BUTTONS
   ================================= */

form input[type="radio"] {
   display: inline;

   position: inherit;

   left: 0;

   width: auto;
}


/* =================================
   RADIO LABELS
   ================================= */

form label.radio {
   display: inline;

   position: inherit;

   padding: 5px;

   width: auto;
}


/* =================================
   SUBMIT AND RESET
   ================================= */

form input[type="submit"],
form input[type="reset"] {
   display: block;

   float: left;

   position: relative;

   left: 0;

   text-align: center;

   width: 40%;

   padding: 10px;

   margin-left: 5%;

   margin-right: 5%;

   margin-bottom: 10px;
}


/* =================================
   FORM FOCUS
   ================================= */

form input:focus,
form select:focus,
form textarea:focus {
   background-color: rgb(255, 255, 220);

   outline: 2px solid rgb(70, 130, 180);
}


/* =================================
   VALID FORM DATA
   ================================= */

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


/* =================================
   INVALID FORM DATA
   ================================= */

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


/* =================================
   FOOTER
   ================================= */

body > footer {
   clear: both;

   background-color: rgb(35, 65, 100);

   color: rgba(255, 255, 255, 0.9);

   font-weight: bold;

   font-size: 0.9em;

   line-height: 2em;

   text-align: center;

   margin-top: 10px;

   padding: 10px;
}


/* =================================
   EDUCATION LIST
   ================================= */

ul {
   list-style-type: square;
}


/* =================================
   VACATION GALLERY
   ================================= */

.gallery {
   display: flex;

   flex-flow: row wrap;

   justify-content: center;

   gap: 20px;

   clear: both;
}

.gallery figure {
   margin: 0;

   padding: 0;
}

.gallery img {
   width: 100%;

   height: 220px;

   object-fit: cover;

   display: block;
}

.gallery figcaption {
   text-align: center;

   font-weight: bold;

   padding: 8px;
}


/* =================================
   MOBILE
   Maximum width: 768px
   ================================= */

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

   /* BODY */

   body {
      width: 100%;

      margin: 0;
   }


   /* NAVIGATION */

   nav li {
      float: none;

      font-size: x-large;

      width: 100%;
   }

   nav a {
      border-bottom: 1px solid black;
   }


   /* MAIN IMAGE */

   main > img {
      width: 90%;

      float: none;

      display: block;

      margin-left: auto;

      margin-right: auto;

      padding: 25px;

      box-sizing: border-box;
   }


   /* VACATION GALLERY */

   .gallery {
      display: flex;

      flex-flow: column nowrap;

      align-items: center;
   }

   .gallery figure {
      width: 100%;
   }

   .gallery img {
      width: 100%;

      height: auto;
   }


   /* ASSIGNMENT 6 MOBILE FORM */

   form {
      width: 100%;

      font-size: large;
   }


   /* FIELDSET */

   fieldset {
      width: 100%;

      padding: 5px;

      margin: 0;

      box-sizing: border-box;
   }


   /* INPUT AND SELECT */

   form input,
   form select {
      position: inherit;

      display: block;

      height: 50px;

      padding: 5px;

      width: 90%;

      box-sizing: border-box;
   }


   /* LABEL */

   form label {
      position: inherit;

      display: block;

      height: 50px;

      width: 90%;

      padding: 5px;

      box-sizing: border-box;
   }


   /* TEXTAREA */

   form textarea {
      position: inherit;

      display: block;

      width: 90%;

      padding: 5px;

      box-sizing: border-box;
   }


   /* RADIO BUTTONS */

   form input[type="radio"] {
      display: inline;

      position: inherit;

      height: auto;

      width: auto;
   }


   /* RADIO LABELS */

   form label.radio {
      display: inline;

      position: inherit;

      height: auto;

      width: auto;
   }


   /* SUBMIT AND RESET */

   form input[type="submit"],
   form input[type="reset"] {
      float: none;

      width: 90%;

      margin: 10px;

      font-size: 1.2em;
   }

}


/* =================================
   DESKTOP
   Minimum width: 769px
   ================================= */

@media only screen and (min-width: 769px) {

   /* BACKGROUND */

   html {
      background-image: url("images.jpg");

      background-repeat: no-repeat;

      background-position: center center;

      background-size: cover;

      background-attachment: fixed;
   }


   /* MAIN IMAGE */

   main > img {
      width: 25%;

      padding: 25px;

      float: right;
   }


   /* VACATION GALLERY */

   .gallery figure {
      flex: 0 1 45%;
   }

}


/* =================================
   LARGE DESKTOP
   Minimum width: 1101px
   ================================= */

@media only screen and (min-width: 1101px) {

   .gallery figure {
      flex: 0 1 22%;
   }

}