/* Variables */
:root {
	--primary-color: #36013F;
	--github-color: #000000;
	--discord-color: #7289da;		/* Unused because bad contrast */
	--discord-color-hc: #314fb9;	/* High contrast */
	--rose-color: #ff9be0;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
	user-select: none;
	overflow: hidden;
}
a {
	color: var(--primary-color);
}
button {
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 10px 20px;
	flex-wrap: wrap;
	font-weight: bold;
	color: white;
	fill: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.5s, color 0.5s;
}
button:hover {
	position: relative;
	background: white !important;
	color: black !important;
	fill: black !important;
	margin: -1px;
	border: 1px solid black;
}
button svg {
	width: 16px;
	height: 16px;
}
button svg path {
	transition: fill 0.5s;
}
hr {
	width: 100%;
}
footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #000;
	color: #f2f2f2;
	text-align: center;
	z-index: 10;
}
footer a {
	color: #f2f2f2;
}
nav a {
	cursor: pointer;
}
h1 {
	font-size: 1.5rem;
}
h2 {
	font-size: 1.25rem;
}
h3 {
	font-size: 1rem;
}

#disclaimer, #recaptcha-disclaimer {
	position: fixed;
	width: 100%;
	bottom: 3rem;
	background: rgba(0, 0, 0, 0.8);
	padding: 16px;
	color: white;
}
#disclaimer a, #recaptcha-disclaimer a {
	color: white;
}
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Colors */
.background-primary {
	background: var(--primary-color) !important;
	background-color: var(--primary-color) !important;
}
.background-github {
	background: var(--github-color) !important;
	background-color: var(--github-color) !important;
}
.background-discord {
	background: var(--discord-color-hc) !important;
	background-color: var(--discord-color-hc) !important;
}
.background-rose {
	background: var(--rose-color) !important;
	background-color: var(--rose-color) !important;
}
.color-primary {
	color: var(--primary-color) !important;
}
.color-github {
	color: var(--github-color) !important;
}
.color-discord {
	color: var(--discord-color-hc) !important;
}
.color-rose {
	color: var(--rose-color) !important;
}

.button {
	display: inline-block;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: bold;
	color: white;
	background: linear-gradient(45deg, #FF416C, #FF4B2B); /* Gradient background */
	border: none;
	border-radius: 30px; /* Rounded corners */
	box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.3s, box-shadow 0.3s; /* Smooth transitions */
}
.button:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Slightly larger shadow on hover */
}
.button:active {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Smaller shadow on click */
	transform: translateY(2px); /* Slightly move down on click */
}
#browser {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}
#huge-coffee {
	font-size: 40vh;
	opacity: 0;
	transition: opacity 1s ease-in;
}

/* Size adjustment for smaller screens */
@media (max-width: 768px) {
	.navbar-item {
		float: none;
		display: block;
		text-align: center;
	}
}

/* Containers */
.container {
	position: fixed;
	top: 10%;
	border-radius: 10px;
	padding: 3rem;
	margin: 2rem auto;
	max-width: 60%;
	max-height: 60%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}
.columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
	grid-auto-flow: column;
	gap: 10px;
}
#landing {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Navbar items */
nav {
	display: block;
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	top: 0;
	z-index: 10;
}
.opaque {
	background: rgba(0, 0, 0, 1) !important;
}
.navbar-item {
	display: inline-block;
	padding: 10px 20px;
	text-decoration: none;
	color: #f2f2f2;
	transition: background-color 0.3s, color 0.3s;
}
.navbar-item:hover {
	background-color: #ddd;
	color: #000;
}
nav a:hover {
	background-color: #ddd;
	color: black;
}
nav a.active {
	background-color: #232338;
	color: white;
}

/* Profile picture */
.profile-container {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
.profile-picture-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.profile-picture {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover; /* Ensure the image covers the entire area without distortion */
}
.profile-text {
	margin-top: 10px;
	text-align: center;
}

/* Page contents */
#star-canvas {
	position: absolute;
	left: 0;
	top: 0px;
	z-index: -1;
}

/* Contact */
#contact form textarea {
	width: 50vw;
	height: 20vh;
	padding: 10px;
	border: none;
	background: white;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
#contact form button {
	background: #1D9BF0;
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	transition: background 0.3s;
}
#contact form button:hover {
	background: #0F7AD8;
}

/* Utility */
.vertical-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.half-screen {
	display: flex;
	columns: 2;
	column-gap: 10px;
}
.emphasis-color {
	color: #A95E47;
	font-weight: bold;
}
.text-fancy {
	background-size: 3000% 3000%;
	background-image: linear-gradient(
		-45deg,
		rgb(138, 36, 153) 0%,
		rgb(100, 27, 124) 25%,
		rgb(71, 36, 132) 51%,
		rgb(43, 22, 105) 100%
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: text-fancy 10s ease infinite;
}
.text-box {
	margin: 1em;
}
.text-fancy-light {
	background-size: 3000% 3000%;
	background-image: linear-gradient(
		-45deg,
		rgb(211, 173, 216) 0%,
		rgb(209, 39, 90) 25%,
		rgb(116, 63, 206) 51%,
		rgb(160, 52, 187) 100%
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: text-fancy 10s ease infinite;
}
.text-style-clear {
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}
.text-white {
	color: white;
}
.text-gray {
	color: gray;
}
.text-red {
	color: red;
}
.background-white {
	background-color: rgba(255, 255, 255, 0.9);
}
.text-fancy {
	background-size: 3000% 3000%;
	background-image: linear-gradient(
		-45deg,
		rgb(138, 36, 153) 0%,
		rgb(100, 27, 124) 25%,
		rgb(71, 36, 132) 50%,
		rgb(43, 22, 105) 100%
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: text-fancy 10s ease infinite alternate;
}
.background-fancy {
	animation: background-fancy 10s ease infinite alternate;
}
.text-fancy-light {
	background-size: 3000% 3000%;
	background-image: linear-gradient(
		-45deg,
		rgb(139, 0, 0) 0%,     /* Dark Red */
		rgb(178, 34, 34) 25%,  /* Firebrick */
		rgb(34, 139, 34) 50%,  /* Forest Green */
		rgb(0, 100, 0) 100%    /* Dark Green */
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: text-fancy 10s ease infinite alternate;
}
.text-box {
	margin: 1em 0;
	line-height: 1.6;
	text-align: justify;
}
.code {
	overflow: hidden; /* Ensures the content is not revealed until the animation */
	border-right: .15em solid orange; /* The typwriter cursor */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	letter-spacing: .15em; /* Adjust as needed */
	animation:
		typing 3.5s steps(40, end),
		blink-caret .75s step-end infinite;
}

@keyframes typing {
	from { width: 0 }
	to { width: 100% }
}
@keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: orange; }
}
@keyframes text-fancy {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:50% 0%}
}
@keyframes background-fancy {
	0%{background: rgb(138, 36, 153)}
	25%{background: rgb(100, 27, 124)}
	50%{background: rgb(71, 36, 132)}
	100%{background: rgb(43, 22, 105)}
}
@keyframes play-up-in {
	from { top: 100%; }
	to { top: 10%; }
}
@keyframes play-up-out {
	from { top: 10%; }
	to { top: -100%; }
}
@keyframes play-down-in {
	from { top: -100%; }
	to { top: 10%; }
}
@keyframes play-down-out {
	from { top: 10%; }
	to { top: 100%; }
}
.is-below {
	top: 100%;
}
.is-above {
	top: -100%;
}
.is-fullwidth {
	min-width: 100%
}