:root{
  --primary-colour: #240312;
  --secondary-colour: #410a2b;
  --border-colour: #6d1748;
  --link-colour: #dda2d5;
  --link-colour-hover: #c074ba;
  --text-colour: #c06ebc;
  --gif-divider: url("https://maguro.carrd.co/assets/images/gallery11/3ac1a8c7.gif?v=10a293e5");
  --background: url("https://gifcity.carrd.co/assets/images/gallery70/0157fca4.png?v=3fc8f5cd");
}

.darkmode {
  --primary-colour: #1b2036;
  --secondary-colour: #0d101d;
  --border-colour: #0c0b18;
  --link-colour: #6c82e0;
  --link-colour-hover: #4134d8;
  --text-colour: #d2c9f3;
  --gif-divider: url("https://gifcity.carrd.co/assets/images/gallery44/0a1e352d.gif?v=3fc8f5cd");
  --background: url("https://biscuit.crd.co/assets/images/image43.gif?v=edffcd2f");
}

h1 {
  color: var(--text-colour);
  text-align: center;
  font: arial;
}

p {
  border: 2px solid var(--border-colour);
  padding: 30px;
  margin: auto;
  text-align: left;
  background-color: var(--primary-colour);
  color: var(--text-colour);
  font: arial;
}

div {
  border: 2px solid var(--border-colour);
  padding: 15px;
  width: 100px;
  margin: auto;
  text-align:center;
  background-color: var(--secondary-colour);
  float:left;
  color: var(--text-colour);
  font: arial;
}

.leftSideBar {
  padding: 30px;
  width: 18%;
  text-align:center;
  float: left;
  font: arial;
}

.rightSideBar {
  padding: 30px;
  width: 18%;
  text-align:center;
  float: right;
  font: arial;
}

body {
  background-image: var(--background)
}

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