@charset "UTF-8";

/*
Final Project

filename:       finalExam.css

Author:         Brandon LaDuke
Date:           3/7/2019

Description:    The stylesheet for the final project.
                This stylesheet is submitted for consideration towards the completion
                of CSC230 Website Design
 */

:root {
  /* Colors */
  --header-background: #fa625f;
  --content-background: #600473;
  --section-background: #fbf579;
  --table-background: #005995;
  --nav-background: var(--header-background);
  --footer-background: var(--content-background);
  --font-color: #000;
  --font-color-2: #fff;
  --nav-link-color: #000;
  --link-color: var(--section-background);
  --shaded: #00000033;

  /* Font sizes */
  --nav-font-size: 1.3em;
  --table-header: 1.3em;
  --table-data: 1.1em;

  /* Padding */
  --th-padding: 10px;
  --td-padding: 10px;

  /* Fonts */
  font-family: sans-serif;
}
header {
  grid-area: header;
  background-color: var(--header-background);
  color: var(--font-color);
}
header h1 {
  font-size: 3em;
}
header h3 {
  font-size: 1.5em;
}
nav {
  grid-area: nav;
  background-color: var(--nav-background);
  color: var(--font-color);
  margin: 0;
  padding: 0;
}
section {
  grid-area: section;
  background-color: var(--content-background);
  color: var(--font-color-2);
  padding: 15px;
  letter-spacing: 1px;
  line-height: 1.5;
}
footer {
  grid-area: footer;
  background-color: var(--footer-background);
  color: var(--font-color);
}
.site-grid {
  /* Layout */
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-rows: 300px auto auto;
  grid-template-areas: "header header"
                       "nav section"
                       "footer footer";

  /* Styles */
  margin: 0;
}

/* Header Styles */
header {
  padding: 0 0 0 25px;
}
header img {
  position: absolute;
  top: 0;
  right: 0;
}

/* Navigation Styles */
nav ul {
  list-style: none;
}
nav ul li {
  text-align: center;
  font-size: var(--nav-font-size);
  font-weight: bold;
  line-height: 1.3;
}
nav ul li a {
  color: var(--nav-link-color);
  text-decoration: none;
}
nav ul li a:hover {
  text-decoration: underline;
}

section h2 {
  background-color: var(--section-background);
  color: var(--font-color);
  padding: 10px;
}

/* Assignments Table */
table {
  border-collapse: collapse;
  background-color: var(--table-background);
  color: var(--font-color-2);
}
table tr td {
  vertical-align: top;
  font-size: var(--table-data);
  padding: var(--td-padding);
}
table tr:nth-child(2n+1) {
  background-color: var(--shaded);
  text-align: center;
  font-weight: bold;
  font-size: var(--table-header);
  padding: var(--th-padding);
}
table tr td a {
  font-size: var(--table-data);
  color: var(--link-color);
}
section ul li a {
  color: var(--link-color);
  text-decoration: none;
}
section ul li a:hover {
  text-decoration: underline;
}
footer {
  padding: 30px 25px;
  color: var(--font-color-2)
}
footer a {
  color: var(--link-color);
}