/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Tutorial Case
   
   Positioning Styles for the pc_info.html file
   Author: Solomiia
   Date:   2/25/2026
   
   Filename: pc_info.css

*/


/* Main Styles */



main {
  position: relative;
  height: 450px;
  width: 100%;
  overflow: auto;
}
div.infobox {
  position: absolute;
}
/* First Infographic */
div#info1 {
  display: block;
  top: 20px;
  left: 5%;
}

/* Second Infographic */
div#info2 {
  display: block;
  top: 185px;
  left: 42%;
}

/* Third Infographic */

div#info3 {
  display: block;
  top: 135px;
  left: 75%;
}

/* Fourth Infographic */
div#info4 {
  display: block;
  top: 510px;
  left: 8%;
}


/* Fifth Infographic */

div#info5 {
  display: block;
  top: 800px;
  left: 3%;
}

/* Sixth Infographic */
div#info6 {
  display: block;
  top: 600px;
  left: 48%;
}


/* Seventh Infographic */

div#info7 {
  display: block;
  top: 1000px;
  left: 68%;
}

/* Eighth Infographic */

div#info8 {
  display: block;
  top: 1100px;
  left: 12%;
}