/*
   Hands-on Project 9-3
   Sung Kim | 7-19-26 | IST-239-W01

   Purpose:
   This project uses web storage to track the date of a visitor's previous visit to a sports blog.
   The page compares each article's posted date with the stored visit date to identify newer articles.
   Articles posted after the previous visit are marked with the word New.
   First-time visitors are welcomed and all available articles are marked as new.

   This file controls the layout and visual appearance of the SBLogger page.

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

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

/* Resets default spacing, borders, fonts, and alignment for common 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, 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 font */
body {
   line-height: 1;
   width: 960px;
   background: white;
   margin: 0 auto;
   font-family: Verdana, Geneva, sans-serif; 
}

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

/* Styles the project header 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;
}

/* Styles and positions the main blog content area */
section {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 20px;
   user-select:none;
   height: 840px;
   position: relative;
}

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

/* Positions and styles the last-visit information box */
p#lastVisit {
   position: absolute;
   width: 170px;
   border: 1px solid gray;
   background-color: ivory;
   top: 20px;
   right: 20px;
   font-size: 0.8em;
   text-align: center;
   padding: 5px;
   line-height: 1.2;
   box-shadow: 3px 3px 5px gray;
}

/* Keeps the stored visit date displayed as an inline block */
span#lastVisitDate {
   display: inline-block;
}

/* Styles and centers the introductory blog description */
p#intro {
   width: 700px;
   margin: 0 auto;
   line-height: 1.3;
   font-size: 1.1em;
}

/* Styles each sports article container */
article {
   width: 80%;
   margin: 20px auto;
   border-top: 1px solid gray;
   border-bottom: 1px solid gray;
   background-color: rgba(255, 255, 255, 0.2);
   padding: 18px;
}

/* Styles each article heading */
article h1 {
   font-size: 1.4em;
   margin-bottom: 8px;
}

/* Adds spacing below each paragraph inside an article */
article p {
   margin-bottom: 10px;
}

/* Styles the posted-date line for each article */
article p:first-of-type {
   font-size: 0.9em;
   font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
   text-indent: 30px;
}

/* Styles the article preview text */
article p:nth-of-type(2) {
   line-height: 1.5;
   text-align: justify;
}

/* Styles the New label added beside recently posted article dates */
article p:first-of-type strong {
   display: inline-block;
   margin-left: 3px;
   font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
   font-style: italic;
   font-size: 1.3em;
   font-weight: normal;
   color: blue;
   text-transform: uppercase;
}

/* Aligns each read-more link to the right side of the article */
article p:last-of-type {
   text-align: right;
}