@font-face {
  font-family: sillyfont;
  src: url(/assets/fonts/MelonCamp.otf);
}

body {
  background-color: rgba(209, 99, 182, 0.6);
  background-image: url("/assets/images/catheadphones-nobg.png");
  background-blend-mode: soft-light;
  font-family: "sillyfont";
  font-size: 35px;
  font-weight: normal;
  color: rgb(255, 255, 255);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.bgimage {
  z-index:-1000;
  padding: 0%;
  position:fixed;
  mix-blend-mode: soft-light;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  opacity: .3;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.bgstatic {
  z-index:-1000;
  padding: 0%;
  position:fixed;
  mix-blend-mode:lighten;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  opacity: .05;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.image-wrapper {
  z-index: -100;
  position: relative;
  display: inline-block;
  background-color: rgb(209, 99, 182);
}

.meowzonebutton {
  font-family: "sillyfont";
  background-color: rgb(224, 83, 130);
  border-width: 3px;
  border-style: solid;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  margin:5px
}

.meowzoneaudio {
  display:none;
}

.meowzoneimage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  object-fit: contain;
  padding: 0;
  margin: 0;
  scale: 100% -100%;
  filter: sepia(100%) brightness(90%) saturate(200%) hue-rotate(-90deg);
  rotate:180deg;
  animation: rotate 5s infinite linear;
}
@keyframes rotate {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.aboutclaire {
  background-color: rgba(248, 108, 178,.9);
  padding: 15px;
  border-color: black;
  border-width: 3px;
  border-style: solid;
}

.aboutmelink:link {
  color: rgb(92, 199, 88);
  background-color: transparent;
  text-decoration:underline;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.aboutmelink:visited {
  color: rgb(92, 199, 88);
  background-color: transparent;
  text-decoration:underline;
  text-decoration-style: dashed;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.aboutmelink:hover {
  color: rgb(92, 199, 88);
  background-color: transparent;
  text-decoration: underline;
  text-decoration-style: wavy;
}

.aboutmelink:active {
  color: rgb(255, 255, 255);
  background-color: transparent;
  text-decoration: underline;
  text-decoration-style: wavy;
}

.photography {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  padding: 15px;
  background-color: rgba(255, 255, 255, .5);
}

.photography img {
  vertical-align: middle;
  width: 100%;
  height: auto;
}

.homepagelink:link {
  color: rgb(224, 83, 130);
  background-color: transparent;
  text-decoration:underline;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.homepagelink:visited {
  color: rgb(224, 83, 130);
  background-color: transparent;
  text-decoration:underline;
  text-decoration-style: dashed;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.homepagelink:hover {
  color: rgb(224, 83, 130);
  background-color: transparent;
  text-decoration: underline;
  text-decoration-style: wavy;
}

.homepagelink:active {
  color: rgb(255, 255, 255);
  background-color: transparent;
  text-decoration: underline;
  text-decoration-style: wavy;
}

img {
    padding: 5px;
}

.wavy
{
  position: relative;
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.2));
}
.wavy span
{
  position: relative;
  display: inline-block;
  font-size: 2em;
  text-transform: uppercase;
  animation: animate 2s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--i))
}
@keyframes animate
{
  0%
  {
    transform: translateY(0px);
  }
  20%
  {
    transform: translateY(-30px);
  }
  40%, 100%
  {
    transform: translateY(0px);
  }
}
@media (max-width: 320px)
{
  .wavy span{
    font-size: 110%;
  }
}
@media (max-width: 224px)
{
  .wavy span {
    font-size: 80%;
  }
}
@media (max-width: 205px)
{
  .wavy span {
    font-size: 70%;
  }
}
@media (max-width: 185px)
{
  .wavy span {
    font-size: 50%;
  }
}