style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@property --banner-color {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--color-light: hsl(220, 80%, 90%);
	--color-dark: hsl(220, 80%, 10%);
	--color-primary: hsl(220, 80%, 50%);
	--color-secondary: hsl(220, 80%, 30%);
	--color-tertiary: hsl(220, 80%, 70%);
	--color-background: hsl(220, 30%, 10%);
	--color-header: hsl(220, 50%, 30%);
	--color-header-hover: hsl(220, 50%, 20%);
	--color-error: hsl(0, 80%, 70%);

	scroll-behavior: smooth;
}

html,
body {
	height: 100%;
	margin: 0;
	font-family: "Lato", sans-serif;
	color: var(--color-light);
	background-color: var(--color-background);
	display: flex;
	flex-direction: column;
}

header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	background-color: var(--color-header);
}

header .logo {
	height: 100%;
	width: 100%;
}

.pages {
	height: 3rem;
}

.pages ul {
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	padding: 0;
	margin: 0;
	height: 100%;
}

.pages .icon {
	display: flex;
	gap: 1ch;
}

.pages a {
	display: flex;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--color-light);
	transition: 250ms ease-in-out;
	height: 100%;
	padding-inline: 1rem;
}

.pages a:hover,
.pages a:focus {
	background-color: var(--color-header-hover);
}

.pages:first-child li:first-child a {
	padding-left: 0;
}

.pages [data-page="profile"] {
	display: none;
}

.pages [data-page="profile"] img {
	object-fit: cover;
	height: 100%;
	padding-block: 0.5ch;
	vertical-align: middle;
	border-radius: 50%;
}

#hero {
	position: relative;
	height: 80vh;
	margin-bottom: 20vh;
}

#hero h1,
#hero h2 {
	z-index: 1;
	position: absolute;
	margin: 0;
	text-align: center;
	color: var(--color-light);
}

#hero h1 {
	box-sizing: border-box;
	inset: 10vmin 0 auto 0;
	font-size: min(7vmin, 5rem);
	width: fit-content;
	margin: auto;
	padding: 1rem;
}

#hero .caption {
	box-sizing: border-box;
	inset: auto 1rem 15vmin 1rem;
	width: fit-content;
	margin: auto;
	padding: 1ch;
	font-size: min(5vmin, 2rem);
	background: linear-gradient(to right, transparent, var(--banner-color), transparent);
	filter: drop-shadow(0 0 10px black);
	animation: cubic-bezier(0.445, 0.05, 0.55, 0.95) 3s infinite pulse;
}

#hero #cta {
	box-sizing: border-box;
	z-index: 1;
	position: absolute;
	inset: auto 1rem 0 1rem;
	width: fit-content;
	margin: auto;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	font-size: min(6vmin, 2rem);
	text-align: center;
	text-decoration: none;
	background-color: var(--color-primary);
	color: var(--color-light);
	cursor: pointer;
	transition: 250ms ease-in-out;
}

#hero #cta:hover,
#hero #cta:focus {
	background-color: var(--color-secondary);
}

#hero canvas {
	z-index: -1;
	max-width: 100%;
	-webkit-mask-image: linear-gradient(to bottom, var(--color-background) 75%, transparent);
	mask-image: linear-gradient(to bottom, var(--color-background) 75%, transparent);
	touch-action: none;
}

.container {
	height: 90vh;
	display: grid;
	margin: 10rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.left {
	width: 50%;
	height: 100%;
	background: url(https://images.unsplash.com/photo-1542662565-7e4b66bae529?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80)
		no-repeat center / cover;
	border-radius: 1ch;
}

.right-1 {
	width: 50%;
	min-height: 25rem;
	background-color: var(--color-header);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border-radius: 1ch;
	color: var(--color-light);
	margin-left: -10rem;
}

.right-2 {
	position: relative;
	width: 50%;
	min-height: 25rem;
	background-color: var(--color-header);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border-radius: 1ch;
	color: var(--color-light);
	margin-right: -10rem;
}

.right h1 {
	font-size: 2.5rem;
	font-weight: lighter;
}

.right p {
	margin: 1rem 0;
	font-weight: 500;
	line-height: 2;
}

.left-1 {
	background: url(https://i.ibb.co/MBQYBg4/Frame-1-9.png) no-repeat center;
}

.left-2 {
	background: url(https://www.linkpicture.com/q/Frame-1-7.png) no-repeat center / cover;
}

.left-3 {
	background: url(https://drive.google.com/file/d/1iRvsdekBSaHvMaukklbWU0f74q3zw3Un/view?usp=share_link)
		no-repeatcenter / cover;
}

footer {
	padding: 1ch;
	font-size: 0.8em;
	padding: 1rem;
	background: var(--color-dark);
	color: var(--color-light);
	text-align: center;
}

.socials {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	gap: 1rem;
}

footer p {
	margin: 0;
}

footer a {
	color: inherit;
}

@media screen and (max-width: 455px) {
	header {
		justify-content: center;
	}
}

@media only screen and (max-width: 768px) {
	.container {
		flex-direction: column;
		width: calc(100% - 2rem);
		margin: 10rem 1rem;
	}
	.left {
		width: 100%;
		height: 25rem;
	}
	.right-1 {
		width: 90%;
		margin: -6rem 0 0;
	}
	.right-2 {
		width: 90%;
		margin: 0 0 -6rem;
	}
}

@keyframes pulse {
	50% {
		--banner-color: var(--color-primary);
	}
}