@font-face {
  font-family: Litte Salty;
  src: url(LitteSalty.otf);
}

@font-face {
  font-family: Gaegu;
  src: url(Gaegu-Regular.ttf);
}

body {
  font-family: Gaegu;
  font-size: 1.5rem;
  background-color: #f8faff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2395c5dc' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.display-1 {
  font-family: Litte Salty;
  font-size: 3.5rem;
}

.display-4 {
  font-size: 2.5rem;
}

.display-5 {
  font-size: 2rem;
}

h1, .h1 {
  font-family: Litte Salty;
  font-size: 3.5rem;
}

h2, .h2 {
  font-family: Litte Salty;
  font-size: 2.2rem;
} 

h3, h4, h5, .h3, .h4, .h5 {
  font-family: Litte Salty;
}

p {
  letter-spacing: -1px;
  line-height: 28px;
}

.tiny-text {
  font-size: 1.1rem;
}

b, .tier-rank {
  font-family: Litte Salty;
  font-size: 1.05rem;
  letter-spacing: 0px;
}

u {
  text-decoration: 5px dotted underline rgb(0, 204, 255);
  text-underline-offset: 7px;
}

i {
  color: rgb(255, 82, 189)
}

mark {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

mark, .mark-yellow {
  background-image: linear-gradient(
    to right,
    rgba(242, 255, 66, 0.1),
    rgba(242, 255, 66, 0.7) 4%,
    rgba(242, 255, 66, 0.15)
  );
}

mark, .mark-pink {
  background-image: linear-gradient(
    to right,
    rgba(255, 117, 158, 0.1),
    rgba(255, 82, 189, 0.7) 4%,
    rgba(255, 117, 158, 0.15)
  );
}

mark, .mark-blue {
  background-image: linear-gradient(
    to right,
    rgba(0, 204, 255, 0.1),
    rgba(0, 204, 255, 0.7) 4%,
    rgba(0, 204, 255, 0.15)
  );
}

mark, .mark-green {
  background-image: linear-gradient(
    to right,
    rgba(174, 255, 69, 0.1),
    rgba(174, 255, 69, 0.7) 4%,
    rgba(174, 255, 69, 0.15)
  );
}

mark, .mark-orange {
  background-image: linear-gradient(
    to right,
    rgba(255, 168, 87, 0.1),
    rgba(255, 168, 87, 0.7) 4%,
    rgba(255, 168, 87, 0.15)
  );
}

a {
  color: rgb(236, 90, 71) !important;
  text-decoration-style: dotted;
}

a:hover {
  color: rgb(172, 43, 26) !important;
}

.nav-link {
  color: rgb(236, 90, 71) !important;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.nav-link:hover {
  color: black !important;
  background-image: linear-gradient(
    to right,
    rgba(242, 255, 66, 0.1),
    rgba(242, 255, 66, 0.7) 4%,
    rgba(242, 255, 66, 0.15)
  );
}

.nav-text {
  font-family: Litte Salty;
  font-size: .9rem;
}

.yarnfish {
  color: rgb(6, 179, 183) !important;
}

.sticker {
  -webkit-filter:
    drop-shadow(2px 0px 0px white)
    drop-shadow(-2px 0px 0px white)
    drop-shadow(0px -2px 0px white)
    drop-shadow(0px 2px 0px white);
  filter: 
    drop-shadow(2px 0px 0px white)
    drop-shadow(-2px 0px 0px white)
    drop-shadow(0px -2px 0px white)
    drop-shadow(0px 2px 0px white);
}

.text-shadow {
  -webkit-filter: drop-shadow(2px 2px 2px black);
  filter: drop-shadow(2px 2px 2px black);
}

.tape {
  background-image: linear-gradient(
    to right,
    rgba(176, 176, 206, 0.15),
    rgba(176, 176, 206, 0.35) 10%,
    rgba(176, 176, 206, 0.15)
  );
}

.bg-pink {
  background-color: rgb(250, 227, 234);
}

.bg-yellow {
  background-color: rgb(250, 244, 227);
}

.bg-blue {
  background-color: rgb(215, 238, 245);
}

.bg-green {
  background-color: rgb(227, 245, 215);
}

.papershadow, .carousel {
  box-shadow: 4px 4px 0px rgba(24, 33, 37, 0.25);
  border: 1px solid rgba(214, 141, 163, 0.35);
}

hr {
  border: 0;
  border-top: 2px dashed rgb(149, 197, 220);
  text-align: center;
}

hr:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -13px;
  padding: 0 3px;
  color: rgb(149, 197, 220);
  font-size: 28px;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.tierlist {
  border: 1px dashed black;
        min-height: 66px;
  background-color: rgba(149, 197, 220, .25);
}

.letter {
  border: 1px solid black;
        min-height: 66px;
}

.letter.s {
  background-color: rgba(255, 82, 189, .75)
}

.letter.a {
  background-color: rgba(255, 168, 87, .75)
}

.letter.b {
  background-color: rgba(242, 255, 66, .75)
}

.letter.c {
  background-color: rgba(174, 255, 69, .75)
}

.letter.d {
  background-color: rgba(0, 204, 255, .75)
}

.letter.e {
  background-color: rgba(207, 87, 255, .75)
}

.letter.f {
  background-color: rgba(151, 145, 158, 0.75)
}
.deposit {
  border: none;
}