:root {
	color-scheme: light dark;
}

@font-face {
	font-family: 'DynaPuff';
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url(fonts/dynapuff-latin-ex.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'DynaPuff';
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url(fonts/dynapuff-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	src: url(fonts/oswald.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	color: light-dark(#ffffff, #f2f2f2);
	background-color: light-dark(#3399ff, #161b1c);
	font-family: DynaPuff, Oswald, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1 {
	font-size: 40px;
	text-align: center;
	text-shadow: 2px 2px 4px #000000;
	animation: focus-in-expand-top 1s linear 0s 1 normal none;
}

h1:hover {
	animation: focus-in-expand-top 1s linear 0s infinite alternate-reverse none;
}

@keyframes focus-in-expand-top {
	0% {
		letter-spacing:-.5em;
		transform:translateY(-300px);
		filter:blur(12px);
		opacity:0;
	}
	0% {
		transform:translateY(0);
		filter:blur(0);
		opacity:1;
	}
}

@keyframes shake-center {
	0% {
		transform:rotate(0deg);
		transform-origin:50% 50%;
	}
	10% {
		transform:rotate(8deg);
	}
	20% {
		transform:rotate(-10deg);
	}
	30% {
		transform:rotate(10deg);
	}
	40% {
		transform:rotate(-10deg);
	}
	50% {
		transform:rotate(10deg);
	}
	60% {
		transform:rotate(-10deg);
	}
	70% {
		transform:rotate(10deg);
	}
	80% {
		transform:rotate(-8deg);
	}
	90% {
		transform:rotate(8deg);
	}
	100% {
		transform:rotate(0deg);
		transform-origin:50% 50%;
	}
}
	
p {
	text-align: center;
}

img {
	margin: 10px;
}

img:hover {
	scale: 1.5;
}
	
.an1 {
	animation: shake-center 1s linear 2s 1 normal none;
}

.an2 {
	animation: shake-center 1s linear 4s 1 normal none;
}

.an3 {
	animation: shake-center 1s linear 6s 1 normal none;
}

.an4 {
	animation: shake-center 1s linear 8s 1 normal none;
}

.tiktok {
	animation: shake-center 1s linear 10s 1 normal none;
}

.an6 {
	animation: shake-center 1s linear 12s 1 normal none;
}

@media (prefers-color-scheme: light) {
	img {
		background-color: #ffffff;
		border-radius: 20px;
		margin: 10px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

@media (min-width: 800px) {
	.breakup {
		display: none;
	}
}

@media (max-width: 800px) {
	h1 {
		font-size: 30px;
	}
}
		
@media (prefers-color-scheme: dark) {
	img {
		filter: brightness(.8) contrast(1.2);
	}
	.tiktok {
		filter: invert(100%);
	}
}