/*
   Hands-on Project 10-1
   Sung Kim | 7-19-26 | IST-239-W01

   Purpose:
   This project creates an interactive jigsaw puzzle using pointer events and drag-and-drop functionality. 
   The page generates 48 puzzle pieces in random positions so the user can reconstruct the flower image. 
   Pointer event handlers allow each piece to be grabbed, moved, and dropped around the puzzle board. 
   The project demonstrates how JavaScript can track pointer coordinates and dynamically update element positioning.

   This CSS file controls the layout, typography, puzzle board, and visual appearance of the puzzle pieces.

   Filename: styles.css
   Related: project10-01.html, project10-01.js, puzzle.png, piece1.png-piece48.png
*/

/* Applies consistent box sizing to all elements. */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* Resets default spacing, borders, and typography for common page elements. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

/* Displays HTML5 structural elements as block elements in older browsers. */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}

/* Sets the main page width, background, spacing, and default font. */
body {
   line-height: 1;
   width: 960px;
   background: white;
   margin: 0 auto;
   font-family: Verdana, Geneva, sans-serif;
}

/* Removes default list markers from ordered and unordered lists. */
ol, ul {
   list-style: none;
}

/* Styles the page header and centers the project title. */
header {
   background: #5472B2;
   width: 100%;
   color: #FFFFFF;
   font-size: 48px;
   text-align: center;
   line-height: 1.5em;
   margin-bottom: 0;
}

/* Styles the main puzzle content area. */
section {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 20px;
   user-select: none;
   height: 980px;
}

/* Styles and centers the main puzzle heading. */
section h1 {
   font-size: 2.8em;
   text-align: center;
   margin: 0;
   padding: 20px 0;
}

/* Styles the puzzle instructions and limits their width. */
section p {
   width: 800px;
   margin: 0 auto;
   font-size: 1.3em;
   line-height: 1.3;
   font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}

/* Positions and sizes the completed puzzle reference image. */
section p img {
   float: right;
   margin: 0 20px 20px 20px;
   width: 280px;
}

/* Displays emphasized text in italic style. */
em {
   font-style: italic;
}

/* Creates the bordered area where the puzzle pieces are arranged. */
div#puzzleBoard {
   clear: right;
   width: 800px;
   height: 600px;
   margin: 20px auto;
   border: 5px solid gray;
   position: relative;
   background-color: yellow;
}

/* Positions and styles each draggable puzzle piece. */
div#puzzleBoard img {
   position: absolute;
   user-drag: none;
   user-select: none;
   filter: drop-shadow(2px 2px 5px black);
   cursor: pointer;
   display: block;
}