/*
    Christopher Zamiska, July 17, 2026, IST239-W01, Hands-On project09-03

This project will use web storage on a blogging site that posts news commentary and articles
from the world of sports. The website will record the date and time of your last visit in a
local storage item. Links to articles that have been posted to the website after that date and
time will be marked with the text string “New”. Articles that were already posted during your
last visit will not be marked. The website will also store the date and time of the user’s last
visit in a local storage object with the key named “sbloggerVisit”.
*/

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

/* 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;
   margin-bottom: 0;
}



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

section {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 20px;
   user-select:none;
   height: 840px;
   position: relative;
}

section > h1 {
   font-size: 2.8em;
   text-align: center;
   margin: 0;
   padding: 20px 0;
}

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;
}

span#lastVisitDate {
   display: inline-block;
}

p#intro {
   width: 700px;
   margin: 0 auto;
   line-height: 1.3;
   font-size: 1.1em;
}

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;
}

article h1 {
   font-size: 1.4em;
   margin-bottom: 8px;
}
article p {
   margin-bottom: 10px;
}

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;
}

article p:nth-of-type(2) {
   line-height: 1.5;
   text-align: justify;
}

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;
}

article p:last-of-type {
   text-align: right;
}