/*Styles for all of one element*/

/* Meowy*/

p {
  max-width: 64ch;
}

/*Custom Styles*/

a.meowy {
  display: block;
}

h1.meowy {
  color: green;
}

h2.meowy {
  color: green;
}

h3.meowy {
  color: green;
}

h4.meowy {
  color: green;
}

h5.meowy {
  color: green;
}

h6.meowy {
  color: green;
}

p.meowy {
  color: blue;
}

a.meowy:link {
  color: red;
}

a.meowy:visited {
  color: #FF4400;
}

a.meowy:hover {
  color: #FF9900;
}

a.meowy:active {
  color: #000000;
}

body.meowy {
  background-color: pink;
}

div.meowy {
  background-color: pink;
  width: 100%;
}

/*Dark-Contrast*/

.DarCon {
  background-color: black;
  color: white;
}

div.DarCon {
  width: 100%;
}

/*DARK MODE*/

@media (prefers-color-scheme: dark) {
  h1.meowy {
    color: lawngreen;
  }

  h2.meowy {
    color: lawngreen;
  }

  h3.meowy {
    color: lawngreen;
  }

  h4.meowy {
    color: lawngreen;
  }

  h5.meowy {
    color: lawngreen;
  }
  
  h6.meowy {
    color: lawngreen;
  }
  
  p.meowy {
    color: white;
  }

  body.meowy {
    background-color: black;
  }
  
  div.meowy {
    background-color: black;
  }
}

/*Special effects*/

@keyframes anim-shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  25% { transform: translate(-1px, 0px) rotate(-1deg); }
  50% { transform: translate(1px, -1px) rotate(1deg); }
  75% { transform: translate(-1px, 1px) rotate(0deg); }
  100% { transform: translate(1px, 1px) rotate(0deg); }
}

.effects-shaky {
  animation: anim-shake 0.2s infinite;
}