:root {
  --colour1: #111;      /* black */
  --colour2: #732370;   /* purple */
  --colour4: #b10000;   /* red */
  --colour5: #466E47   /* green */
}

html {
  box-sizing: border-box;
  overflow-y: scroll;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background-color: #fef9d7;
  font: 1.1rem / 1.4 Lato, Helvetica, Arial, sans-serif;
  letter-spacing: .9px;
  color: var(--colour1);
  margin: 0;
  padding: 0;
}

#page1 {
  background: url(../images/silhouette1.png) 99% center no-repeat,
    linear-gradient(40deg, #fef9d7 0%, #d299c2 100%);
  background-attachment: fixed, fixed;
}
#page2 {
  background: url(../images/silhouette1.png) 99% center no-repeat,
    linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
  background-attachment: fixed, fixed;
}
#page3 {
  background: url(../images/silhouette1.png) 99% center no-repeat,
    linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
  background-attachment: fixed, fixed;
}
#page4 {
  background: url(../images/silhouette1.png) 99% center no-repeat,
    linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  background-attachment: fixed, fixed;
}
#page5 {
  background: url(../images/silhouette1.png) 99% center no-repeat,
    linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
  background-attachment: fixed, fixed;
}
/* https://webgradients.com/ */

.wrapper {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 10px;
}

h1 img {
  max-width: 360px;
  width: auto;
}

h2 {
  font-size: 1.5rem;
  color: var(--colour2);
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  margin-bottom: 1em;
}

hr {
  border: 0;
  height: 1px;
  color: var(--colour1);
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

a {
  color: var(--colour4);
  text-decoration: wavy underline;
  text-decoration-color: #d47373;
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--colour5);
}

.err {
  color: var(--colour4);
}

.over18 {
  font-weight: bold;
  padding: 8px 12px;
  color: var(--colour2);
  border: 3px solid var(--colour2);
}

.copyright,
.count {
  font-size: 0.9rem;
}

.gohome a {
  box-shadow: 3px 4px 0 0 #5F1D5D;
  background: linear-gradient(to bottom, #872983 5%, #C13BBC 100%);
  background-color: #872983;
  border-radius: 4px;
  border: 1px solid #5F1D5D;
  display: inline-block;
  color: #ffffff;
  padding: 4px 18px;
  text-decoration: none;
  text-shadow: 0 1px 0 #5F1D5D;
}
.gohome a:hover {
  background: linear-gradient(to bottom, #C13BBC 5%, #872983 100%);
  background-color: #C13BBC;
}
.gohome a:active {
  position: relative;
  top: 2px;
  left: 2px;
  box-shadow: 3px 4px 0 0 transparent;
}

.signview {
  text-align: center;
}

/* ratings */
.star {
  color: #999;
  font-size: 25px;
  cursor: pointer;
}
.hovered,
.selected {
  color: #732370;
}

@media only screen and (max-width: 990px) {
  #page1 {
    background: linear-gradient(40deg, #fef9d7 0%, #d299c2 100%);
    background-attachment: fixed;
  }
  #page2 {
    background: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
    background-attachment: fixed;
  }
  #page3 {
    background: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
    background-attachment: fixed;
  }
  #page4 {
    background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
    background-attachment: fixed;
  }
  #page5 {
    background: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
    background-attachment: fixed;
  }
}