*{
  box-sizing: border-box;
  margin: 0;
}
html,
body {
  height: 100%;
}

body {
  line-height: 1.44;
}


a:link{
  transition: color 0.5s;
}

figcaption{
  font-size: 30px;
}


#looks {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr ;
    background-color: #f7e6b185;
    border-radius: 30px;
    padding: 10px;
}

#storyboard{
  max-width: 1000px;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: hidden;
  /* white-space: nowrap; */
  margin-top: 0em;
}

#board{
  display: flex;
  transition: transform 500ms;
  white-space: nowrap;
}

#board figure{
 object-fit: cover;
 object-position: center;
 display: inline-block;
 width: 56vw;
}

#board figure img{
  width: 56vw;
  aspect-ratio: 16/9;
  animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


#controller {
  background-color: #f5c365;
  max-width: auto;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  font-size: 2rem;
  text-align: center;
  justify-self: center;
  top: 0;
  padding: 0 0rem;
  width: 100%;
  height: 60px;
}

nav {
  border-radius: 20px;
  height: 60px;
}

#process {
  padding-top: 0px;
}

#controller a{
  font-size: 30px;
  padding-top: 10px; 
}

#controller a:hover {
  background-color: rgb(243, 164, 99);
  border-radius: 20px;
}

footer {
  position: fixed;
  bottom: 0em;
}

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

  #controller{
    height:40px;
  }

  #controller a{
    font-size: 17px;
    padding-top: 10px; 
  }

  #controller a:hover {
    background-color: rgb(243, 164, 99);
    height:40px;
  }

  figcaption {
    font-size: 1em;
    max-width: 100vw;
  }

  #looks {
    display:block;
    grid-template-columns: 1fr;
    
  }

  #board figure{
    object-fit: cover;
    object-position: center;
    display: inline-block;
    width: 100vw;
   }
   
   #board figure img{
     width: 100vw;
     aspect-ratio: 16/9;
     animation-fill-mode: forwards;
     animation-fill-mode: forwards;
   }
}