body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: large;
  background-color: rgb(143, 139, 139);
  text-align: center;
  min-height: 500;

}

  #storyboard{
      max-width: 900px;
      margin: 0 auto;
      overflow-x: hidden;
      overflow-y: hidden;
      white-space: nowrap;
    }
    
    #board{
      /* this line creates horizontal scrolling */
      white-space: nowrap;
      transition: transform 1s;
        
    }
    
    #board figure{
      width: 100%;
      /* default is block. Changes to horizontal */
      display: inline-block;
    }
    
    #board figure img{
      width: 100%;
      aspect-ratio: 16/11;
      object-fit: cover;
      object-position: top right;
      animation-fill-mode: forwards;
      animation-fill-mode: forwards;
    }
    
    #controller{
      max-width: 900px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
    }
    
    #controller a, #controller span{
      color: rgb(240 240 240 / 1);
      font-size: 3rem;
      justify-self: center;
    }
    #controller span {
      font-size: 2rem;
    }
    
    
    #controller a:link,
    #controller a:visited{
      color: rgb(33 66 99 / 1);
      text-decoration: none;
    }
    
    #controller a:hover,
    #controller a:focus{
      color: rgb(240 240 240 / 1);
        
    }

    @keyframes zoomin {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(1.5);
      }
    }