@property --bgw {
	syntax: "<length>";
	inherits: false;
	initial-value: 0;
}
@property --bg1 {
	syntax: "<length>";
	inherits: true;
	initial-value: 10vw;
}
@property --bg2 {
	syntax: "<length>";
	inherits: true;
	initial-value: 20vw;
}
@property --bg3 {
	syntax: "<length>";
	inherits: true;
	initial-value: 30vw;
}
:root {
	--gradient-color-1: #1D20E2;
	--gradient-color-3: #DF1DE2;
	--gradient-color-2: #7D1DE2;

	--red: #cf003b;
	/* --red: #A3221A; */
	/* --red: #7A0637; */
	--orange: #ff3700;
	/* --orange: #E05536; */
	--yellow: #E0CA3C;
	/* --green: #136F63; */
	--green: #499D8F;
	--green: #508FAC;
	--amethyst: #3E2F5B;
	--black: #000F08;
	--blue: #0267C1;
	--blue: #47c5ff;
	--other-blue: #13C2F3;
	--other-other-blue:#3C52E0;
	--teal: #05FFD1;
	/* --bgw: 10vw; */
}

* {
	padding: 0;
	margin: 0;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	/* box-sizing: border-box; */
}
body:not(.animate) * {
	animation-name: none !important;
}
a:any-link {
	color: white;
}
a:any-link:hover {
	color: var(--gradient-color-2);
}

.overlay {
	height: 100vh;
	width: var(--bgw);
	z-index: 5;
	background-color: black;
	animation-name: slideInGradient, noBorder;
	animation-duration: 500ms, 150ms;
	animation-delay: 250ms, 750ms;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 
	position: absolute;
	left:0;
	top:0;
}

.animate .overlay {
	border-right: 8px solid white;	
}
.wrapper {
	--default-background-width: 75px;
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media only screen and (min-width: 600px) {

}
.wrapper.background {
	animation-name: slideInGradient;
	animation-duration: 500ms;
	animation-delay: 600ms;
	animation-fill-mode: both;
	--bg4: 40vw;
	background: repeating-linear-gradient(
		90deg,
		var(--red), var(--red) var(--bg1)
		/* ,var(--green) var(--bg1), var(--green) var(--bg2) */
		,var(--orange) var(--bg1), var(--orange) var(--bg2)
		,var(--blue) var(--bg2), var(--blue) var(--bg3)

	);
}

@keyframes slideInGradient {
	from {
		--bgw: 100vw;
		--bg1: 100vw;
		--bg2: 30vw;
		--bg3: 100%;
	}
}
@keyframes noBorder{
	to {
		border-width: 0;
	}
}
@keyframes shadowAppear{
	from {
		box-shadow: none;
	}
}

.content {
	background-color: black;
	
	
	/* height: 50vh; */
	/* width: 40vw; */
	width: max-content;
	font-size: clamp(2rem, 2vw, 7rem);
	color: white;
	padding: 4rem;
	border: 8px solid white;
	border-radius: 25px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	
	animation-name: shadowAppear;
	animation-duration: 200ms;
	animation-delay: 500ms;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow: 
		black 8px 8px,
		white 10px 10px,
		var(--red) 16px 16px,
		white 18px 18px,
		black 24px 24px
		
		;
	
	/* box-shadow: rgb(244, 71, 8) 5px 5px 5px 3px;  */
}