/*
   Hands-on Project 7-3
   Sung Kim | 7-5-26 | IST-239-W01
   Program: New Year Countdown Clock

   Purpose:
   This project creates a countdown clock that displays the time remaining until the new year.
   It presents the current date and time above separate countdown boxes for days, hours, minutes, and seconds.
   The layout helps make each part of the countdown easy to read.
   This CSS file controls the appearance and positioning of the page and countdown clock.

   Filename: styles.css
   Related: project07-03.html, project07-03.js
*/

/* Applies consistent sizing to every page element. */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* Removes the browser's default spacing and formatting. */
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;
}

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

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

/* Removes bullets and numbers from lists. */
ol, ul {
   list-style: none;
}

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

/* Formats the main countdown area. */
section {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 30px;
}

/* Formats the countdown heading. */
section h1 {
   font-size: 2.8em;
   text-align: center;
   margin: 0;
   padding: 20px 0;
}

/* Positions and formats the current date and time. */
div#timeBox {
   margin: 20px 0 10px 90px;
   font-size: 1.2em;
}

/* Creates the outer countdown clock display. */
div#clock {
   background-color: #4CADF3;
   border: 15px double #8F37DB;
   height: 280px;
   width: 780px;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
   align-items: center;
   margin: 0 auto;
}

/* Formats each time box inside the clock. */
div#clock figure {
   display: block;
   border: 1px solid black;
   color: white;
   height: 150px;
   width: 145px;
   margin: 25px 0;
   padding: 10px;
   text-align: center;
   line-height: 1.2;
   background-color: black;
}

/* Formats the countdown numbers. */
div#clock figure span {
   font-size: 5em;
   font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"
}

/* Formats the deal button if it is used on the page. */
input#deal {
   display: block;
   margin: 30px auto;
   width: 120px;
   font-size: 1.6em;
   background-color: gray;
   color: rgb(230, 230, 230);
   letter-spacing: 0.15em;
}

/* Formats the deck status message if it is used on the page. */
div#deckStatus {
   text-align:right;
   width: 780px;
   margin: 30px auto;
   font-size: 1.1em;
}