comicsite/_sass/main.scss

@import "sidebar";
@import "statuscafe";
@import "fonts";
@import "mobile";
@import "background";

html {
	background-color: #2196F3;
	filter: blur(0.5px);
}

html::before {
	content: "";
	position: fixed;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	pointer-events: none;
	background-color: yellowgreen;
	mix-blend-mode: overlay;
	z-index: 99;
}

html::after {
	content: "";
	position: fixed;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	pointer-events: none;
	background-color: #b4f998;
	mix-blend-mode: multiply;
	z-index: 100;
}

.truecolor { z-index: 1000; position: relative; }

html, body {
	color: black;
	text-align: center;
	margin: 1px;
	cursor: url("/cursor.png"),auto;
}

:not(#sprite) {
	transition: 0.3s ease-in-out;
	scroll-behavior: smooth;
}

h1 {
	margin: 1px;
	padding: 8px;
	background-color: blue;
}
h1 a { color: white; }

img {
	width: auto;
	height: auto;
	margin: 2px;
}

.overlay, .background {
	pointer-events: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0; bottom: 0;
	left: 0; right: 0;
}

.overlay {
	z-index: 1000001;
}

.inline {
	height: 1em;
}

#flood {
	z-index: -1 !important;
}

#flood-menu {
	z-index: 9999999999 !important;
}

.blinkers {
	max-height: 7vh;
	min-height: 32px;
}

.center {
	display: flex;
	align-items: center;
	justify-content: center;
}

#webring-disp {
	display: flex;
	background-color: white;
	justify-content: center;
}

#player {
	display: flex;
	justify-content: flex-end;
	position: fixed;
	bottom: 10vh; left: -4vw;
	padding: 10px;
	gap: 10px;
	width: 25vw;
	background-color: black;
	color: white;

	transform: rotate(3deg);
	z-index: 5;
}

#player * {
	color: white;
	text-decoration: none;
}

#player::after {
	content: '';
	border-style: solid;
	border-width: 2.2em 0 0 40px;
	border-color: transparent transparent transparent black;
	position: absolute;
	top: 0; right: -40px;
}


code {
	display: inline-block;
	background-color: gray;
	border: 1px black solid;
	padding: .5em;
	margin: 0.5em 0.25em;
}

a:hover{
	text-shadow: 0px 0px 3px #C8CEB0 ;
}

body::before {
	content: "";
	position: fixed;
	left: 0px; top: 0px;
	width: 100%; height: 100%;
	opacity: 0.2;
	pointer-events: none; z-index: 1000;
	background-image: url("/assets/images/decor/overlay.png");
	background-image: linear-gradient(#000000, #00000000, #000000);
	background-size: 3px 3px;
	animation-name: static;
	animation-duration: 2s; animation-iteration-count: infinite;
	animation-timing-function: steps(4);
	z-index: 100000000;

}

@keyframes static {
	0% { background-position: 0 0 }
	100% { background-position: 0 4px }
}

#webring-disp { color: black; }
#webring-disp a { color: black; }


// marching ants

a{
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a:hover {
  padding: 4px;
  background-image: linear-gradient(90deg, black 50%, transparent 50%),
  linear-gradient(90deg, black 50%, transparent 50%),
  linear-gradient(0deg, black 50%, transparent 50%),
  linear-gradient(0deg, black 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
  background-position: left top, right bottom, left bottom, right top;
  animation: border-dance 0.7s steps(4) infinite;
}
/*Huge thanks to this specific stack overflow answer for getting the marching ants: https://stackoverflow.com/a/52963366 */
/*The below code adds a second layer, so there's a black shadow (above) and blue top (below).*/
a:hover::before {
  content: '';
  position: absolute;
  top: -1px; /* Adjust for exact overlap */
  left: -1px; /* Adjust for exact overlap */
  bottom: 1px;
  right: 1px;
  background-color: transparent;
  background-image: linear-gradient(90deg, skyblue 50%, transparent 50%),
  linear-gradient(90deg, skyblue 50%, transparent 50%),
  linear-gradient(0deg, skyblue 50%, transparent 50%),
  linear-gradient(0deg, skyblue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
  background-position: left top, right bottom, left bottom, right top;
  animation: border-dance 0.7s steps(4) infinite;
  pointer-events: none; /* Ensure it doesn’t interfere with the link */
}

@keyframes border-dance {
  0% {
    background-position: left top, right bottom, left bottom, right top;
  }

  100% {
    background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px;
  }
}