/* Variables, global scope */
:root {
  --lightest-colour: rgb(235, 235, 235);
  --midtone-colour: rgb(112, 112, 112);
  --darkest-colour: rgb(26, 26, 26);
  --primary-colour: #f79aed;
  --secondary-colour: #a4d5f8;
  --caption-colour: rgba(26, 26, 26, 0.9);
}

/* Font Rules */
@font-face {
  font-family: LexendDeca;
  src: url(Assets/Fonts/LEXENDDECA-THIN.TTF);
  font-weight: 100;
}
@font-face {
  font-family: LexendDeca;
  src: url(Assets/Fonts/LEXENDDECA-EXTRALIGHT.TTF);
  font-weight: 200;
}
@font-face {
  font-family: LexendDeca;
  src: url(Assets/Fonts/LEXENDDECA-LIGHT.TTF);
  font-weight: 300;
}
@font-face {
  font-family: LexendDeca;
  src: url(Assets/Fonts/LEXENDDECA-REGULAR.TTF);
  font-weight: 400;
}
@font-face {
  font-family: LexendDeca;
  src: url(Assets/Fonts/LEXENDDECA-MEDIUM.TTF);
  font-weight: 500;
}
@font-face {
  font-family: LexendDeca;
  src: url(Assets/Fonts/LEXENDDECA-SEMIBOLD.TTF);
  font-weight: 600;
}
@font-face {
  font-family: LexendDeca;
  src: url(Assets/Fonts/LEXENDDECA-BOLD.TTF);
  font-weight: 700;
}
@font-face {
  font-family: LexendDeca;
  src: url(Assets/Fonts/LEXENDDECA-EXTRABOLD.TTF);
  font-weight: 800;
}
@font-face {
  font-family: LexendDeca;
  src: url(Assets/Fonts/LEXENDDECA-BLACK.TTF);
  font-weight: 900;
}

/* Apply to the whole page */
body {
  font-family: LexendDeca;
  background-color: var(--darkest-colour);
  margin: 0;
  padding: 0;
}

/* Main content area */
.center-box {
  width: 700px;
  height: auto;
  text-align: center;

  margin: 50px auto; /* centers horizontally */
  padding: 50px;

  background: var(--darkest-colour);

  border: 5px solid var(--lightest-colour);
  border-radius: 5px;
}

.link-box {
  width: 200px;
  text-align: center;
  line-height: 3;
  font-weight: 400;

  margin: 10px auto; /* centers horizontally */
  padding: 0px;

  background: var(--darkest-colour);

  border: 5px solid var(--lightest-colour);
  border-radius: 5px;
}

.link-box-img {
  width: 100%;
  height: 390px;
  text-align: center;
  font-weight: 400;

  margin: 10px auto; /* centers horizontally */
  padding: 0px;

  background: var(--darkest-colour);

  border: 5px solid var(--lightest-colour);
  border-radius: 5px;

  display: flex;
  position: relative;
  overflow: hidden;
}

.link-box-img img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;
}

.caption {
  position: absolute;
  margin: 0;
  padding-bottom: 10px;

  left: 0;
  right: 0;
  bottom: 0;

  background-color: var(--caption-colour);
  color: var(--lightest-colour);

  box-sizing: border-box;
}

/* Headings */
h1, h2, h3 {
  color: var(--lightest-colour);
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 300;
}

/* Paragraphs */
p {
  color: var(--lightest-colour);
  font-weight: 200;
}

/* Links */
a {
  color: var(--primary-colour);
  text-decoration: none;
}

a:hover {
  color: var(--secondary-colour);
}

/* Add a white background color to the top navigation */
.topnav {
  background-color: var(--lightest-colour);
  overflow: hidden;
  font-weight: 500;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: var(--darkest-colour);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: var(--darkest-colour);
  color: var(--lightest-colour);
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: var(--primary-colour);
  color: var(--darkest-colour);
}

/* Add a black background color to the bottom navigation */
.botnav {
  background-color: var(--darkest-colour);
  overflow: hidden;
  margin: auto;
  font-weight: 200;
}

/* Style the links inside the navigation bar */
.botnav a, .botnav p {
  float: left;
  color: var(--lightest-colour);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.botnav a:hover {
  color: var(--midtone-colour);
}

/* Center element class */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Emote */
.emote {
  width: 32px;
  height: 28px;
  padding: 8px;
}