/*
Christopher Zamsika, July 5, 2026, IST239-W01, Hands-On project07-05

This app compares two texts based on the frequency of words of
different lengths. It displays the frequency of words of different
lengths for each text in columns.

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



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

body > div {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 30px;
}

body > div > h1 {
   text-align: center;
   font-size: 1.8em;
   font-weight: bold;
   padding-top: 10px;
   margin-bottom: 5px;
}

div#author1 > h1, div#author2 > h1 {
   font-size: 1.2em;
   text-align: center;
   margin: 0;
   padding: 10px 0;
   width: 100%;
}

section#docs {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
}


article {
   width: 400px;
   font-size: 0.8em;
   height: 200px;
   overflow: auto;
   padding: 5px;
   margin: 10px 10px 20px;
   background-color: ivory;
   border: 1px solid gray;
}

article h1 {
   font-size: 1.4em;
   font-weight: bold;
}

article h2 {
   font-size: 1.15em;
   font-weight: bold;
}
article p {
   margin: 10px 0;
}

section#counts {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
}


section#counts h1 {
   font-size: 1.2em;
   margin-bottom: 5px;
   margin-top: 0;
   border-bottom: 1px solid gray;
   padding-bottom: 5px;
}

section#counts div#count {
   text-align: center;
   width: 80px;
   border-left: 1px solid gray;
   border-right: 1px solid gray;
   padding: 0 6px;
}

section#counts div#count1 {
   text-align: right;
   width: 80px;
   padding-right: 6px;
}

section#counts div#count2 {
   text-align: left;
   width: 80px;
   padding-left: 6px;
}