:root {
  --navbar-background-colour: rgba(3, 3, 94, 1);
  --border-colour: solid 2px rgba(74, 189, 172, 1);
  --navbar-text-colour: white;
  --body-colour: rgba(244, 241, 222, 0.5);
  --footer-colour: rgba(41, 50, 65, 1);
  --footer-border-colour: double 5px rgb(224, 122, 95);
  --banner-background-colour: var(--footer-colour);
  --banner-border-colour: var(--footer-border-colour);
  --banner-text-colour: rgb(224, 122, 95);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}

/* Define banner using Grid
.banner {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  background-color: var(--banner-background-colour);
  border-top: var(--banner-border-colour);
  border-bottom: var(--banner-border-colour);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  margin-top: 1rem;
  align-items: center;
  grid-template-areas:
    "logo ... description"
    "... ... languages";
}
#description {
  grid-area: description;
}
#languages {
  grid-area: languages;
}
*/

/* Navbar with links to other pages. Not using at present
.logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  text-decoration: none;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--navbar-background-colour);
  height: 5vh;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  margin-top: 1rem;
  border-top: var(--border-colour);
  border-bottom: var(--border-colour);
}
.nav-links {
  display: flex;
  list-style: none;
  justify-content: flex-end;
}
.nav-item a {
  text-decoration: none;
  color: var(--navbar-text-colour);
  padding: 0.5em 1em;
  transition: color 0.3s ease-out;
}
.nav-item a:hover {
  color: #d6cfcb;
}

.nav-item a:focus {
  color: #fca311;
}
*/

/* Define banner using Flexbox */
.banner {
  display: flex;
  background-color: var(--banner-background-colour);
  border-top: var(--banner-border-colour);
  border-bottom: var(--banner-border-colour);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  margin-top: 1rem;
  align-items: center;
  justify-content: space-between;
}
.banner h1,
.banner p {
  color: var(--banner-text-colour);
  font-weight: bold;
}
.banner h1 {
  font-family: "Beau Rivage", cursive;
  padding-left: 0.5em;
  justify-self: flex-start;
}
#description,
#languages {
  padding: 0 1em;
}
#description {
  justify-self: flex-end;
}

@media only screen and (max-width: 375px) {
  .banner h1 {
    font-size: 1.5rem;
  }
}
/*
  AUTO GRID
  Set the minimum item size with `--auto-grid-min-size` and you'll
  get a fully responsive grid with no media queries.
*/

.auto-grid {
  --auto-grid-min-size: 10rem;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--auto-grid-min-size), 1fr)
  );
  grid-gap: 1rem;
  align-content: center;
  justify-content: center;
  padding: 0;
  margin: 3rem;
}

/* Presentational styles */

body {
  background: var(--body-colour);
  line-height: 1.4;
  font-family: Arial, Helvetica, sans-serif;
}

li {
  text-align: center;
  list-style-type: none;
}
.btn {
  border: solid;
  border-radius: 5%;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.extra-small-chapter {
  background: #4abdac;
  border-color: #03045e;
  color: black;
}

.small-chapter {
  background: #03045e;
  border-color: #4abdac;
  color: white;
}

.medium-small-chapter {
  background: #e07a5f;
  border-color: black;
  color: black;
}

.medium-large-chapter {
  background: #f4f1de;
  border-color: #630606;
  color: black;
}

.large-chapter {
  background: #fca311;
  border-color: #14213d;
  color: black;
}

.extra-large-chapter {
  background: #9a8c98;
  border-color: #3f1414;
  color: white;
}

.small-chapter a,
.small-chapter a:visited,
.extra-large-chapter a,
.extra-large-chapter a:visited {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.extra-small-chapter a,
.extra-small-chapter a:visited,
.medium-small-chapter a,
.medium-small-chapter a:visited,
.medium-large-chapter a,
.medium-large-chapter a:visited,
.large-chapter a,
.large-chapter a:visited {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}

.colour-code {
  display: flex;
  margin-top: 3rem;
  align-items: center;
  justify-content: space-around;
  align-content: center;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-bottom: var(--footer-border-colour);
  border-right: var(--footer-border-colour);
  border-left: var(--footer-border-colour);
  background-color: var(--footer-colour);
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}
.colour-code .btn {
  padding: 0.5rem 1rem;
  margin-bottom: 1em;
  margin-right: 0.5em;
  flex: 0 1 10rem;
  font-size: 0.75rem;
}

a {
  text-decoration: none;
}