/*  
    Christopher Zamiska, June 21 ,2026, IST239-W01, Hands ON project05-05

    This program is a "concentration" style game involving image tiles. If two
    selected images match, they stay revealed. Otherwise, they flip back over
    and play continues until all matches have been made.
    Bug fixes are marked with FIXED.
*/

/* apply a natural box layout model to all elements */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* reset rules */
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,
fieldset, 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;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}

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

ol, ul {
   list-style: none;
}

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




/*-------------------- Project Styles ------------------*/

/* main content */
section {
   width: 960px;
   background: #FFDB70;
   padding-bottom: 20px;
   height: 560px;
}

div#instruction {
   float: left;
   width: 350px;
   margin-right: 50px;
   padding-left: 30px;
}

div#instruction h2 {
   text-align: center;
   font-size: 1.3em;
   font-weight: bold;
   margin-bottom: 10px;
   padding-top: 10px;
}

div#instruction p {
   font-size: 1.2em;
   line-height: 1.4;
   margin-bottom: 20px;
}

div#board {
   width: 520px;
   height: 520px;
   float: left;
   margin-top: 20px;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;      
}

div.tile {
   position: relative;
   width: 120px;
   height: 120px;
   user-select: none;
   cursor: pointer;
}

div.tile img {
   position: absolute;
   top: 0;
   left: 0;
}