@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Coding Challenge 3

   Author: Matt Johnson
   Date:   10/6/24
   
   Filename: code3-3_scroll.css

*/
section#container {
   width: 900px;
   height: 370px;
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   top: 30px;
   left: 0px;
   border-width: 2px;
   border-color: brown;
   border-style: solid;
   overflow: scroll;
}

div {
   width: 300px;
   height: 330px;
   position: absolute;
}

img {
   display: inline-block;
   width: 300px;
   height: 300px;
}

#slide1 {
   position: absolute;
   left: 0px;
}

#slide2 {
   position: absolute;
   left: 300px;
}

#slide3 {
   position: absolute;
   left: 600px;
}

#slide4 {
   position: absolute;
   left: 900px;
}

#slide5 {
   position: absolute;
   left: 1200px;
}

#slide6 {
   position: absolute;
   left: 1500px;
}

#slide7 {
   position: absolute;
   left: 1800px;
}

#slide8 {
   position: absolute;
   left: 2100px;
}

#slide9 {
   position: absolute;
   left: 2400px;
}