@font-face {
  font-family: Emerald;
  src: url(/fonts/pokemon-emerald.otf);
}

@font-face {
  font-family: Fira Sans;
  src: url(/fonts/FiraSans-Regular.ttf);
}

@font-face {
  font-family: Jacquard;
  src: url(/fonts/Jacquard12-Regular.ttf);
}

@font-face {
  font-family: Stardew;
  src: url("/fonts/svbold.otf");
}

html {
  cursor: url(/images/ultra-ball-cursor.png), default;
}

a:hover {
  cursor: url(/images/ultra-ball-cursor-selected.png), pointer;
}

body {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/images/night.png);
  background-size: cover;
  background-repeat: repeat-y;
  background-attachment: fixed;
  height: 100vh;
  image-rendering: pixelated;
  margin: 0;
}

main {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(/images/rustboro.png);
  box-shadow: 0 0 50px 15px #000000;
  background-size: 800px;
  background-repeat: repeat-y;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  column-gap: 20px;
  width: 800px;
  margin: 0 auto;
}

#left {
  width: 476px;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

#title {
  background-image: url(/images/box.png);
  background-size: 476px;
  background-repeat: no-repeat;
  width: 476px;
  height: 84px;
  font-family: "Emerald";
  font-size: 30px;
  line-height: 32px;
  outline: 0;
  border: 0;
  resize: none;
  padding: 12px 36px;
  color: #636363;
  box-sizing: border-box;
}

#title h1 {
  padding: 0;
  margin: 0;
  font-size: 100%;
  font-weight: normal;
}

#about {
  background: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.5));
  padding: 18px 20px 0px 20px;
  margin: 0;
  box-sizing: border-box;
  font-size: 20px;
  font-family: "Fira Sans";
  position: relative;
  margin-bottom: 5px;
}

#about::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

#cringe {
  font-family: "Jacquard";
  font-size: 36px;
  --color: oklch(63% 1.5 0);
  background: linear-gradient(45deg in oklch longer hue, var(--color), var(--color));
  background-size: 220%;
  background-position: 38% 50%;
  background-clip: text;
  color: transparent;
  text-align: center;
}

#stardew h2 {
  padding: 0;
  margin: 0;
  font-family: "Stardew";
  color: black;
  padding-bottom: 5px;
  text-shadow: 1px 1px 5px #fff, 1px 1px 5px #ccc;
}

#blight h2 {
  padding: 0;
  margin: 0;
  font-family: "Jacquard";
  font-size: 30px;
  color: black;
  padding-bottom: 5px;
  text-shadow: 1px 1px 5px #fff, 1px 1px 5px #ccc;
}

#blight > div {
  display: flex;
}

#blight > div > * {
  flex: 1;
}

#blight > div > p {
  margin: 0;
  padding: 10px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  font-family: "Fira Sans";
}

#lesbian {
  background: linear-gradient(to right, rgb(213, 44, 0), rgb(226, 150, 136), rgb(255, 255, 255) 45%, rgb(255, 255, 255), rgb(255, 255, 255) 55%, rgb(210, 127, 164), rgb(162, 2, 98));
  display: inline-block;
  font-weight: bold;
  background-clip: text;
  color: transparent;
  position: relative;
}

#right {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

#nav {
  background-image: url(/images/selection-long.png);
  background-size: 108px;
  width: 108px;
  height: 156px;
  image-rendering: pixelated;
  padding: 0;
  margin: 0;
  font-family: "Emerald";
  font-size: 30px;
  line-height: 32px;
  outline: 0;
  border: 0;
  resize: none;
  padding: 15px 30px;
  color: #636363;
  box-sizing: border-box;
}

#gallery {
  display: flex;
  flex-direction: column;
}

#gallery img {
  width: 100%;
}