:root {
  --primary-text: #996600;
  --background-colour: beige;
  --accent-colour-1: #666600;
  --accent-colour-2: #cc6633;
  --main-padding: 20px;
  --font-stack: "Segoe UI", Tahoma, sans-serif;
}

#header h1 {
  padding: 0 0 0 0;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: var(--accent-colour-2); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px; /* Some padding */
  border-radius: 50px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  transition: opacity 0.3s;
  min-width: 45px;
}

#myBtn:hover {
  background-color: var(--accent-colour-1);
}

.competition-faq {
  padding: 0 0 1.5em 0;
}

/* Responsive image sizing for left-aligned images
   Keeps images fluid while capping their displayed width.
   Adjust `max-width` to change display size. */
.image.left img {
  width: 100%;
  max-width: 220px; /* change this value to control displayed size */
  height: auto;
  display: block;
}

/* Modifier classes for per-image sizing */
.image.left.small img {
  max-width: 160px;
}
.image.left.medium img {
  max-width: 220px;
}
.image.left.large img {
  max-width: 320px;
}

/* Right-aligned equivalents */
.image.right {
  display: block;
  float: right;
  margin: 0 0 2em 2em; /* mirror left: top/right/bottom/left */
  position: relative;
  top: 0.25em;
}

.image.right img {
  display: block;
  width: 100%;
  max-width: 220px; /* change this to control displayed size */
  height: auto;
}

.image.right.small img {
  max-width: 160px;
}
.image.right.medium img {
  max-width: 220px;
}
.image.right.large img {
  max-width: 320px;
}