/* BASIC RESET */
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
  margin: 0;
  padding: 0;
}

:root {
  --under-color: rgba(49, 48, 206, 0.15)
}

/* HTML ELEMENTS */
body {
  background-color: #ffffff;
  color: #000000;
  overflow: hidden;
  font-family: 'Quattrocento Sans', sans-serif;
}

h1 {
  padding-top: 1rem;
  font-size: 5rem;
  text-align: center;
  color: #000000;
  text-shadow: 0 2px 6px #333;
  z-index: 20;
}

/* COMMON CLASSES */
.break {
  clear: both;
}

/* WRAPPER */
#wrapper {
  width: 800px;
  margin: 40px auto;
}

.qr {
  position: absolute;
  left: 3vw;
  bottom: 3vh;
  padding: 10px;
  background-color: rgba(100, 0, 100, 0.1);
  border-radius: 1em;
  transform: rotate(3deg);
  border: 2px solid red;
  z-index: 10;
}

.notes {
  position: absolute;
  right: 3vw;
  bottom: 3vw;
  background-color: rgba(100, 100, 100, 0.2);
  padding: 10px;
  border: 2px solid red;
  border-radius: 25px;
  transform: rotate(-2deg);
  z-index: 10;
}

.fortune {
  position: absolute;
  left: 50vw;
  top: 75vh;
  width: 100vw;
  font-size: 2rem;
  text-align: center;
  text-shadow: 0 0 8px #777, 0 0 9px #888;
  color: #111111;
  padding: 10px;
  border-radius: 25px;
  background-color: rgba(243, 212, 197, 0.45);
  margin: 0 auto;
  /*	background-color:rgba(200, 200, 200, 0.45);*/
  transform: translate(-50%, -50%);
  z-index: +2;
}

.image {
  border: 2px solid white;
  border-radius: 2rem;
  position: absolute;
  top: 40vh;
  left: 50vw;
  padding: 1rem;
  margin: 0 auto;
  z-index: 5;
  transform: translate(-50%, -50%) rotate(-2deg);
}

.cr {
  position: absolute;
  left: 50vw;
  bottom: 2vh;
  text-shadow: 0 0 16px grey;
  margin: 0 auto;
  color: #f3d4c5;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: -2;
}

.error {
  position: absolute;
  right: 40vw;
  top: 45vh;
  font-size: 600%;
  color: white;
  background-color: rgba(100, 100, 100, 0.2);
  padding: 20px;
  border-radius: 25px;
  transform: rotate(-14deg);
  z-index: 20;
}

/* BOKEHS */
#bokehs {
}

.bokeh {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: -10;
}

.star-five {
  display: block;
  position: relative;
  width: 0;
  height: 0;
  color: #ff000044;
  border-bottom: 70px solid var(--under-color);
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  margin: 50px 0;
  transform: rotate(35deg);
}

.star-five:before {
  display: block;
  position: absolute;
  top: -45px;
  left: -65px;
  height: 0;
  width: 0;
  border-bottom: 80px solid var(--under-color);
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  content: '';
  transform: rotate(-35deg);
}

.star-five:after {
  display: block;
  position: absolute;
  top: 3px;
  left: -105px;
  width: 0;
  height: 0;
  color: yellow;
  border-bottom: 70px solid var(--under-color);
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  content: '';
  transform: rotate(-70deg);
}