@import url('./loading-magic.css');
@import url('./cat-magic.css');
@import url('https://fonts.googleapis.com/css2?family=Rubik');

.noSelect {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.noSelect:focus {
	outline: none !important;
}

body,
html {
	margin: 0;
	padding: 0;
	font-family: 'Rubik', sans-serif;
	color: white;
	background: #141414;
}

body {
	display: grid;
	place-items: center;
	grid-template-rows: 3fr 4fr 2fr;
	width: 100vw;
	text-align: center;
	height: 100vh;
}

h1 {
	font-size: 46px;
}

a {
	color: #608cfb;
	text-decoration: none;
}
a:hover {
	color: #4173f1;
}

.magic {
	width: 38vmin;
	position: relative;
	height: 48vmin;
	background-image: linear-gradient(to bottom, #e453bb, #f43b5c);
	cursor: pointer;
	border-radius: 8px;
	transition: 0.2s all;
}

.magic::before {
	content: '';
	position: absolute;
	margin: 6vmin 3vmin;
	inset: 0;
	width: 1vmin;
	aspect-ratio: 1;
	animation: magicLoadingAnimation 1s steps(1, start);
	animation-direction: normal;
	animation-iteration-count: infinite;
}

@media (hover: hover) {
	.magic:hover::before {
		animation: magicCatAnimation 1s steps(1, start);
		animation-direction: normal;
		animation-iteration-count: infinite;
	}

	.magic:hover {
		box-shadow: inset 0 0 2vmin black;
	}
}

@media (hover: none) {
	.magic:active::before {
		animation: magicCatAnimation 1s steps(1, start);
		animation-direction: normal;
		animation-iteration-count: infinite;
	}

	.magic:active {
		box-shadow: inset 0 0 2vmin black;
	}
}