@font-face {
	font-family: Estedad;
	src: url(../fonts/Estedad.woff2);
}

@font-face {
	font-family: Mikhak;
	src: url(../fonts/Mikhak.woff2);
}


/*:root {
	--primary-100: #1e295a;
	--primary-200: #4c5187;
	--primary-300: #abacea;
	--accent-100: #F18F01;
	--accent-200: #833500;
	--bg-100: #F5ECD7;
	--bg-200: #ebe2cd;
	--bg-300: #c2baa6;
	--text-100: #353535;
	--text-200: #5f5f5f;
}*/

/*:root{
	--primary-100:#6A00FF;
    --primary-200:#a64aff;
    --primary-300:#ffb1ff;
    --accent-100:#00E5FF;
    --accent-200:#00829b;
	--bg-100:#1A1A1A;
    --bg-200:#292929;
    --bg-300:#404040;
    --text-100:#FFFFFF;
    --text-200:#e0e0e0;
}*/
/*:root{
	--primary-100:#FF6347;
    --primary-200:#dc442e;
    --primary-300:#8d0000;
    --accent-100:#7FFF00;
    --accent-200:#009900;
	--bg-100:#F7F7F7;
    --bg-200:#ededed;
    --bg-300:#c4c4c4;
    --text-100:#333333;
    --text-200:#5c5c5c;
}*/
/*:root{
	--primary-100:#FF6600;
    --primary-200:#ff983f;
    --primary-300:#ffffa1;
    --accent-100:#F5F5F5;
    --accent-200:#929292;
	--bg-100:#ffffff;
    --bg-200:#f5f5f5;
    --bg-300:#cccccc;
    --text-100:#1d1f21;
    --text-200:#444648;
}*/
/*:root{
	--primary-100:#FF4081;
    --primary-200:#ff79b0;
    --primary-300:#ffe4ff;
    --accent-100:#00E5FF;
    --accent-200:#00829b;
	--bg-100:#F5F5F5;
    --bg-200:#ebebeb;
    --bg-300:#c2c2c2;
    --text-100:#333333;
    --text-200:#5c5c5c;
}*/
:root{
	--primary-100:#3F51B5;
  --primary-200:#757de8;
  --primary-300:#dedeff;
  --accent-100:#2196F3;
  --accent-200:#003f8f;
  --bg-100:#FFFFFF;
  --bg-200:#f5f5f5;
  --bg-300:#cccccc;
  --text-100:#333333;
  --text-200:#5c5c5c;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

#logo {
	filter: invert(1);
}

* {
	box-sizing: border-box;
}

html,
body {
	scroll-behavior: smooth;
}

html {
	font-size: 17px;
}

body {
	font-family: Estedad, Tahoma;
	background-color: var(--bg-200);
	/*background-image: url(../../../images/Lawrencium.jpg);*/
	background-attachment: fixed;
	color: var(--text-100);
	/*background-size: cover;*/
	/*background: linear-gradient(red,blue);*/
background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
	padding: 7px 5px;
	margin: 1px 1px 1px 1px;
}

a {
	color: mediumblue;
	text-decoration: none;
}

a:hover {
	color: indianred;
}

p {
	line-height: 1.5rem;
}

.fixed-bg {
	text-align: justify;
	background-image: url(../../../images/gallery/large/img1.jpg);
	background-attachment: fixed;
}

.video {
	border: 1px solid #dee2e6;
	margin: 0 auto;
	display: block;
	border-radius: 40px;
}

#up {
	width: 50px;
	height: 50px;
	margin: 0 auto;
	background-image: url(../images/btn.png);
	position: fixed;
	right: 20px;
	bottom: 20px;
}

#up:hover {
	background-position: top right;
}

#star {
	width: 10px;
	aspect-ratio: 1;
	background-image: url(../images/nav_logo321.webp);
	background-position: -102px -262px;
}

#star:hover {
	background-position: -102px -277px;
}


/* Website Structure */
main {
	width: 950px;
	min-height: 1000px;
	margin: 0 auto;
	padding: 10px;
	border: 10px solid black;
	/*background-color: white;*/
	/*visibility: hidden;*/
	background-clip: padding-box;
}

header,
aside,
article,
footer {
	background-color: var(--bg-100);
	border: 5px solid var(--bg-300);
	border-radius: 40px;
}

header {
	min-height: 150px;
	margin-block-end: 10px;
	padding: 5px;
	padding-block-end: 0px;

	.btn-group {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

aside {
	width: 200px;
	min-height: 610px;
	float: inline-start;
	margin-inline-end: 10px;
}

article {
	width: 700px;
	min-height: 710px;
	float: inline-start;
}

footer {
	min-height: 100px;
	margin-block-start: 10px;
	direction: ltr;
	letter-spacing: 7px;
	text-align: center;
}

#main-menu {
	font-weight: 300;
	display: none;
}

#main-menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#main-menu ul li {
	margin: 2px;
}

#main-menu ul li a {
	padding: 6px 4px;
	background-color: var(--primary-200);
	color: var(--primary-300);
	width: 100%;
	height: 100%;
	display: block;
	border-right: 10px solid var(--primary-100);
	border-radius: 10px 0px 0px 10px;
	transition: 0.3s;
}

#main-menu ul li:first-child a {
	border-top-right-radius: 10px;
}

#main-menu ul li a:hover {
	background-color: var(--primary-100);
	border-right-color: var(--primary-200);
	/*box-shadow: -7px 7px 0px var(--primary-100);*/
}

#main-menu ul li a:hover:after {
	content: '√';
}


#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

#nav ul li {
	display: inline-block;
}

#nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--primary-200);
	color: var(--primary-300);
	padding: 4px 6px;
	border-radius: 10px 10px 0px 0px;
	border-bottom: 2px solid var(--primary-100);
	transition: 0.3s;
}

#nav ul li a:hover {
	background-color: var(--primary-100);
	border-bottom-color: var(--primary-200);
}


#ads {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99999999;
}

/*body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}*/


#gallery {
	text-align: center;
}

#gallery img {
	margin: 9px;
	transition: 0.4s;
	width: 125px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0px 0px 10px silver;
	filter: grayscale(80%);
}

#gallery img:hover {
	transform: scale(1.1) rotate(720deg);
	filter: grayscale(0%);
}

@keyframes logoPlay {
	from {
		opacity: 0;
		transform: translate(-300px) rotateY(180deg);
	}

	to {
		opacity: 1;
		transform: translate(0px) rotateY(0deg);
	}
}

#logo {
	animation: logoPlay 2s;
}

@keyframes menuPlay {
	0% {
		transform: translate(200px);
		opacity: 0;
	}

	50% {
		transform: translate(-30px);
	}

	100% {
		transform: translate(0px);
		opacity: 1;
	}
}

#main-menu ul li {
	animation: menuPlay 1.5s forwards;
	opacity: 0;
}


@media screen and (max-width: 1024px) {
	main {
		width: 100%;
	}

	article {
		width: calc(100% - 210px);
	}

	#nav {
		display: none;
	}

	#main-menu {
		display: inherit;
	}
}

@media screen and (max-width: 500px) {
	aside {
		width: 100%;
	}

	article {
		width: 100%;
		margin-top: 10px;
	}
}

.mt-9 {
	margin-top: 4rem !important;
}