body{
    font-family: "Montserrat", sans-serif;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
 }
 main{
   position: relative;
 }
 
 h1{
    font-size: 50px;
    text-align: center;
    background-color: powderblue;
 }
 h2{
   text-align: center;
   font-size: 30px;
 }
 #board{
   max-width: 750px;
   height: 300%;
   background-color: rgb(246, 201, 134);
   border-radius: 30px;
   top: 40px;
   margin: 0 auto;
   overflow-x: hidden;
   overflow-y: hidden;
   white-space: nowrap;
  
 }
 
 
 .story{
   white-space: nowrap;
   transition: transform 1s;
   background-color: white;
 }
 .story figure{
   width: 100%;
   display: inline-block;
   overflow: hidden;
   margin: 0 1rem;
 
 }
 .story figure img{
   width: 100%;
   aspect-ratio: 16/9;
 }
 figcaption{
   position: absolute;
   font-size: 20px;
   color:rgb(0, 0, 0) ;
   margin-top: 15px;
 }
 header li {
   display: inline-block;
   margin-right: 15px;
 }
 header li a {
   font-size: 20px;
   text-decoration: none;
   color: rgb(0, 0, 0);
   font-weight: bold;
   text-align: right;
 }
 header li a:hover{
   color: rgb(4, 218, 197);
   text-decoration: double;
 }
 
 #button{
   max-width: 900px;
   display: grid;
   grid-template-columns: 1fr  2fr 1fr;
   margin-top: 40px;
   justify-content: center;
     
 
 }
 #button a{
   font-size: 50px;
   justify-self: center;
 }
 #button span{
   color: rgb(0, 0, 0);
   font-size: 30px;
   justify-self: center;
   margin-top: 10px;
 }
 
 #button a:link,
 #button a:visited{
   color: rgb(0, 0, 0);
   text-decoration: none;
 }
 #button a:hover,
 #button a:focus{
   color: rgb(240 240 240 / 1);
   }
 
 @media (max-width: 600px){
   #board{
     height: 520px;
   }
   #button{
     margin-top: 40px;
   }
 }
 
 /*storyboard animation*/
 .story img{
   animation-duration: 4s;
   overflow: hidden;
   animation-fill-mode: forwards;
 }
 
 
 
 
 /*keyframes*/
 @keyframes moveright{
   0%{
     transform: translate(100px)
     ;
   }
   100%{
     scale: 1.2;
     transform: translate(10px);
   }
 }
 @keyframes moveleft{
   0%{
     transform: translate(-100px);
   }
   100%{
     scale: 1.2;
     transform: translate(100px);
   }
 }
 @keyframes zoomin{
   0%{
     scale: 1;
   }
   100%{
     scale: 2;
   }
 }
 @keyframes zoomout{
   0%{
     scale: 2;
   }
   100%{
     scale: 1;
   }
 }