@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700");
@import url("./utilities.css");
@import url("./cardstock.css");
@import url("./asides.css");
/*******************************************************************************
 * Configuration
 *******************************************************************************/
:root {
  /* Fonts */
  --font-stack: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --base-font-size: 16px;
  --line-height: 1.3em;

  /* Spacing */
  --gap-size: 1.5rem;
  --buffer-size: calc(var(--gap-size) / 3);

  /* Colors */
  --background-color: #fffff2;
  --primary-color: hsl(212, 100%, 47%);
  --secondary-color: hsl(0, 100%, 77%);
  --link-color: var(--secondary-color);
  --border-color: hsl(0, 0%, 75%);
  --image-border-color: var(--border-color);
}

@media only screen and (min-width: 813px) {
  :root {
    --base-font-size: 18px;
  }
}

/*******************************************************************************
 * Reset
 *******************************************************************************/

*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  font-size: var(--base-font-size);
}

/*******************************************************************************
 * Body
 *******************************************************************************/
body {
  color: var(--color);
  background-color: var(--background-color);
  line-height: var(--line-height);
  font-family: var(--font-stack);
  font-size: var(--base-font-size);
}

.container {
  width: 85%;
  margin: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: initial;
}

/*******************************************************************************
 * Header
 *******************************************************************************/
header.card {
  text-align: center;
}

header ul {
  justify-content: center;
}

header .course-year {
  margin-top: 0;
}

header ul {
  margin-bottom: 0;
}

.course-title {
  margin: 0;
}

.course-year,
.course-details {
  margin: 0;
}

/*******************************************************************************
 * Links
 *******************************************************************************/

a {
  color: black;

  text-decoration-color: var(--link-color);
  text-decoration-line: underline;

  transition: all 0.3s ease-in-out;
  transition-delay: 0s;
}

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

a.undecorated {
  color: inherit;
  text-decoration: none;
}

a.undecorated:hover {
  color: var(--secondary-color);
  text-decoration: var(--secondary-color) underline;
}

.primary,
.primary a {
  color: var(--primary-color);
  text-decoration: var(--primary-color) underline;
}

.primary a,
.primary-link {
  text-decoration-color: var(--primary-color);
  text-decoration-line: underline;

  transition: color 0.3s ease-in-out;
  transition-delay: 0s;
}

.secondary,
.secondary a {
  color: var(--secondary-color);
}

/*******************************************************************************
 * Images
 *******************************************************************************/

img {
  border: 1px solid var(--image-border-color);
  box-sizing: border-box;
}

/*******************************************************************************
 * Lists
 *******************************************************************************/

@media only screen and (max-width: 813px) {
  nav .horizontal {
    display: block;
  }

  /* nav .horizontal li {
    padding-bottom: 0.5em;
  } */
}

li {
  padding: 0.5em;
}

ul.plain,
ol.plain {
  list-style-type: none;
}

dl {
  margin-left: var(--gap-size);
}

dt {
  font-weight: bold;
}

dl.inline dd,
dl.inline dt {
  display: inline;
  margin-left: 0;
}

dl.inline dd:after {
  content: "";
  display: block;
  margin-bottom: var(--gap-size);
}

@media only screen and (min-width: 813px) {
  ul,
  ol {
    margin-block: calc(0.5 * var(--gap-size));
    margin-left: calc(1.5 * var(--gap-size));
  }
}

/*******************************************************************************
 * Tables
 *******************************************************************************/

table {
  /* This makes the thead and tbody borders show up */
  border-collapse: collapse;
  margin-block: var(--gap-size);
}

thead {
  border-top: 2px solid black;
  border-bottom: 1px solid black;
  text-align: left;
}

tbody {
  border-bottom: 2px solid black;
}

caption {
  caption-side: bottom;
  text-align: left;
  font-weight: lighter;
}

td,
th {
  padding-block: var(--buffer-size);
}