@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@300&family=Tinos&display=swap');

@media screen and (min-width: 768px) and (min-width: 360px), (max-width: 1280px) {
   .navigation {
       position: fixed;}
   .main {
       margin: auto;}
   body {
       margin: auto;}
   banner {
       margin: relative;}
}

.main {
  position: relative;
  overflow: auto;
  margin-top: 0;
  margin-left: 265px;
  padding: 1em;}

h1 {
  margin: 0;
  background-color: rgba(176, 224, 230, .05);
  font-family: Tinos, serif;
  color: black;
  font-size: 2.8em;}

h2 {
  background-color: rgba(176, 224, 230, .05);
  font-family: Tinos, serif;
  font-size: 1.8em;
  color: black;}

fieldset {
  width: 300px;
  border : 1px solid #00BFFF;
  border-radius: 10px;
  padding: 5px;
  text-align: right;}

legend {
  background-color: #efefef;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: right;
  font-family: Lora;
  font-size: 1em;
  text-transform: uppercase;
}

.video {
  float: left;
  position: absolute;
}

.banner {
  width: 1000px;
  height: 20%;
  position: ;
}

body {
   position: relative;
   background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
   margin: 0;
   font-family: Encode Sans Condensed, sans-serif;
   font-size: 1em;}

#about-section {
   background-color: rgba(176, 224, 230, .5);
   margin: .5px, .5px;
}

.text {
  background-color: #B0E0E6;
  text-indent: 290px;
  padding: 10px;
}

.navigation {
  background-color: #f205a8;
  width: 265px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;}

.navigation a {
  text-decoration: none;
  color: black;
  font-size: 1.1em;
  text-align: center;}

.site-info {
  margin: .3em auto;
  text-align: center;
  font-size: 200%;}

.logo {
  width: 150px;
  height: 150px;
  background: white;
  margin: 0 auto .5em;
  border: 5px solid white;
  line-height: 150px;
  color: black;
  text-transform: uppercase;}

.logo:hover {
  border-color: gray;}

.site-links {
  margin: .5em 1em;
  font-family: Lora;
  font-size: 19px;}

.site-links a {
  display: block;
  margin: 0em;}

.site-links a:hover {
  margin-left: 1em;
  font-style: italics;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}

.gallery {
  background-color: gray;
  width: 150px;
  height: 200px;
  float: left;
  margin: 3em auto;
  border: 2px solid gray;
}

.gallery:hover {
  border-color: white;}

#gallery-container {
   margin: 200px auto;
   height: 100px;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   /*background-color: #bdd8f1;*/
}

/*
This gallery is credit to iGadget: https://codepen.io/iGadget
See the Pen: ttps://codepen.io/iGadget/pen/jOEQKNN
*/

 .images {
   display: grid;
   grid-template-rows: 20vh;
   grid-template-columns: repeat(13, 5vw);
   transition: all 0.3s ease(gravity);
   background-color: #82a6cb;
   border-radius: 10px;
   padding: 0.25em;
  }

/* Courtesy https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */

  .images:hover {
    display: flex;
    flex-grow: 0;
  }

  .images:active {
    display: flex;
    flex-grow: 2;
  }

 img {
   object-fit: cover;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   text-align: center;
   transition: all 0.15s ease(downhill);
   position: flex;
   box-shadow: 0 0 0 #000 0;

   /* APRIL TO JUSTINE: Thank you for all your help; appreciate you! */
   /*opacity: 0.67;*/
   /*filter: sepia(80%) hue-rotate(180deg);*/
}

 img:first-child {
   border-radius: 10px 0 0 10px;
}

 img:last-child {
   border-radius: 0 10px 10px 0;
}
/*I am guessing this area controls size, but changes do not have desired effect/s.*/
#gallery-container img:hover~img {
  left: 1%;
  width: 10%;
  height: 10%;
}

#gallery-container img:first-child:hover {
  left:1%;
}

#gallery-container img:last-child:hover {
  left: 1%;
}

.social-links {
  background-color: inherit;
  width: 40px;
  height: 40px;
  margin: 3em auto;
  float: right;}

.social-links a {
  display: block;
  margin: 5px;}

.social-links a:hover {
  margin-left: 2em;
}

/* Forms are courtesy the WWW as I forgot to save link page/s with info but they are not mine */

/* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 13px;
  font-size: 13px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin: 25px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color:}