/*    JavaScript 7th Edition
      Chapter 10
      Hands-on Project 10-2

      Filename: styles.css
*/

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   line-height: 1;
   width: 960px;
   background: white;
   margin: 0 auto;
   font-family: Verdana, Geneva, sans-serif; 
}

header {
   background: #5472B2;
   width: 100%;
   color: #FFFFFF;
   font-size: 48px;
   text-align: center;
   line-height: 1.5em;
   margin-bottom: 0;
}

section {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 20px;
   user-select: none;
   height: 980px;
}

section h1 {
   font-size: 2.8em;
   text-align: center;
   margin: 0;
   padding: 20px 0;
}

section p {
   width: 800px;
   margin: 0 auto;
   font-size: 1.3em;
   line-height: 1.3;
   font-family: Baskerville, Palatino, "Times New Roman", serif;
}

div#puzzle {
   position: relative;
   width: 900px;
   margin: 10px auto;
}

div#puzzle > img {
   position: absolute;
   cursor: pointer;
   touch-action: none;
}

img#tan1 { top: 10px; left: 280px; transform: rotate(180deg); }
img#tan2 { top: 82px; left: 352px; transform: rotate(90deg); }
img#tan3 { top: 160px; left: 283px; transform: rotate(90deg); }
img#tan4 { top: 193px; left: 461px; transform: rotate(-90deg); }
img#tan5 { top: 121px; left: 318px; transform: rotate(90deg); }
img#tan6 { top: 178px; left: 375px; transform: rotate(225deg); }
img#tan7 { top: 68px; left: 216px; transform: rotate(225deg); }

div#puzzle figure {
   position: absolute;
}

div#puzzle figure figcaption {
   font-size: 1.3em;
   padding-top: 10px;
   text-align: center;
}

div#puzzle figure#figure1 { top: 330px; left: 0px; }
div#puzzle figure#figure2 { top: 330px; left: 490px; }