/* INDEX.HTML */
/* HERO NAME */
.name {
	font-size: calc(var(--font-size)*3.2);
	text-align: center;
}

#intro {
	/* display: grid;
	grid-template-rows: 1fr 3fr 1fr; */
	position: relative;
	text-align: center;
	padding: var(--padding);
	margin: var(--margin);
	margin-bottom: calc(var(--margin)*1.8);
}

#intro::before, #intro::after {
	content: '';
	position: absolute;
	border-color: var(--black);
	border-style: solid;
	width: 20px;
	height: 25px;
}

#intro::before {
	top: 0;
	left: 0;
	border-width: .5px 0 0 .5px;
}

#intro::after {
	top: 0;
	right: 0;
	border-width: .5px .5px 0 0;
}

.left-def {
	margin-left: var(--margin);
	text-align: left;
}

.right-def {
	justify-self: end;
	margin-right: calc(var(--margin)/2.5);
}

.crop-marks::before, .crop-marks::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 25px;
	border-color: var(--black);
	border-style: solid;
}

.crop-marks::before {
	bottom: 0;
	left: 0;
	border-width: 0 0 .5px .5px;
}

.crop-marks::after {
	bottom: 0;
	right: 0;
	border-width: 0 .5px .5px 0;
}

/* FLIP ANIMATION */
.wrapper {
	box-sizing: content-box;
	display: flex;
	align-items: end;
	height: 1rem;
	gap: 0.3rem;
	background-color: var(--white);
	margin-left: calc(var(--margin)*2.5);
}

.words {
	overflow: hidden;
	height: 1.2rem;
}

.flip {
	display: block;
	text-align: right;
	animation: spin_words 8s ease infinite;
}


@keyframes spin_words {
	0% {
		transform: translateY(0%);
	}

	20% {
		transform: translateY(-100%);
	}

	40% {
		transform: translateY(-200%);
	}

	60% {
		transform: translateY(-300%);
	}

	80% {
		transform: translateY(-400%);
	}

	100% {
		transform: translateY(-500%);
	}
}


/* TURNTABLE */
.player {
	display: flex;
	justify-content: center;
	align-items: center;
	height: fit-content;
	z-index: -1;
	transform: rotate(5deg);
	overflow: hidden;
	margin-top: calc(var(--margin)*1.2);
	margin-left: var(--margin);
	margin-right: var(--margin);
}

.turntable-container {
	position: relative;
	width: 17rem;
	overflow: hidden;
}

.turntable {
	width: 100%;
	height: auto;
}

.main-turn {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 75%;
	height: auto;
	transform: translate(-50%, -50%);
	animation: spin 5s linear infinite;
	margin-left: 2rem;
	margin-bottom: 3.6rem;
}

.vinyl {
	width: 100%;
	height: auto;
	border-radius: 50%;
	background-color: black;
}

.center-label {
	overflow: hidden;

}

.center-label::before {
	content: "";
	width: 35%;
	height: 35%;
	background: url("../assets/profile.jpg") center/cover no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-45%, -50%);
	overflow: hidden;
	border-radius: 50%;
}


@keyframes spin {
	from {
		transform: translate(-50%,-50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}


/* SUPERPOWER */
#super-power {
	background-color: var(--black);
	padding: calc(var(--padding)*2);
	margin-top: calc(var(--margin)*2);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(var(--gap)*1.7);
}

.super-power {
	position: relative;
	font-size: calc(var(--font-size)*1.2);
	color: var(--white);
	text-align: center;
	/* background: rgba(255, 255, 255, 0.526);
	box-shadow: 0 8px 32px 0 var(--transparent-white);
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur(40px); */
	border-radius: 10px;
	/* border: 1px solid rgba( 255, 255, 255, 0.18 ); */
	padding: var(--padding);
	line-height: calc(var(--lineheight)*2);
	border: solid 1px var(--white);

}

#super-wrapper {
	position: relative;
	margin: auto;
}


#super-wrapper::before, #super-wrapper::after {
	content: '';
	position: absolute;
	border-color: var(--white);
	border-style: solid;
	width: 20px;
	height: 25px;
}

#super-wrapper::before {
	top: 0;
	left: 0;
	border-width: .5px 0 0 .5px;
}

#super-wrapper::after {
	top: 0;
	right: 0;
	border-width: .5px .5px 0 0;
}

.dark-crops::before, .dark-crops::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 25px;
	border-color: var(--white);
	border-style: solid;
}

.dark-crops::before {
	bottom: 0;
	left: 0;
	border-width: 0 0 .5px .5px;
}

.dark-crops::after {
	bottom: 0;
	right: 0;
	border-width: 0 .5px .5px 0;
}

.circle {
	border: solid 1px var(--white);
	border-radius: calc(var(--border-radius)*2);
	padding: calc(var(--padding)/1.5);
	color: var(--white);
}

.cta {
	color: var(--white);
	text-align: center;
}





/* PROJECTS */
/* PRODUCT DESIGN */
.design-type {
	font-size: calc(var(--font-size)*1.3);
	border-radius: var(--border-radius);
	text-align: center;
	padding: calc(var(--padding)/1.8);
	margin-left: var(--margin);
	margin-right: var(--margin);
	margin-top: calc(var(--margin)*1.5);
	background-color: var(--black);
	color: var(--white);
}

.project {
	background-color: var(--transparent-white);
	display: flex;
	flex-direction: column;
	max-width: 20rem;
	margin: auto;
	align-items: center;
	margin-top: var(--margin);
	gap: 1rem;
	padding: var(--padding);
	border-radius: calc(var(--border-radius)*1.5);
	border: 1px solid var(--thin-shadow);
	/* box-shadow: 2px 4px 4px var(--shadow); */
	
}

.preview-desc {
	font-weight: 500;
}

.pre-cover {
	width: 70%;
	height: 80%;
}

.posty-cover {
	width: 50%;
}

.proj-preview {
	max-width: 15rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.proj-type {
	font-weight: 500;
	border: solid 1px var(--black);
	border-radius: var(--border-radius);
	padding: calc(var(--padding)/1.9);
	width: fit-content;
}

.proj-name {
	font-size: calc(var(--font-size)*1.2);
}

.mult-types {
	display: flex;
	gap: 0.5rem;
}

#spotify {
	width: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	mix-blend-mode: luminosity;
}

.enter, .big-turn {
	display: none;
}


@media (min-width: 800px) {

	/* HERO TEXT */
	.name {
		font-size: calc(var(--font-size)*5);
		width: fit-content;
		margin: auto;
	}
	
	.name-subtext {
		width: fit-content;
		font-size: calc(var(--font-size)*1.2);
	}

	.flip {
		font-size: calc(var(--font-size)*1.2);
	}

	.left-def {
		margin-left: calc(var(--margin)*4);
	}

	.wrapper {
		margin-left: calc(var(--margin)*10);
	}

	#intro {
		width: 35rem;
		margin: auto;
	}

	@keyframes spin_words {
		0% {
			transform: translateY(0%);
		}
	
		20% {
			transform: translateY(-120%);
		}
	
		40% {
			transform: translateY(-220%);
		}
	
		60% {
			transform: translateY(-320%);
		}
	
		80% {
			transform: translateY(-420%);
		}
	
		100% {
			transform: translateY(-520%);
		}

		
	}


	/* RECORD PLAYER */
	.turntable-container {
		width: 22rem;
	}


	/* SUPERPOWER */
	.super-power {
		max-width: 40rem;
		margin: auto;
		padding: calc(var(--padding)*2);
		font-size: calc(var(--font-size)*1.3);
	}


	/* PROJECTS */
	.design-type {
		max-width: 40rem;
		margin-left: auto;
		margin-right: auto;
	}

	.project-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gap);
		max-width: 40rem;
		margin: auto;
	}

	.project {
		max-width: 19rem;
	}
}


/* LAPTOP BREAKPOINT */
@media (min-width: 1200px) {
	main {
		margin-top: calc(var(--margin)*1.2);
	}

	/* HERO TEXT */
	.intro-flex {
		display: flex;
	}

	#intro::before {
		border-color: var(--black);
		border-width: 1px 0px 0px 1px;
	}

	.crop-marks::before {
		border-color: var(--black);
		border-width: 0 0 1px 1px;
	}


	#intro-container {
		display: flex;
		flex-direction: column;
		gap: calc(var(--gap)*2);
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rem;
		margin-left: auto;
		margin-right: auto;
	}

	.name {
		font-size: calc(var(--font-size)*10.5);
		min-width: 40rem;
		margin: auto;
	}

	
	.name-subtext {
		width: fit-content;
		font-size: calc(var(--font-size)*1.5);
	}

	.flip {
		font-size: calc(var(--font-size)*1.5);
	}

	.words {
		height: 1.5rem;
	}

	.left-def {
		margin-left: calc(var(--margin)*4);
	}

	.wrapper {
		margin-left: calc(var(--margin)*20);
		height: 2rem;
	}

	.enter {
		display: inline-block;
		font-size: calc(var(--font-size)*1.3);
		padding: var(--padding);
		border: solid 1px var(--black);
		border-radius: calc(var(--border-radius)/1.4);
		cursor: pointer;
	}

	.enter:hover {
		background-color: var(--black);
		color: var(--white);
	}

	#intro {
		width: 65rem;
		/* margin-bottom: calc(var(--margin)*2); */
		margin-top: calc(var(--margin)*4);
		padding: calc(var(--padding)*1.3);
		align-self: center;
	}


	@keyframes spin_words {
		0% {
			transform: translateY(0%);
		}
	
		20% {
			transform: translateY(-122%);
		}
	
		40% {
			transform: translateY(-222%);
		}
	
		60% {
			transform: translateY(-322%);
		}
	
		80% {
			transform: translateY(-422%);
		}
	
		100% {
			transform: translateY(-522%);
		}

		
	}


	/* RECORD PLAYER */
	/* .turntable-container {
		width: 25rem;
	}

	.big-turn {
		margin-left: 4rem;
		display: contents;
		position: absolute;
		top: 50%;
		left: 0%;
		width: 50%;
		height: auto;
		height: auto;
		transform: translate(-50%, -50%);
		animation: bigspin 5s linear infinite;
		margin-left: 2rem;
		margin-bottom: 3.6rem;
	}

	
	.big-vinyl {
		width: 100%;
		height: auto;
		border-radius: 50%;
		background-color: black;
	}
	
	.big-center-label {
		overflow: hidden;
	
	}
	
	.big-center-label::before {
		content: "";
		width: 35%;
		height: 35%;
		background: url("../assets/profile.jpg") center/cover no-repeat;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-45%, -50%);
		overflow: hidden;
		border-radius: 50%;
	}

	@keyframes bigspin {
		from {
			transform: translate(-50%,-50%) rotate(0deg);
		}
		to {
			transform: translate(-50%, -50%) rotate(360deg);
		}
	} */


	/* SUPERPOWER */


	#super-power {
		padding: calc(var(--padding)*3);
		background-color: var(--white);
		/* margin-top: calc(var(--margin)*3.5); */
	}

	.super-power {
		max-width: 40rem;
		margin: auto;
		padding: calc(var(--padding)*2);
		font-size: calc(var(--font-size)*1.6);
		background: none;
		box-shadow: none;
		border: none;
		color: var(--black);
	}

	#super-wrapper::before, #super-wrapper::after {
		border-color: var(--black);
	}

	.dark-crops::before, .dark-crops::after {
		border-color: var(--black);
	}

	.circle {
		border: solid 1px var(--black);
		border-radius: calc(var(--border-radius)*2);
		padding: calc(var(--padding)/1.5);
		color: var(--black);
	}

	.cta {
		color: var(--black);
		text-align: center;
	}

	.super-turn {
		width: 65rem;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		/* margin-top: 20rem; */
	}

	.player {
		transform: rotate(0);
	}


	/* PROJECTS */
	.header-name {
		display: flex;
		max-width: 65rem;
		margin-left: auto;
		margin-right: auto;
		gap: var(--gap);
		justify-content: center;
		align-items: center;
		margin-bottom: var(--margin);
	}

	.gray-line {
		width: 100%;
		height: 1px;
		border: none;
		padding: 0;
		background-color: var(--shadow);
	}

	.design-type {
		width: 40rem;
		margin-top: 0;
		background: var(--thin-shadow);
		border: 1px solid var(--shadow);
		font-size: calc(var(--font-size)*1.6);
		border-radius: calc(var(--border-radius)*5);
		color: var(--shadow);
	}

	.project-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(var(--gap)*2);
		justify-content: space-between;
		max-width: 65rem;
		margin: auto;
	}

	.project {
		max-width: 29rem;
		height: 20rem;
		
		img {
			object-fit: cover;
			align-self: center;
			width: 60%;
			margin-top: calc(var(--margin)*1.2);
		}
	}

	.project:hover {
		background-color: var(--black);
		transition: 0.5s ease-in;

		img {
			display: none;
		}
	}

	.proj-preview {
		display: none;
	}

	.project:hover .proj-preview {
		display: block;
		max-width: 29rem;
		gap: calc(var(--gap)*2);
		height: 20rem;
		margin: auto;
		padding: calc(var(--padding)*2);
	}

	.project:hover .proj-preview .proj-type,
	.project:hover .proj-preview .proj-name,
	.project:hover .proj-preview .preview-desc {
		color: var(--white);
	}

	.project:hover .proj-preview .proj-type {
		border: 1px solid var(--white);
	}

	.project:hover .proj-preview .proj-type {
		font-size: calc(var(--font-size)*1.3);
	}

	.project:hover .proj-preview .proj-name {
		font-size: calc(var(--font-size)*1.6);
		padding-top: var(--padding);
		padding-bottom: var(--padding);
	}

	.project:hover .proj-preview .preview-desc {
		font-size: calc(var(--font-size)*1.3);
	}

	#product-design, #visual-design {
		margin-top: calc(var(--margin)*3.5);
	}

}