@font-face {
  font-family: 'Baskerville';
  src: url('../fonts/baskerville/BaskervilleBT.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Baskerville';
  src: url('../fonts/baskerville/BaskervilleItalicBT.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Baskerville';
  src: url('../fonts/baskerville/BaskervilleBoldBT.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Baskerville';
  src: url('../fonts/baskerville/BaskervilleBoldItalicBT.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi/Fonts/OTF/Satoshi-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi/Fonts/OTF/Satoshi-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi/Fonts/OTF/Satoshi-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi/Fonts/OTF/Satoshi-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}


:root {
  /* Structural / readability */
  --color-body: #403b35;        /* Gray - body text */
  --color-background: #F8EEE2;  /* Cream - page background */
  

  /* Header */
  --color-header1: #934f42;       /* Red */
  --color-header2: #995470;     /* Pink */
  --color-header3: #766881;      /* Lavender */
  --color-header4: #8387a4;     /* Periwinkle */
  --color-header5: #72997a;      /* Bright blue-green */
  --color-header6: #84958f;     /* Light blue-green */
  
  /* Links */
  --color-link: #71763e;     /* Forest green */
  --color-hover: #312941;      /* Navy */
  --color-visited: #313423;        /* Dark green */


  /* Unused So Far*/
  --color-highlight: #d7c66c;   /* Yellow */
  --color-warning: #b58f44;     /* Orange */
  --color-accent1: #251f2d;     /* Dark Blue/Purple */
  --color-accent2: #80654c;     /* Gold */
  --color-accent3: #d27661;     /* Orange */
  --color-accent4: #6774a8;     /* Light Blue */
}

/* Links */

#content a {
  text-decoration: none;      /* remove underline */
  border: 2px solid var(--color-link);  /* rectangle border */
  border-radius: 8px;         /* rounded corners */
  padding: 2px 6px;           /* spacing inside */
  color: var(--color-link);
}

#content a:visited {
  color: var(--color-visited);
}

#content a:hover {
  background-color: var(--color-hover);
  color: var(--color-background);
}


/* Headers */

header { 
  text-align: left; 
  background-color: var(--color-background);
  padding-left: 2rem;
  margin-bottom: 0.1rem;
}

header h1 a {
  text-decoration: none;      
  color: var(--color-header1); 
}

header h1 a:hover {
  text-decoration: underline;  
  color: var(--color-hover); 
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Satoshi', sans-serif;
  margin: 0;
}

h1 {
  font-size: 2.5rem;
  color: var(--color-header1);
}

h2 {
  color: var(--color-header2);
  font-size: 2.25rem;
}

h3 {
  color: var(--color-header3);
  font-size: 2rem;
}

h4 {
  color: var(--color-header4);
  font-size: 1.75rem;
}

h5 {
  color: var(--color-header5);
  font-size: 1.5rem;
}

h6 {
  color: var(--color-header6);
  font-size: 1.25rem;
}

/* Body + Tags*/

body {
  font-family: Georgia;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  background: var(--color-background);
  color: var(--color-body);
}

.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center-div {
  display: flex;
  flex-direction: row;   
  align-items: center;  
  justify-content: center;
  height: 200px;        
}
/* Hover Links for Home Page */
.hover-link {
  display: inline-block; 
  font-family: "Georgia"; 
  text-align: center; 
  position: relative;
  text-decoration: none;
  color: var(--color-body);
  margin: 0 8px;
  font-size: 1.4rem;
}

.hover-link .hover {
  display: none;
}

.hover-link:hover .default {
  display: none;
}

.hover-link:hover .hover {
  display: inline-block;
  padding: 0.2em 0.5em;         /* space inside the rectangle */
  color: var(--color-background);                 /* text readable on color */
}

a[href="about.html"]:hover { background-color: var(--color-accent1); border-radius: 8px;}
a[href="week0.html"]:hover { background-color: var(--color-body); border-radius: 8px;}
a[href="week1.html"]:hover { background-color: var(--color-header1); border-radius: 8px;}
a[href="week2.html"]:hover { background-color: var(--color-accent3); border-radius: 8px;}
a[href="week3.html"]:hover { background-color: var(--color-accent2); border-radius: 8px;}
a[href="week4.html"]:hover { background-color: var(--color-warning); border-radius: 8px;}
a[href="week5.html"]:hover { background-color: var(--color-highlight); border-radius: 8px;}
a[href="week6.html"]:hover { background-color: var(--color-visited); border-radius: 8px;}
a[href="week7.html"]:hover { background-color: var(--color-link); border-radius: 8px;}
a[href="week8.html"]:hover { background-color: var(--color-header5); border-radius: 8px;}
a[href="week9.html"]:hover { background-color: var(--color-header6); border-radius: 8px;}
a[href="week10.html"]:hover { background-color: var(--color-hover); border-radius: 8px;}
a[href="week11.html"]:hover { background-color: var(--color-header4); border-radius: 8px;}
a[href="week12.html"]:hover { background-color: var(--color-header3); border-radius: 8px;}
a[href="week13.html"]:hover { background-color: var(--color-header2); border-radius: 8px;}
a[href="final.html"]:hover {background-color: var(--color-accent4); border-radius: 8px;}

/* Banner container */
.banner {
  overflow: hidden;
  overflow-x: auto;
  background-color: var(--color-background);
  padding: 0 0;
  margin: 0;
}

.scroll {
  display: inline-block;
  white-space: nowrap;
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 7rem;
  color: var(--color-body);
  position: relative;
  transform: translateX(0);
}


main {
  max-width: 800px;
  margin: auto;
  padding: 1rem;
  line-height: 1.6;
}

img {
  max-width: 100%;
  border-radius: 0.8rem;
  margin: 1rem 0;
}