/* wahooooo */

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@font-face {
font-family: Silly-Bird;
src: url("Silly-Bird.ttf") format("truetype");
}

html {
	cursor: url(icons/teal-arrow.png), auto;
}

body {
  background-image: url("/images/pink_polka_dot.png");
  background-attachment: fixed;
  font-family: Silly-Bird;
  color: var(--text-color);
}

main {
  background-color: var(--fill-color);
  border: solid 2px;
  border-radius: 15px;
}

.rainbow {
  font-weight: bold;
  background: linear-gradient(90deg, #FF0303 0%, #FFA600 16%, #FFE500 33%, #88FF00 51%, #53EDE8 68%, #AD53ED 85%);
  background-clip: text;
  color: transparent; 
  text-shadow: -2px -2px var(--text-color);
}

.trans {
  font-weight: bold;
  background: linear-gradient(90deg, #94BBE9 0%, #EEAECA 25%, #FFFFFF 50%, #EEAECA 75%, #94BBE9 100%);
  color: transparent; 
  background-clip: text;
  text-shadow: -2px -2px var(--text-color);
}

::selection {
  color: white;
  background: rgb(151, 255, 178);
}

.wide {
	transform: scale(1.6, 1)
}

:root {
	--shadow-color: rgb(110, 0, 87);
	--fill-color: rgba(255, 109, 253, 0.7);
	--text-color: rgb(126, 0, 124);
	--list-text: rgb(0, 173, 58);
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 15px;
  position: sticky;
  top: 50px;
  background-color: rgb(153, 255, 187);
  background-origin: border-box;
  border-style: solid;
  border-image-source: url(/images/flower_border.png);
  border-image-slice: 137 156 123 162;
  border-image-width: 70px;
  border-image-outset: 45px 30px;
  border-image-repeat: stretch;
}

li a {
  display: block;
  position: relative;
  padding: 15px 30px;
  color: var(--list-text);
  text-decoration: none;
  text-align: center;
  font-size: 25px;
}

li a::after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 40px;
  width: 118px;
  height: 5px;
  background-image: url(/images/line_break2.png);
}

li:last-child a::after {
  background-image: none;
}

.list-title {
  display: block;
  margin: auto auto;
  padding: 15px 0 0 0;
  color: var(--list-text);
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  border-bottom: 1.6px solid var(--list-text);
  transform: scale(1, 0.8);
}

li a:hover {
  background-color: rgb(103, 206, 255);
  color: white;
  cursor: url(icons/hand_point.png), auto;
}

footer {
  text-align: center;
  color: gray;
  font-size: 6px;
}

.WIP {
  background-color: lightblue;
  color: white;
  text-align: center;
  z-index: 12;
  opacity: 0;
  transition: opacity 1s;
  
}

.WIP:hover {
  opacity: 0.8;
}