@import url("https://use.typekit.net/eia7dfc.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap");

:root {
	--white: #fff;
	--black: #000;
	--blue: #0192cc;
	--mustard: #ffae00;
	--blue-button: #0192cc70;
	--mustard-button: #ffae0071;
	--github-fill: var(--white);
	--github-color: var(--blue);
	--github-focus: var(--black);
	--poppins: "Poppins", sans-serif;
	--futura: futura-pt, sans-serif;
	--hover-transform: translate(-50%, -50%);
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--poppins);
	color: var(--white);
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
}

.content {
	position: relative;
	width: 100%;
	height: 100%;
}

.split {
	position: absolute;
	width: 50%;
	height: 100%;
	transition: 1s all cubic-bezier(0.87, 0.76, 0.33, 0.98);
	overflow: hidden;
}

.split.left {
	left: 0;
	background: var(--mustard);
}

/* #ffbb00; */
.split.right {
	right: 0;
	background: var(--blue);
}

.hover-left .split.left,
.hover-right .split.right {
	width: 62%;
}

.hover-left .split.right,
.hover-right .split.left {
	width: 38%;
}

.cat {
	width: 93%;
	position: absolute;
	top: 52%;
	left: 50%;
}

.dog {
	width: 72%;
	position: absolute;
	top: 50%;
	left: 50%;
}

.text {
	position: absolute;
	top: 50.5%;
	left: 50%;
	white-space: nowrap;
	transition: all 1s cubic-bezier(0.87, 0.76, 0.33, 0.98);
}

.text .subtitle,
.text .button {
	font-family: var(--poppins);
}

.text .subtitle {
	font-size: 1.75vw;
	font-weight: 600;
	letter-spacing: 2px;
	letter-spacing: 1px;
}

.text .title {
	font-size: 4.5vw;
	text-transform: uppercase;
	font-family: var(--futura);
	font-weight: 800;
	font-style: normal;
	overflow: hidden;
	line-height: 1;
	letter-spacing: 5px;
	margin-top: 2px;
}

.text .button {
	margin-top: 15px;
	font-size: 1.35vw;
	display: block;
	position: absolute;
	background: transparent;
	border: var(--white) solid 3px;
	height: 3.25rem;
	text-align: center;
	font-weight: 600;
	width: 70%;
	letter-spacing: 1px;
	cursor: pointer;
	outline: none;
	border-radius: 100px;
}

.text .subtitle,
.text .title,
.text .button {
	color: var(--white);
}

#left-button {
	background: var(--mustard-button);
}

#right-button {
	background: var(--blue-button);
}

#left-button:focus,
#left-button:hover,
#left-button:active,
#right-button:focus,
#right-button:hover,
#right-button:active {
	background-color: var(--blue);
}

#left-button:active,
#right-button:active {
	transform: translateY(6px);
}

.cat,
.dog,
.text,
.hover-left .split.left .text,
.hover-left .split.right .text,
.hover-right .split.right .text,
.hover-right .split.left .text {
	transform: var(--hover-transform);
}

.github-corner:focus svg path {
	fill: var(--github-focus);
}

.github-corner:focus .octo-arm,
.github-corner:focus .octo-body {
	fill: var(--github-color);
}

.github-corner:hover .octo-arm,
.github-corner:focus .octo-arm {
	animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
	0%,
	100% {
		transform: rotate(0);
	}
	20%,
	60% {
		transform: rotate(-25deg);
	}
	40%,
	80% {
		transform: rotate(10deg);
	}
}

@media (max-width: 500px) {
	.github-corner:hover .octo-arm {
		animation: none;
	}
	.github-corner .octo-arm {
		animation: octocat-wave 560ms ease-in-out;
	}
}

@media screen and (max-width: 500px) {
	.text .subtitle {
		font-size: 12px;
	}

	.text .button {
		margin-top: 15px;
		font-size: 12px;
		padding: 3px 2px;
		height: 3rem;
		width: 100%;
		font-weight: 500;
		letter-spacing: 0.75px;
		overflow: hidden;
		overflow-wrap: break-word;
	}
}