:root {  /* put the colours ayliean picks here */
  --dark-colour: #030203;
  --bg-colour: #c7d3fb;
  --colour: #f11f89;
  --gray: #495959;
}

@font-face {  /* The header font from Ayliean's website */
  font-family: "Cheap Pine";
  src: url('/fonts/cheap-pine-webfont.woff2') format('woff2'),
       url('/fonts/cheap-pine-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face { /* The body font from Ayliean's website */
  font-family: "Futura PT";
  src: url('/fonts/futura-pt-webfont.woff2') format('woff2'),
       url('/fonts/futura-pt-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Futura PT";
  color: var(--dark-colour);
  background-color: var(--bg-colour);
  font-size: 19pt;
}

.content-wrapper {
  max-width:997px;
  margin:auto;
  margin-bottom:113px;
  text-align: center;
}

p, ul {
  max-width:71%;
  margin-left: auto;
  margin-right: auto;
}

ul,li {
  text-align:left;
}

.small, .userinfo {
  font-size: 83%
}

.userinfo a {
  font-size: 83%
}

a {
  text-decoration: none;
  color: var(--colour); 
}

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


a.button:hover{
  text-decoration: none;
}

h1 {
  color: var(--dark-colour);
  font-family: "Cheap Pine";
  font-size: 2em;
  font-weight: normal;
}

h1.stupidbig {
  display:block;
  text-align: center;
  margin: 43px 0px 67px 0px
}

@media (min-width:1009px){
h1.stupidbig {
  font-size: 61pt;
}
}
@media (max-width:1009px){
h1.stupidbig {
  font-size: 41pt;
}
}
@media (max-width:509px){
h1.stupidbig {
  font-size: 29pt;
}
}

h1:not(.stupidbig) {
  margin-top:127px;
}

h1.smallskip {
  margin-top:73px;
}
h2 {
  color: var(--colour);
  font-family: "Futura PT";
  font-size: 149%;
}

.button-container {
  text-align:center;
}

a.button {
  font-size: 43pt;
  margin: auto;
  display: block;
  margin: 0.5em auto;
  padding: 0.5em 0.5em;
  border-radius: 19px;
  text-align: center;
  width: fit-content;
  background-color: var(--dark-colour);
  color: var(--colour);
  font-family: "Cheap Pine";
}

a.button.smaller {
    display: inline-block;
    font-size: 23pt;
    margin:19px 5px;
}

a.button:hover {
  background-color: var(--colour);
  color: var(--dark-colour);
}

input[type=text] {
  padding:11px;
  font-family: "Futura PT";
  font-size:19pt;
  width:79%;
  display:block;
  margin:auto;
}

input[type=submit] {
  font-size: 19pt;
  margin: auto;
  display: block;
  margin: 0.5em auto;
  padding: 0.5em 0.5em;
  border-width: 0px;
  border-radius: 19px;
  text-align: center;
  width: fit-content;
  color: var(--dark-colour);
  background-color: white;
  font-family: "Futura PT";
}

input[type=submit]:hover {
  background-color: var(--colour);
}

img#icon {
  margin:auto;
  display:block;
  width:139px;
}

#youtube-container {
  text-align:center;
  overflow:hidden;
}

p.question {
  color: var(--colour);
  margin-bottom:0px;
}
p.answer {
  margin-top:0px;
}

/* stuff for the progress bar thing */
.meter {
  box-sizing: content-box;
  height: 41px; /* Can be anything */
  position: relative;
  background: var(--gray);
  border-radius: 23px;
  padding: 11px;
  box-shadow: inset 0 -2px 2px rgba(251, 251, 251, 0.3);
  max-width: 797px;
  margin-left:auto;
  margin-right:auto;
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  border-top-left-radius: 19px;
  border-bottom-left-radius: 19px;
  background-color: var(--colour);
  background-image: linear-gradient(
    center bottom,
    var(--colour) 37%,
    var(--dark-colour) 67%
  );
  box-shadow: inset 0 2px 11px rgba(251, 251, 251, 0.3),
    inset 0 -2px 7px rgba(0, 0, 0, 0.41);
  position: relative;
  overflow: hidden;
}
.meter > span:after,
.animate > span > span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -47deg,
    rgba(251, 251, 251, 0.2) 23%,
    transparent 23%,
    transparent 53%,
    rgba(251, 251, 251, 0.2) 53%,
    rgba(251, 251, 251, 0.2) 73%,
    transparent 73%,
    transparent
  );
  z-index: 2;
  background-size: 53px 53px;
  animation: move 2s linear infinite;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  border-top-left-radius: 19px;
  border-bottom-left-radius: 19px;
  overflow: hidden;
}

.animate > span:after {
  display: none;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 53px 53px;
  }
}

.orange > span {
  background-image: linear-gradient(var(--colour), var(--dark-colour));
}

.red > span {
  background-image: linear-gradient(var(--colour), var(--dark-colour));
}

.nostripes > span > span,
.nostripes > span::after {
  background-image: none;
}

#page-wrap {
  width: 491px;
  margin: 19px auto;
}

table {margin:auto;border-spacing:15px 2px;margin-top:1em;margin-bottom:1em}
table td {padding-left:10px;padding-right:10px}
table thead td {border-bottom: 3px solid var(--colour)}
table tr.you td {color: var(--colour);font-weight:bold}
table i {color: var(--gray)}