html {
	overflow-x: hidden;
}

body {
	font-family: "Roboto Condensed", sans-serif;
	margin: 0;
	background-color: #000000;
}

a {
	text-decoration: none;
}

.roboto {
	font-family: "Roboto Condensed", sans-serif;
}

.protest-riot {
	font-family: "Protest Riot", sans-serif;
}

.card {
	z-index: 1;
	position: relative;
	width: calc(100% - 2rem);
	max-width: 300px;
	height: auto;
	margin: 0 auto;
	margin-top: 25vh;
	background-color: #FFFFFF;
	background: linear-gradient(45deg, #E6E6E6, #FFFFFF 40%);
	transition: all 0.7s ease-in-out;
	border-radius: 1rem;
	filter: drop-shadow(0 0 1rem rgba(3, 50, 178, 0.25));
}

.card ul {
	list-style: none;
	text-align: center;
	padding-left: 0;
	margin-top: -4rem;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	transition: all 0.7s ease-in-out;
}

.card ul.active {
	opacity: 0;
	visibility: hidden;
}

/* .photo {
	z-index: 3;
	position: relative;
	border: .25rem solid #FFFFFF;
	border-radius: 50%;
	padding-top: 50%;
	width: 50%;
	background-color: #FFFFFF;
	margin: 0 auto;
	background-image: url("../img/profile.jpg");
	background-size: cover;
	background-position: 50% 50%;
	top: -3rem;
	transition: top 0.7s ease-in-out, background 0.15s ease;
} */
.photo {
	z-index: 3;
	position: relative;
	padding-top: calc(50% + 5rem);
	width: 100%;
	margin: 0 auto;
	background-image: url("../img/surfing-the-net.png");
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	top: -5rem;
	transition: top 0.7s ease-in-out, background 0.15s ease;
}

.title {
	text-align: center;
	margin-top: -5rem;
	margin-bottom: -1rem;
}

.title img {
	width: 100%;
	max-width: 200px;
}

.toolbox {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 1rem;
	text-align: center;
	z-index: 999999;
}

.toolbox img {
	height: 1rem;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.toolbox img:hover {
	opacity: 1;
}

.strolls {
	position: absolute;
	top: 3rem;
	left: 1rem;
	width: 1rem;
	text-align: center;
	z-index: 999999;
}

.strolls img {
	height: 1rem;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.strolls img:hover {
	opacity: 1;
}

.social-media-banner {
	width: 100%;
	height: auto;
	margin-top: 1rem;
	padding-bottom: 1rem;
	text-align: center;
	transition: all 1.5s ease-in-out;
}

.social-media-banner a i {
	font-size: 1.4rem;
	text-align: left;
	color: rgba(41, 43, 61, 0.5);
	display: inline;
	width: auto;
	margin-right: 1rem;
	margin-left: 1rem;
	transition: all 0.3s ease-in-out;
}

.social-media-banner a i:hover {
	color: rgba(41, 43, 61, 0.75);
}

.social-media-banner.active {
	opacity: 0;
	visibility: hidden;
	transition: all 0.1s ease-in-out;
}

/* Add styles for the matrix code rain container */
.matrix-rain {
	position: fixed;
	top: -50%;
	left: 0;
	width: 100%;
	height: 200%;
	overflow: hidden;
	background: linear-gradient(to top, #0332b2, #02a1dc);
	z-index: -1;
	pointer-events: none;
}

/* Add styles for the matrix code characters */
.code {
	font-size: 1rem;
	font-family: 'Courier New', monospace;
	position: absolute;
	color: #57fefb;
	white-space: nowrap;
	top: calc(100vh * var(--random-y));
	left: calc(100% * var(--random-x));
	animation: matrix-fall linear;
	will-change: transform, opacity;
}

.code:nth-of-type(odd) {
	color: #fed9f0;
	text-shadow: 0 0 5em #fed9f0, 0 0 1em #fed9f0;
}

.code:nth-of-type(even) {
	color: #feefb7;
	text-shadow: 0 0 5em #feefb7, 0 0 1em #feefb7;
}

.code.emoji {
	text-shadow: none;
}

/* Define animation for matrix code falling */
@keyframes matrix-fall {
	0% {
		transform: translateY(0);
		opacity: .5;
	}

	100% {
		transform: translateY(100vh);
		opacity: 0;
	}
}

/* Floating magic icon styles */
.floating-magic {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 1000;
	animation: magic-float 1s infinite linear;
}

.floating-magic i {
	font-size: 2rem;
	color: #ffffff;
	color: #00f;
	opacity: .05;
	cursor: pointer;
	transition: all 0.2s ease;
}

.floating-magic i:hover {
	opacity: .25;
}

.floating-magic i.magic {
	color: #f00;
}

@keyframes magic-float {

	0%,
	100% {
		transform: translateY(0) rotate(0);
	}

	25% {
		transform: translateY(-0.05em) rotate(-5deg);
	}

	50% {
		transform: translateY(-0.1em) rotate(0deg);
	}

	75% {
		transform: translateY(-0.05em) rotate(5deg);
	}
}