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

:root {
	--root-font-size: 18px;

	--yellow: #f8ef02;
	--cyan: #00ffd2;
	--red: #ff003c;
	--blue: #136377;
	--green: #446d44;
	--purple: purple;
	--black: #000;
	--white: #fff;
	--dark: #333;

	--fg: var(--black);
	--bg: transparent;
	--ac: var(--black);

	--yellow-cyberpunk-font: #feef00;
	--cyan-cyberpunk-font1:#46dffb;
	--cyan-cyberpunk-font2:#45aefb;

	--banner-color1: var(--purple); 
	--banner-color2: var(--red);
	--banner-color3: var(--yellow); 
	--banner-color4: var(--cyan); 
	--banner-gradient-stop: 405px;

	--input-padding-top: 0px;
	--input-padding-bot: 0.2rem;
	--input-padding-left: 1rem;
	--input-padding-right: 2rem;
	--input-font-size: 1.2rem;
	--input-width: 240px;

	--checkbox-size: 28px;
	--checkbox-inner-size: 16px;

	--radio-size: 28px;
	--radio-inner-size: 16px;
}

::-webkit-scrollbar {
	width: 8px; 
	background: #ff5c5c;
	border: 0px;
	height: 200px;
}

::-webkit-scrollbar-thumb {
background: #ff003c;

}

::selection {
	color: rgb(124, 0, 0);
	background-color: #ff5c5c;
}

body {
	font-family: "Oxanium", serif;
	font-size: 20px;
	font-weight: 200;
	color: rgb(255, 92, 92);
	align-items: center;
	cursor: url("../..//assets/cursor.png"), auto;
	overflow: auto;
}

.cyber-h {
	display: block;
	width: 60%;
	color:#ff5c5c;
	-webkit-animation: entrance 400ms 1400ms linear backwards 1;
	animation: entrance 400ms 1400ms linear backwards 1;
}

.cyber-h::after {
	content: ' ';
	width: 70%;
	height: 6px;
	display: block;
	background-color: var(--red);
	clip-path: polygon(0 0, 0 100%, 10% 100%, calc(10% + 4px) 2px, 100% 2px, 100% 0);
	-webkit-animation: entrance 400ms 1400ms linear backwards 1;
	animation: entrance 400ms 1400ms linear backwards 1;
}

h1.cyber-h {
	font-size: 3.0rem;
	margin: 2.0rem 0;
	width: 100%;
}

h2.cyber-h {
	font-size: 2.5rem;
	margin: 1.6rem 0;
	width: 90%;
}

h3.cyber-h {
	font-size: 2rem;
	margin: 1.4rem 0;
	width: 80%;
}

h4.cyber-h {
	font-size: 1.5rem;
	margin: 1.2rem 0;
	width: 70%;
}

h5.cyber-h {
	font-size: 1.0rem;
	margin: 1.0rem 0;
	width: 60%;
}

h6.cyber-h {
	font-size: 1.0rem;
	margin: 1.0rem 0;
	font-weight: 400;
	width: 60%;
}

b {
	color: rgb(255, 255, 255);
	font-weight: lighter;
}
a {
	color: white;
	text-decoration: none;
}

@keyframes entrance {
	to,
	20%,
	40%,
	60%,
	80% {
		opacity: 1;
	}
	from,
	10%,
	30%,
	50%,
	70%,
	90% {
		opacity: 0;
	}
}