.wrapper {
   margin: 0 auto;
   max-width: 900px;
   }
   .logo {
      width: 14%;
      border-radius: 50%;
      padding: 2rem 0 3rem 0;
      min-width: 100px;
      max-width: 100px
   }
   header {
   background-color: white;
   grid-column: span 2;
   display: flex;
   text-align: left;
   font-size: 125%;
   align-items: center;
   justify-content: left;
   }
/* fixed-element navigation bar start*/
.fixed-element {
      position: fixed;
      top: 10px; /* Distance from the top of the viewport */
      right: 10px; /* Distance from the right of the viewport */
      width: 200px;
      height: 300px;
      background-color: lightblue;
      padding: 10px;
      z-index: 3;
 }
   nav {
      background-color: #e1eff2;
      height: 280px;
        /* tried to fill in the light blue background here for when the dropdown menu extends*/
   }
   /* adding the light blue background to dropdown list items*/
   nav li{
      padding: 1rem 3rem 1rem 2rem;
      justify-content: space-evenly;
      background-color: #e1eff2;
      line-height: 1.6;
      white-space: nowrap;
   }
   nav a{
  display:inline-block;
  color: black;
  padding: 5px 10px;
  border-radius: 1rem;
  text-decoration: none;
  font-size: 20px;
  transition: all .25s ease-out;
  white-space: nowrap;
   }
   nav a:hover {
      background: white;
      padding: 5px 10px;
      border-radius: 1rem;
   }
   nav a:active {
      transform: scale(0.9)
   }
ul#actions {
    display:none;
}
.actions:hover {
display: flex;
flex-direction: row-reverse;
}
.actions:hover ul#actions {
 display: flex;
 flex-direction: row-reverse;
}
.actions {
   list-style-type: none;
}
/* fixed-element navigation bar end*/
   .homepage {
   background-color: #f1f1f1;
   padding: 2em 2em 4em 3em;
   }
   main.homepage h1 {
      font-size: 250%;
   }
   body {
      font-family:Verdana, Geneva, Tahoma, sans-serif
   }
   .lato-regular {
      font-family: "Lato", serif;
      font-weight: 400;
      font-style: normal;
      font-size: 120%;
      line-height: 1.3;
   }
   h1.lato-regular {
      font-size: 200%
   }
   header h1 {
      background-color: white;
   }
   main h1 {
      font-size: 200%;
      text-align: center;
   }
   main p {
      text-align: center;
   }
   .homepage-imgs:hover {
      outline: 7px solid lightblue;
   }
footer {
   clear: both;
   grid-column: span 2;
   padding: 3rem 0 0 0;
}
.footer-links {
   justify-content: center;
}
footer p {
   text-align: center;
}
.getintouch {
   font-size: 200%;
}
.footer-links {
   text-align: center;
}
.my-email {
   text-decoration: none;
   color:dimgray;
   font-size: 18px;
}
/*cutoff for classes in other pages*/

/*Productions start*/
.productions-banner {
   padding: 3rem 2rem 2rem 3rem;
}
.productions {
   display: grid;
   justify-content: center;
   align-items: center;
   background-color: #f1f1f1;
}
.production-text {
   font-size: 135%;
   line-height: 1.4;
   justify-content: center;
   align-items: center;
   padding: 0 2rem 0 2rem;
}
main h2.production-titles {
   align-items: center;
   justify-content: center;
   color:rgb(242, 157, 88);
   /*this title didnt want to center*/
   padding:0 0 0 12rem;
}
main p.work-timelines {
   color:dimgray;
}
.episodes-link {
   padding: 0rem 2rem 4rem 3.2rem;
   justify-content: center;
   align-items: center;
}
.episodes-link img:hover {
   outline: 7px solid rgb(242, 157, 88);
}
/*Productions end*/

/*Trad art start*/
.wrapper-tradart {
   margin: 0 auto;
   max-width: 1800px;
   }
.tradart-banner {
position:relative;
padding: 0 0 33.5em 0;
background-color:#f0f7f9;
}
.item1 {
   position: absolute;
   top: 3em;
   left: 6em;
  z-index: 1; /* Lower value, appears behind */
}
.item1 img {
   flex: 1 1 auto;
   max-width: 100%;
   height: auto;
}
.item2 {
   position:absolute;
   top: 12rem;
   left: 53rem;
   width: 850px;
   height: 300px;
   background-color: white;
   z-index: 2; /* Higher value, appears in front */
   display: flex;
   align-items: center;
}
main.tradart_content {
   display:block;
   background-color: white;
   padding: 2em 0 2em 0;
}
img.tradart-img {
   flex: 1 1 auto;
   max-width: 100%;
   height: auto;
}
.tradart-text {
   font-size: 20px;
   line-height: 1.4;
   text-align: left;
   padding: 0 2rem 0rem 2rem;
}
.im-fell-english-sc-regular {
   font-family: "IM Fell English SC", serif;
   font-weight: 400;
   font-style: normal;
   font-size:250%;
   color:darkslategray;
 }
.tradart-imgs1 {
display:flex;
margin: auto;
}
.tradart-imgs2 {
   display:flex;
   margin: auto;
}
figcaption {
   font-size: 135%;
   text-align: center;
   padding:.8rem 0 0 0;
}
.tradart-footer {
   clear:both;
   background-color:#e1eff2;
   padding: 2em 0 .3em 0;
}
/*Trad art end*/

/* Demo Reel start */
.demo-reel-banner {
   background-color: #f0f7f9;
}
.demo-reel-banner h1 {
   font-size: 50px;
   text-align: center;
   padding: .5em
}
.demo-reel-wrapper {
   margin: 0 auto;
   max-width: 900px;
}
.demo-reel-content {
   background-color: white;
   padding: 2em 2em 3em 2em;
}
.demo-reel {
   max-width: 900px;
   margin: auto;
}
.video-player {
   width: 100%;
   height: auto;
}
.thumbnail {
   transition: all .25s ease-out
}
.thumbnail:hover {
   transform: scale(1.1)
}
.thumbnail:active {
   transform: scale(0.9)
}
.playlist {
   display: flex;
   overflow-x: auto;
   margin-top: 10px;
   padding-bottom: 10px;
   background-color: white;
}
.thumbnail {
   cursor: pointer;
   padding: 1rem .5rem 0 .5rem;
   width: 250px;
}
/* Demo Reel end */

/* Storyboarding start */
.storyboarding-wrapper {
   margin: 0 auto;
   max-width: 1800px;
}
.storyboarding-page {
   display:grid;
   grid-template-columns: 1fr 2fr;
   border-top: 3px solid black;
   border-bottom:3px solid black;
   padding: 7em 0 10em 0;
}
.storyboard-text {
   padding: 0 1em 0 7em;
   line-height: 1.6;
}
.storyboard-content {
   padding: 0 0 0 5em;
}
main.storyboarding-page h1 {
   font-size: 400%;
   text-align:left;
}
main.storyboarding-page p {
   text-align:left;
   padding:1em 0 0 0;
   font-size: 20px;
}
/* Storyboarding end */

/* Animations start */
.animations-page {
   display:grid;
   grid-template-columns: 1fr 2fr;
   border-top: 3px solid black;
   border-bottom:3px solid black;
   padding: 7em 0 10em 0;
}
.animations-text {
   padding: 0 1em 0 7em;
   line-height: 1.6;
}
.animations-content {
   padding: 0 0 0 5em;
}
main.animations-page h1 {
   font-size: 400%;
   text-align:left;
}
main.animations-page p {
   text-align:left;
   padding:1em 0 0 0;
   font-size: 20px;
}

/* Animations end */

/* Gesture start */
.wrapper-gesture {
   margin: 0 auto;
   /*no max-width, background spans the full screen*/
   }
.gesture-header {
   padding: 0 0 0 5em;
}
.gesture-greybkg {
   background-color: #f1f1f1;
   }
.gesture-banner {
   display:grid;
   grid-template-columns: 1fr 3fr;
   background-color:white;
   margin: 3em 5em 0 5em
   }
.gesture-text ul {
   padding: 0 0 0 3rem;
}
.gesture-banner-img img {
   display:block;
   grid-column: 1;
   height: 450px;
}
.gesture-banner-text {
   grid-column: 2;
   display: flex;
   justify-content: center;
   align-items: center;
}
.gesture-text {
   font-size: 20px;
   line-height: 1.4;
   text-align: left;
   padding: 0 2rem 0 2rem;
}
.gesture-text h2.im-fell-english-sc-regular {
   font-size:70px;
}
main.gesture_content {
   display:grid;
   background-color: white;
   margin: 4em 5em 2em 5em;
}
.gesture-imgs1 {
   display:flex;
   margin: 1.5em;
   justify-content: space-between;
   }
.gesture-imgs2 {
   display:grid;
   grid-template-columns: 1fr 1fr;
   margin: 0 1.5em;
}
.gesture-imgs3 {
   display: flex;
   margin: 1.5em;
   justify-content: space-between;
}
.gesture-imgs4 {
   display: flex;
   margin: 0 1.5em 1.5em 1.5em;
   justify-content: space-between;
}
.img-height {
   height: 500px;
   /*used this to fix the varying height of images, and previous images not in the .gesture-imgs4 container were disappearing when edits were made to only that container*/
}



.ball {
   display:flex;
   justify-content: space-around;
   height: 410px;
   padding: 2.5em;
   margin: 0 0 2em 0;
   background-color: white;
}

.eel {
   display:flex;
   justify-content: space-around;
   height: 500px;
   padding: 2.5em;
   margin: 0 0 2em 0;
   background-color: white;
}
.bird {
   display:grid;
   justify-content: space-around;
   padding: 2.5em  2.5em  2.5em  2.5em;
   grid-template-columns: 1fr 1fr 1fr 3fr;
}
.birdboard-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   padding: 0 10px 0 0;
}
.birdboard-container img {
   cursor: pointer;
   transition: 0.2s;
}
.birdboard-container img:hover {
   transform: scale(1.05);
}
.birdboards {
   height: 185px;
}
.modal {
   display: none;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   justify-content: center;
   align-items: center;
}
.modal img {
   max-width: 90%;
   max-height: 90%;
   border-radius: 10px;
}
.close {
   position: absolute;
   top: 20px;
   left: 30px;
   color: white;
   font-size: 40px;
   cursor: pointer;
}
        /* Navigation Buttons */
        .prev, .next {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         background-color: rgba(255, 255, 255, 0.3);
         border: none;
         color: white;
         font-size: 30px;
         padding: 10px 15px;
         cursor: pointer;
         border-radius: 5px;
         transition: 0.3s;
     }

     .prev:hover, .next:hover {
         background-color: rgba(255, 255, 255, 0.6);
     }

     .prev { left: 20px; }
     .next { right: 20px; }

.birdgif {
   height: 500px;
   grid-column: 4;
   padding: 9em 0 0 0;
}
.gesture-footer {
   clear:both;
   background-color:white;
   padding: 2em 0 .3em 0;
}
/* Gesture end */

/* Example: Adjust layout for screens smaller than 768px */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    flex-direction: column;
  }
}