/* Adam Tyler, July 19th, 2025, and CS 125H - Lab 4 – Term Project Home Page v2 */

/*   Color Palette created with logo by coolors.co 
     written to vars at :root so they can be used anywhere.  */
:root { 
    --slate-gray: #5C7D84ff;
    --persimmon-hsl: hsla(20, 88%, 48%, 1);
    --prussian-blue-hsl: hsla(211, 42%, 19%, 1);
    --eggplant-hsl: hsla(334, 18%, 23%, 1);
    --chestnut-hsl: hsla(17, 53%, 35%, 1);
    --midnight-green-hsl: hsla(196, 56%, 21%, 1);
    --charcoal-hsl: hsla(215, 21%, 23%, 1);
    --midnight-green-2-hsl: hsla(190, 71%, 23%, 1);
    --slate-gray-hsl: hsla(191, 18%, 44%, 1);
    --midnight-green-3-hsl: hsla(196, 81%, 19%, 1);
    --midnight-green-4-hsl: hsla(195, 78%, 18%, 1);
}

/* universal reset */
* {
    margin: 0;
    padding: 0;
}

html {
    background-image: linear-gradient(90deg, var(--slate-gray) 0%, var(--charcoal-hsl) 50%, var(--slate-gray) 100%);
}

/* styles for body */
body {
    font-family: "Times New Roman", Times, serif;
    font-size: 100%;
    max-width: 1000px;
	width: 90%;
    margin: 0 auto;
    border: 5px solid var(--eggplant-hsl);
    border-radius: 10px 10px 10px 10px;
    padding: 10px;
    background: white;

}
/* styles that apply to entire document */
a:link {
    color:var(--persimmon-hsl);
    text-decoration: none;
}
a:visited {
    color:var(--midnight-green-3-hsl);
}
a:focus, a:hover {
    font-style: italic;
}
h2, h3 {
    color:var(--eggplant-hsl);
    margin: 10px 0;
}
p {
    font-size: 100%;
    line-height: 120%;
    color:var(--chestnut-hsl);
    margin: 15px 0;
}
em {
    font-size: 110%;
}
/* styles for header */
header img {
    width: 6em ;
    height: auto;
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}
header h1 { 
    font-size: 190%;
    color:var(--midnight-green-2-hsl);
}
header h2 { 
    font-size: 150%;
}
/* styles for main */
main {
    clear:left;
}
main h2 {
    font-size:120%;
}
main h3 {
    font-size:110%;
}
main p:first-of-type::first-letter {
    font-size: 170%;
    color:var(--slate-gray);
    font-weight: 500;
}
/* styles for footer */
footer p {
    font-size: 80%;
    font-style: italic;
    margin: 0;
}
footer {
    text-align: center;
}