@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa+Ink:wght@400;700&family=Aref+Ruqaa:wght@400;700&family=Badeen+Display&family=Blaka+Ink&family=Cairo+Play:wght@200..1000&family=Changa:wght@200..800&family=Lalezar&family=Lemonada:wght@300..700&family=Libertinus+Keyboard&family=Momo+Signature&family=Noto+Nastaliq+Urdu:wght@400..700&family=Playpen+Sans+Arabic:wght@100..800&family=Playwrite+MX+Guides&family=Qahiri&family=Rakkas&family=Warnes&display=swap');

:root{
	--bacground-color:#1f1f1f;
	--font-color:#eaecff;
	--top-screen-color:#acacac;
	--top-screen-color-font:#1b1a1a;
	/*
	fontfamilys:
		h1 >> 'Playwrite México Guides'
		h2 >> Lemonada
		h3 >>  'Libertinus Keyboard' 
		a >> warnes
		all >> Rakkas
	*/
}

html{
	background-color: var(--bacground-color);
	color: var(--font-color);
	font-family: Rakkas;
}
body{
	text-align: center;
}
.top{
	width: 100%;
	height: 50vh;
	background-color: var(--top-screen-color);
	animation: border 6s ease-in-out 0.2s infinite normal both;
	border-bottom: 3px solid blue;
	padding-left: 20px;
	padding-top: 20px;
	margin-bottom: 30px;
	border-radius: 1rem;
}
.top>h3{
	text-align: center;
	color: var(--bacground-color);
	font-family: 'Libertinus Keyboard';
	font-size: x-large;
}
@keyframes border{
	0%{
		border-bottom: 3px solid blue;
		box-shadow: 0px  1px 10px 2px blue;
	}
	10%{
		border-bottom: 3px solid #00d9ff;
		box-shadow: 0px  1px 10px 2px #00d9ff;
	}
	50%{
		border-bottom: 3px solid blue;
		box-shadow: 0px  1px 10px 2px blue;
	}
	90%{
		border-bottom: 3px solid #00d9ff;
		box-shadow:  0px 1px 10px 2px #00d9ff;
	}
	100%{
		border-bottom: 3px solid blue;
		box-shadow: 0px  1px 10px 2px blue;
	}
}	
hr{width: 60%;height: 5px;}
.top>hr,.photo{animation: border 6s ease-in-out 0.2s infinite normal both;}
.photo{
	background-image: url(photo.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 450px;
	height: 450px;
	border-radius: 50%;
	position: absolute;
	right: 12.5%;
	top: 3%;
}

a{
	color: var(--font-color);
	text-decoration: none;
	transition: all 0.5s ease-in 0.1s;
}
a:hover{
	color: #f80000;
}
h1{
	font-family: 'Playwrite México Guides';
	background-color: var(--bacground-color);
	width: 15%;
	border-radius: 3rem;
	text-align: center;
}
h2{
	font-family: Lemonada;
	background-color: burlywood;
	width: 15%;
	border-radius: 3rem;
	text-align: center;
}
h3{
	font-family:  'Momo Signature';
}

.aboute>a{
	font-family: warnes;
}

.MoreDetailes>div>h3{
	text-align:left;
	background-color:var(--font-color);
	color: var(--bacground-color);
	width: 60%;
	border-radius: 3rem;
	height: 30px;
	padding-left: 10px;
}
.MoreDetailes{
	margin-bottom: 150px;
	font-size: large;
}
.bottom{
	margin-top: 50px;
	width: 100%;
	background-color: #111111;
	margin: 0;
	padding: 0;
	border-top-left-radius: 3rem;
	border-top-right-radius: 3rem;
	text-align: center;
	font-size: large;
}
.div{
	display: none;
}
@media (max-width:700px){
	.photo{
		position: absolute;
		top: 17.5%;
		right: 25%;
		width: 200px;
		height: 200px;
	}
	h1,h2{width: 50%;}
	h2{height: 20px;font-size: x-small;}
	.top>h3{font-size: medium;}
	.top>hr{margin-right: 90px;}
	.div{display: block;}
	.MoreDetailes,.bottom{font-size: x-small;}
}