@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@160;300;400;700&display=swap");

html {
  --darkblue: rgb(15, 40, 47);
  --red: rgb(212, 34, 60);
  background: url("/website/images/backgrounds/body-background.png");
}

body {
  font-family: "Readex Pro";
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  margin: 10px 150px 10px 150px;
  font-size: 18px;
}

header {
  background: var(--red);
  border: 40px solid var(--red);
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
}

iframe {
  margin-bottom: 30px;
}

h1,
h2 {
  text-align: center;
  font-family: "Darumadrop One", cursive;
  padding: 2px;
  color: var(--darkblue);
  background: pink;
  rotate: 1deg;
  margin: auto 10px 0px 10px;
}

h1:nth-of-type(2n) {
  rotate: -1deg;
}

header h1 {
  background: none;
  color: white;
  font-size: 50px;
}

a {
  font-size: 20px;
  text-transform: lowercase;
  color: var(--darkblue);
  line-height: 1.8;
}

section {
  background: var(--darkblue);
  color: white;
  border: 2px dotted var(--red);
}

section:nth-of-type(2n) {
  background: var(--red);
  border: 3px dashed pink;
}

details {
  background: black;
  padding: 10px 20px 10px 20px;
  rotate: -1deg;
}

section:nth-of-type(2n) details {
  rotate: 1deg;
  border: 2px dashed white;
}

#column {
  padding: 10px;
  border: 2px dotted pink;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  border-radius: 15px 7px 15px 45px/4px 65px 25px 4px;
  background: url("/website/images/backgrounds/maincontent-background.png");
}

@media only screen and (max-width: 800px) {
  #leftpic,
  #backlink,
  #timer {
    display: none;
  }

  body {
    margin: 0px;
  }
}

#leftpic,
#tape1,
#tape2 {
  z-index: 99;
  position: fixed;
  border: 7px solid white;
  padding: 8px;
  box-sizing: border-box;
}

#leftpic {
  left: 20px;
  top: 20px;
}

#leftpic img {
  width: 180px;
}

#tape1,
#tape2 {
  z-index: 10000;
  border: 0;
}

#tape1 {
  left: 10px;
  top: -23px;
  border: 0;
}

#tape2 {
  right: 10px;
  bottom: 270px;
  border: 0;
}

#backlink {
  position: fixed;
  z-index: 25000;
}

#backlink {
  left: 90px;
  top: 222px;
}

#backtextlink {
  display: none;
}

#timer {
  width: 100px;
  z-index: 1000;
  position: absolute;
  left: 40px;
  top: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#timer-button {
  height: 400px;
}

#timer-button a {
  background: none;
}

#timer h2 {
  font-size: 18px;
}

.lspacer {
  width: 210px;
  background-color: ivory;
  z-index: -999;
  position: fixed;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
  left: 20px;
  top: 20px;
  height: 250px;
}

.song,
.album {
  font-family: "Darumadrop One", cursive;
}

.song {
  text-shadow: 1px 1px var(--red);
}

.album {
  text-transform: uppercase;
  text-shadow: -1px -1px var(--yellow);
  border: 1px dotted var(--yellow);
}

.lyrics {
  font-style: italic;
}

.column-content,
.column-content img {
  padding: 10px;
  text-align: center;
}

.column-content {
  color: #4a2545;
}

#column2 .column-content {
  color: black;
}

.column-content .pen-border {
  position: relative;
}

.pen-border:before {
  content: "";
  z-index: -1;
  left: 0;
  top: 4px;
  border-width: 2px;
  border-style: solid;
  border-color: darkblue;
  position: absolute;
  border-right-color: transparent;
  width: 100%;
  height: 1em;
  transform: rotate(2deg);
  opacity: 0.5;
  border-radius: 0.25em;
}

.pen-border:after {
  content: "";
  z-index: -1;
  left: 0em;
  top: 4px;
  border-width: 2px;
  border-style: solid;
  border-color: darkblue;
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
  width: 100%;
  height: 1em;
  transform: rotate(-1deg);
  opacity: 0.5;
  border-radius: 0.25em;
}

[role="tooltip"] {
  display: block;
  background-color: var(--darkgreen);
  position: fixed;
  width: 500px;
  top: calc(50% - 150px);
  left: calc(50% - 250px);
  z-index: 9999;
  color: white;
  padding: 20px;
  box-shadow: 8px 9px 11px black;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

[role="tooltip"] img {
  width: 200px;
}

[role="tooltip"] .tooltip__body {
  padding: 10px;
}

[role="tooltip"] a:not(:active) {
  color: var(--green);
}

[role="tooltip"] a:hover {
  color: var(--yellow);
}

#backlink img,
#countdown img {
  width: 60px;
}

#backlink img {
  position: absolute;
  top: -10px;
  left: -60px;
  rotate: 13deg;
}

#countdown img {
  transform: scaleX(-1);
  position: absolute;
  rotate: 1deg;
}

.hidden {
  display: none;
}

#skiplink {
  display: none;
}

#skiplink:focus {
  display: block;
}