@charset "utf-8";
/* CSS Document */

:root {
	/* Color Variables */
	--text-light-1: #FAFAFA;
	--text-dark-1: #191919;
	--dark-1: #191919;
	--light-1: #FAFAFA;
}

a {
	text-decoration: none;
	text-decoration-color: none;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: 0.2s ease-in-out;
	font-family: 'Work Sans';
	font-weight: 500;
	background-color: var(--light-1);
	cursor: none;
}

.content {
	height: 100vh;
/*	background-color: teal;*/
	display: flex;
	flex-direction: column;
}

h1 {
	font-family: "Outfit";
	display: flex;
	justify-content: center;
	align-content: center;
	font-weight: 300;
	height: 100px;
	font-size: 4vw;
	padding: 20px;
	padding-left: 30px;
	
	position: fixed;
	margin: auto;
		}
		
.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	flex-grow: 1;
	grid-template-rows: auto;
	
}

.option {

	display: grid;
}

.eng {
	
	font-style: italic;
	font-size: 3vw;
	
	display: grid;
	justify-content: right;
	
	padding-top: 42vh;
	padding-right: 3vw;
	
	color: var(--text-light-1);
	background-color: var(--light-1);
}

.eng .highlight {
	font-weight: 700;
	text-transform: Uppercase;
	
	background-color: var(--dark-1);
	height: 1.3em;
	padding: 0px 9px 0px 7px;
}

.creative {
	font-style: italic;
	font-size: 3vw;
	
	display: grid;
	justify-content: left;
	
	padding-top: 48vh;
	padding-left: 3vw;
	
	color: var(--text-dark-1);
	background-color: var(--dark-1);
}

.creative .highlight {
	font-weight: 700;
	text-transform: Uppercase;
	
	background-color: var(--light-1);
	height: 1.3em;
	padding: 0px 9px 0px 7px;
}

.eng:hover {
	font-size: 4vw;
}

.eng:hover .highlight {
	animation: floaty 3s ease-in-out infinite;
}

.creative:hover {
	font-size: 4vw;
}

.creative:hover .highlight {
	animation: floaty 3s ease-in-out infinite;
}

@keyframes floaty {
  0%, 100% {
    transform: translateY(0); /* Initial position */
  }
  50% {
    transform: translateY(-7px); /* Move up by __px */
  }
}

@media(max-width: 650px) {
	.content {

	}
	
	h1 {
		position: static;
		font-size: 7vw;
		border-bottom: 2px solid ;
		border-image: linear-gradient(to right, rgba(0,0,0,0) 0%, var(--dark-1) 10%, var(--dark-1) 90%, rgba(0,0,0,0) 100%) 1;
		width: 100%;
		height: 25%;
		padding: 0;
		display: grid;
	}
	
	.grid {
		grid-template-columns: 1fr;
	}
	
	.eng {
		padding: 40px;
		justify-content: center;
		align-content: center;
		font-size: 7vw;
	}
	
	.creative {
		padding: 40px;
		justify-content: center;
		align-content: center;
		font-size: 7vw;
	}
	
	.eng:hover {
		font-size: 8vw;
	}
	
	.creative:hover {
		font-size: 8vw;
	}
	
	* {
		cursor: default;
	}
	
	.custom-cursor {
		display: none;
	}
}


.custom-cursor {
    width: 30px;
    height: 30px;
    background-color: #FFFFFF;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Ensure the cursor is on top of other elements */
	transition: 0s linear;
	mix-blend-mode:exclusion;
}