@import url("https://fonts.googleapis.com/css2?family=Rock+Salt:wght@300;700;900&display=swap");
 
html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-align: center;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #23010112;

	-webkit-font-smoothing: subpixel-antialiased;
	backface-visibility: hidden;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100vh; /* or set this to match your desired size */
    overflow: hidden;
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-bg {
	width: 100%;
    height: 100%;
    opacity: 0.75; /* Adjust the background video's opacity */
    z-index: 1;
}

.video-main {
    z-index: 2;
}

.video-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 100%;
	left: 100%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	 transform: translate(-50%, calc(-50% - .5px));
	background-size: 10px;
}

video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}


 a {
	text-decoration: none;
	color: rgb(233, 233, 233);
}


a:hover {
  -moz-transition: color 1s linear;
  -o-transition: color 1s linear;
  transition: color 1s linear;
  color: #350303;
}



#ico {
	position: fixed;
	top: 8%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#ico img {
	border-radius: 50%;
	filter: drop-shadow(2px 1px 4px rgb(58, 58, 58));
}

.typing {
	position: fixed;
	top: 20%;
	left: 50%;
	font-size: 99.9px;
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.social {
	font-size: 25px;
	position: fixed;
	top: 50%;
	left: 50%;
	 transform: translate(-50%, calc(-50% - .5px));
	background-size: cover;
	filter: opacity(100%) blur(2px);
	transition: 5s opacity;
	--ionicon-stroke-width: 16px;
}
.social2 {
	font-size: 25px;
	position: fixed;
	top: 88.8%;
	left: 47%;
	 transform: translate(-50%, calc(-50% - .5px));
	background-size: cover;
	filter: opacity(100%) blur(2px);
	transition: 5s opacity;
	--ionicon-stroke-width: 16px;
}
.social3 {
	font-size: 25px;
	position: fixed;
	top: 88.8%;
	left: 50%;
	 transform: translate(-50%, calc(-50% - .5px));
	background-size: cover;
	filter: opacity(100%) blur(2px);
	transition: 5s opacity;
	--ionicon-stroke-width: 16px;
}
.social4 {
	font-size: 25px;
	position: fixed;
	top: 88.8%;
	left: 53%;
	 transform: translate(-50%, calc(-50% - .5px));
	background-size: cover;
	filter: opacity(100%) blur(2px);
	transition: 5s opacity;
	--ionicon-stroke-width: 16px;
}