/*
   
   Description:
   This stylesheet defines the layout and appearance of the New Year's Eve
   countdown clock. It includes global reset rules, page layout formatting,
   and specific styling for the countdown display, including the time box,
   clock container, and individual countdown figures.
*/

/* Apply a natural box layout model to all elements */
* {
   -moz-box-sizing: border-box; /* Firefox box-sizing support */
   -webkit-box-sizing: border-box; /* WebKit box-sizing support */
   box-sizing: border-box; /* Standard box-sizing model */
}

/* Reset default browser styles for all common HTML 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,
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; /* Removes default margins */
   padding: 0; /* Removes default padding */
   border: 0; /* Removes default borders */
   font-size: 100%; /* Normalizes font size */
   font: inherit; /* Inherits font settings */
   vertical-align: baseline; /* Aligns elements consistently */
}

/* Ensure HTML5 elements display correctly in older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block; /* Forces block display for structural elements */
}

body {
   line-height: 1; /* Sets line spacing */
   width: 960px; /* Page width */
   background: white; /* Background color */
   margin: 0 auto; /* Centers the page horizontally */
   font-family: Verdana, Geneva, sans-serif; /* Default font family */
}

ol, ul {
   list-style: none; /* Removes bullet points from lists */
}

/* Page header styling */
header {
   background: #5472B2; /* Blue background */
   width: 100%; /* Full width */
   color: #FFFFFF; /* White text */
   font-size: 48px; /* Large header font */
   text-align: center; /* Centered text */
   line-height: 1.5em; /* Vertical spacing */
   margin-bottom: 0; /* Removes extra spacing below header */
}

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

section {
   background-color: #FFDB70; /* Yellow background for main section */
   margin-top: 0; /* Removes top margin */
   padding-bottom: 30px; /* Adds spacing at bottom */
}

section h1 {
   font-size: 2.8em; /* Large section title */
   text-align: center; /* Centered heading */
   margin: 0; /* Removes default margin */
   padding: 20px 0; /* Vertical spacing */
}

div#timeBox {
   margin: 20px 0 10px 90px; /* Positions the current time box */
   font-size: 1.2em; /* Slightly larger text */
}

div#clock {
   background-color: #4CADF3; /* Light blue background for clock */
   border: 15px double #8F37DB; /* Purple double border */
   height: 280px; /* Clock container height */
   width: 780px; /* Clock container width */
   display: flex; /* Enables flexible layout */
   flex-flow: row wrap; /* Allows wrapping of child elements */
   justify-content: space-around; /* Even spacing between figures */
   align-items: center; /* Vertically centers figures */
   margin: 0 auto; /* Centers the clock container */
}

div#clock figure {
   display: block; /* Ensures figure behaves as a block element */
   border: 1px solid black; /* Black border around each figure */
   color: white; /* White text inside figures */
   height: 150px; /* Figure height */
   width: 145px; /* Figure width */
   margin: 25px 0; /* Vertical spacing */
   padding: 10px; /* Inner spacing */
   text-align: center; /* Centers text horizontally */
   line-height: 1.2; /* Adjusts line spacing */
   background-color: black; /* Black background for contrast */
}

div#clock figure span {
   font-size: 5em; /* Large countdown numbers */
   font-family: Consolas, "Andale Mono", "Lucida Console",
                "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
   /* Monospaced font for clean numeric display */
}

input#deal {
   display: block; /* Makes button a block element */
   margin: 30px auto; /* Centers the button */
   width: 120px; /* Button width */
   font-size: 1.6em; /* Larger text */
   background-color: gray; /* Gray background */
   color: rgb(230, 230, 230); /* Light gray text */
   letter-spacing: 0.15em; /* Adds spacing between letters */
}

div#deckStatus {
   text-align: right; /* Aligns text to the right */
   width: 780px; /* Matches clock width */
   margin: 30px auto; /* Centers the status box */
   font-size: 1.1em; /* Slightly larger text */
}