@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');

body,h1,h2,h3,h4,h5,h6 {font-family: "Syne Mono", sans-serif;}

body, html{
	height:100%;
	color: #f2f2f2;
	background-color: #333333;
	background-image: url("./images/ytbannernoxin.png");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

p {
	font-size:1em;
}

.wh100 {
	height:100%;
	width:100%;
}
p {
	font-size: 1.5rem
}
/* Side Navigation Menu Styling and Animation */
#bars{
	text-align:right;
	width:100%;
	height:100%;
	padding-right: 24px;
	padding-top:18px;
	transition: 0.2s;
}
#close{
	text-align:right;
	width:100%;
	height:100%;
	padding-right: 24px;
	padding-top:18px;
	transition: 0.2s;
	display: none;
}
#menu {
	position: fixed;
	margin-top: 80px;
	margin-left:-205px;
	transition: 0.2s;
}
#menuTopBar {
	width:265px;
	height:60px;
	background-color: #292929;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	cursor: pointer;
	transition: 0.2s;
}
#menuTopBar:hover {
	width: 267px;
}
#menuLinks {
	width:205px;
	height:300px;
	background-color: #292929;
	border-bottom-right-radius: 10px;
}
#menuLinks a{
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #f2f2f2;
	display: block;
	transition: 0.3s;
}
#menuLinks a:hover, #menuTopBar:hover span{
	transform: rotate(1deg);
	transform-origin: right;
	background: linear-gradient(90deg, rgba(131,58,180,1), rgba(252,201,69,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#fullcloser {
	width:100%;
	height:100%;
	position:fixed;
	display: none;
}
 /* Hero Styling - Typer and Cursor */
.hero {
	letter-spacing: 5px;
	text-align: center !important;
	width: 100% !important;
}
@keyframes typer {
	0%		{opacity: 0;}
	75%		{opacity:100;}
	100%	{opacity: 0;}
}
#typer {
	animation-name: typer;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-delay: 1.3s;
	margin-left:-18px;
	display: inline;
	font-size: 2rem;
	color: rgba(255, 255, 255, .5);
}
.cursor {
	vertical-align: middle;
	padding-bottom:5px;
	--bs-text-opacity: 1;
    color: rgba(255, 255, 255, .5);
	font-size: 1.25rem;
    display: inline;
}
/*//*/

.profile {
	border-radius: 100%;
	width:80%;
	height: auto;
	border: 20px solid #333333;
	margin-top: -150px;
}
.hellocontent {
	text-align: justify;
	font-size:30px;
}

@media (max-width: 1199.98px) {
	.profile {
		margin-top: -120px;
		border: 15px solid #333333;
		}
	.hellocontent {
		font-size:24px;
	}
}
@media (max-width: 991.98px) {
    .profile {
		margin-top: -95px;
		width:100%
		}
	.hellocontent {
		font-size:20px;
	}
}
@media (max-width: 767.98px) {
	.profile {
		margin-top: -110px;
		width:60%
		}
	.hellocontent {
		font-size:24px;
	}
}
@media (max-width: 575.98px) {
	.hellocontent {
		font-size:24px;
		padding-left:10px;
		padding-right:10px;
	}
}


.content {
	margin-top: 150px;
	background-color:#333333;
}