@font-face {
	font-family: "CCExterminateMercilessly";
	src: url("/fonts/freud.ttf");
}

@font-face {
	font-family: "typewriter";
	src: url('/fonts/KingthingsTrypewriter2.ttf');
}


@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');

body {
	color: var(--orange);;
	font-family: monospace;
	font-size: 13px;
	text-transform: lowercase;
	text-align: justify;
	filter: drop-shadow(0.1em 0.1em 0.0001em var(--black));
}

img {
  filter: sepia(.2);
  transition: .1s;
}

hr {
	border-bottom: var(--green) 2px solid;
	border-top: none;
	border-right: none;
	border-left: none;
	;
}

button, select {
  margin: 5px 10px 10px 0;
	border-radius: 2px;
	padding: 1px 3px 2px;
	border: none;
	border-top: 1px var(--lightgreen) solid;
  background: var(--green);
  color: var(--white);
  font-size: 13px;
	text-transform: lowercase;
  font-family: monospace;
	transition: .2s;
}

button:hover {
  background: var(--lightgreen);
  	cursor: pointer;
}

button:active {
  background: var(--green);
}

.active {background-color: var(--lightgreen)}

select::after {
	border-radius: 0px;
}

a {
  color: var(--darkorange);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a.disabled {
    pointer-events: none;
    color: var(--lightgreen);
}

p:hover, h1:hover, h2:hover, span:hover, div:hover {cursor: default;}


li {
  margin-left: 10px;
	margin-bottom: 6px;
	list-style: square;
}

h1 {
	margin: 10px 0;
  font-size: 14px;
	font-weight: normal;
	color: var(--white);

}

h2 {
	margin: 10px 0;
	font-size: 13px;
	font-weight: normal;
	color: var(--lightgreen);
}

textarea, input {
  background: transparent;
	border: var(--lightgreen) 2px solid;
	color: var(--orange);
	font-size: 13px;
	padding: 5px;
	margin: 5px 0;
	resize: none;
}

textarea:focus, input:focus {outline: none;}
textarea:hover, input:hover {cursor:text;}

select:focus {outline: none;}

::placeholder {color: var(--lightgreen);}

.no-transform {text-transform: none;}

.no-border {border: none;}

.white {color: var(--white);}

.hidden {display: none;}
.shown {display: block;}

.inline {display: inline;}

.info {
    display: inline;
    color: var(--lightgreen);
}

::selection {background-color: var(--green);}

::-webkit-scrollbar {
	width: 3px;
	height: 6px;
}
  
::-webkit-scrollbar-track {
	display: none;
}
  
::-webkit-scrollbar-thumb {background: var(--green);}

.unselectable, img {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.albums {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 12px;
}

.albums div {
    width: 160px;
}

.albums img {
    width: 160px;
    height: 160px;
    border: 1px solid var(--green);
}

blockquote {
	color: var(--orange); 
	position: relative;
	margin: auto 0 auto;
	padding: 0 2em;
	text-align: justify;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  font-size: 25px;
  color: var(--lightgreen);
  position: absolute;
  top: -.2em;
  left: 0;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  font-size: 25px;
  color: var(--lightgreen);
  position: absolute;
  bottom: -.2em;
  right: 0;
}

.spoiler{
  background-color: var(--green);
  color: transparent;
  text-shadow: none;
  transition: .2s;
}

.spoiler:hover {
  cursor: text;
}

.spoiler::selection {
  text-shadow: inherit;
  color: var(--orange);
  transition: .2s;
}