/*
  friendlyui v1 design with catppiccin mocha colors
  (Well this is not exactly really friendlyui but close)
*/

html, body {
 	--mocha-rosewater: #f5e0dc;
	--mocha-flamingo: #f2cdcd;
	--mocha-pink: #f5c2e7;
	--mocha-mauve: #cba6f7;
	--mocha-red: #f38ba8;
	--mocha-maroon: #eba0ac;
	--mocha-peach: #fab387;
	--mocha-yellow: #f9e2af;
	--mocha-green: #a6e3a1;
	--mocha-teal: #94e2d5;
	--mocha-sky: #89dceb;
	--mocha-sapphire: #74c7ec;
	--mocha-blue: #89b4fa;
	--mocha-lavender: #b4befe;
	--mocha-text: #cdd6f4;
	--mocha-subtext1: #bac2de;
	--mocha-subtext0: #a6adc8;
	--mocha-overlay2: #9399b2;
	--mocha-overlay1: #7f849c;
	--mocha-overlay0: #6c7086;
	--mocha-surface2: #585b70;
	--mocha-surface1: #45475a;
	--mocha-surface0: #313244;
	--mocha-base: #1e1e2e;
	--mocha-mantle: #181825;
	--mocha-crust: #11111b;

  padding: 0em;
  margin: 0;
  background: var(--mocha-mantle);
  color: var(--mocha-text);

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.araw {
  color: var(--mocha-text);
  text-decoration: none;
}

.pad, .block, header {
  padding: 1em;
  margin: 0.5em;
}

/* .pad > *, .block > *, header > * { */
  /* margin: 0.5em; */
/* } */

.block, header {
  background: var(--mocha-base);
  border-radius: 1.5em;
}

.block .block {
  background: var(--mocha-crust);
  margin: 0;
  margin-top: 0.5em;
  border-radius: 0.5em;
}

header {
  position: sticky;
  top: 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
}

header img {
  height: 3em;
}

header > a {
  text-decoration: none;
}

.flex-pad {
  flex-grow: 1;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

/* p { */
  /* margin-vertical: 0.5em; */
/* } */

a {
  color: var(--mocha-blue);
}

.btn {
  padding: 0.5em;
  background: var(--mocha-peach);
  border-radius: 0.5em;
  color: var(--mocha-crust);
  font-weight: bolder;
  text-align: center;
  justify-content: center;
  justify-text: center;
}

.item > img {
  float: left;
  height: 4em;
  width: 4em;
  object-fit: cover;
  margin-right: 1em;
}

input[type=range][orient=vertical] {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    vertical-align: bottom;
    height: 
}

input[type=text], input[type=number], input[type=password] {
  background: var(--mocha-crust);
  padding: 0.5em;
  border-radius: 0.5em;
  border: 1px solid var(--mocha-teal);
  color: var(--mocha-text);
  width: fit-content;
}

input[type=submit], button{
  background: var(--mocha-teal);
  padding: 0.5em;
  border-radius: 0.5em;
  border: none;
  color: var(--mocha-crust);
  font-weight: bolder;
  width: fit-content;
}


.erm_dim, .subtext {
  color: var(--mocha-subtext0);
}

.erm_under {
  text-decoration: underline;
}

pre {
  overflow-x: scroll;
}

/*
 _     _      _     _     
| |__ | | ___| |__ | |__  
| '_ \| |/ _ \ '_ \| '_ \ 
| |_) | |  __/ | | | | | |
|_.__/|_|\___|_| |_|_| |_|
*/

#ermcat {
  height: 3em;
  margin: 5em;  
  animation-name: myAnimation;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.18,.89,.32,1.28);
}

@keyframes myAnimation {
  from {
    transform: rotate(0deg) scaleX(1);
  }
  50% {
    transform: rotate(380deg) scaleX(2);
  }
  to {
    transform: rotate(360deg) scaleX(1);
  }
}