:root{
  --primary-colour: #ffe2eb;
  --secondary-colour: #ffd3e2;
  --border-colour: #f7acc6;
  --link-colour: #c43b69;
  --link-colour-hover: #a81345;
  --text-colour: #5c1f32;
  --background: url("https://biscuit.crd.co/assets/images/gallery45/f9e96ed5.gif?v=edffcd2f");
}

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

h1 {
  color: var(--text-colour)
}

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

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)
}

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

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

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

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