:root{
--color1: #019b98;
--color2: #55ccc9;
--color3: #c1ffff;
--color4: #dd0025;
--color5: #ffbfab;
--color6: #f1f1f1;
--color7: #c8c8c8;
--color8: #014e60;
--color9: #3f7a8d;
/*--color10: #0077c2;*/


}

@font-face{
	font-family: Estedad;
	src: url(../fonts/Estedad.woff2);
}
@font-face{
	font-family: Mikhak;
	src: url(../fonts/Mikhak.woff2);
}
*{	
	box-sizing: border-box;
}
html{
font-size: 17px;
}
body{
	color: var(--color4);
	font-family: Estedad, Tahoma;
	background-color: var(--color5);
	/*background-image: url(../../../images/amiali89.jpg);*/
	/*background: radial-gradient( red, blue);
	background: #EEAECA
	background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);*/
	background-image: var(--color4);
	background-size: auto; 
	background-position: 0% 0%;
	background-repeat: repeat;
	background-attachment: fixed;
	}
h1{
	border: var(--color3) 4px solid;
	border-radius: 15px 15px;
	padding: 4px;
	color: var(--color6);
	background-color: var(--color5);
	animation: h1 2s ease-out forwards;  
	font-family: Mikhak;
	}
/*h1:hover{
	color: var(--color6);
	border: var(--color2) 6px solid;
	font-family: Estedad;
	font-size: 25px;
	font-display: inherit;
	box-shadow: var(--color4);
}*/
p{
	line-height: 1.7rem;
	color: var(--color9);
	animation: p 2s ease-out forwards; 
	font-size: 17px;
	font-family: Estedad;
}
p::selection{
	background-color: tomato;
	color: white;
}
a{
	text-decoration: none;
	color: var(--color4);
}
a:hover{
	color: var(--color9);			
	}
#footer{
	direction: ltr;
	letter-spacing: 5PX;
	text-align: center;
	font-family: Mikhak;
	color: var(--color4);
	}
#up{
	width: 100px;
	aspect-ratio: 1;
	margin: 0 auto;
	/*background-image: url(../../../images/amiali89.jpg);*/
	transform: scale(0.5);
	position: fixed;
	bottom: 10px;
	right: 10px;
	}
#up:hover{
	background-position: top right;
	}
/* website structure */
main{
	display: grid;
	/*width: 100%;*/
	grid-template-columns: 200px auto;
	grid-template-rows: 170px auto 100px;
	grid-template-areas: 
	'header header'
	'aside article'
	'footer footer'
	;
	gap: 10px;
	background-color: var(--color2);
	background-clip: padding-box;
	font-size: 0.9rem;
	width: 950px;
	min-height: 1000px;
	margin: 0 auto;
	padding: 10px;
	border: 10px solid black ;
	border-image: url(../../../images/border.png) 15% stretch; color: var(--color1);
	}
header,aside,article,footer{
	background-color: rgb(255, 255, 255, 0.5);
	box-shadow: rgb(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	border-radius: 10px;
	font-family: Estedad;
	}
header{
	grid-area: header;
	}
aside{
	grid-area: aside;
	}
article{
	grid-area: article;
	padding: 10px;

	}
footer{
	grid-area: footer;
}
#ads{
	position: fixed;
	left: 0px;
	bottom: 0px;
}

/* gallery*/
#gallery{
	text-align: center;
}
#gallery img{
	transition: 0.2s;
	width: 130px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	margin: 20px;
	filter: grayscale(40%) blur(2px)
}
#gallery img:hover{
	transform: scale(1.6);
	filter: grayscale(0%) blur(0px);
	box-shadow: 0px 0px 20px silver;
}
/*box*/
#box{
width: 100px;
aspect-ratio: 1;
margin: 0 auto;
position: relative;
transform: scale(0.5);
}
#box div:first-child{
	width: 70px;
	aspect-ratio: 1;
	position: absolute;
}
/*Animation*/
@keyframes logoplay{
	from{
 	transform: translateX(-300px);
 	opacity: 0;
	}
 to{
 	transform: translateX(0px);
 	opacity: 1;
 	}
 }
 #logo{
 	animation: logoplay 2s;
 }
 @keyframes menuplay{
 	0%{
 		transform: translateX(300px);
 	}
 	50%{
 		transform: translateX(-50px);
 	}
 	100%{
 		transform: translateX(0px);
 		opacity: 1;
 	}
 }
@keyframes h1 {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }
      to {
        transform: translatey(0%);
        opacity: 1;
      }
    }
@keyframes p {
	from {
		transform: translatey(-300%);
		opacity: 0;
	}
	to {
		transform: translatey(0%);
		opacity: 1;
	}
}
 #main-menu ul li{
 	opacity: 0;
 	animation: menuplay 1.5s forwards;
 }


/*TABLET*/
@media screen and (max-width: 1024px)
{
	#main-menu{
		display: inherit;
	}
	main{

		width: 100%;
	}
	#nav{
		display: none;
	}
}



/*MOBILE*/
@media screen and (max-width: 500px)
{
	main{
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto;
		grid-template-areas: 
		'header'
		'aside'
		'article'
		'footer'
		;
	}
}

.mt-6 {
    margin-top: 5rem !important;
}
.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: 0.9rem;
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-color: currentcolor;
    text-decoration-thickness: auto;
    background: 0 0;
    background-color: rgba(0, 0, 0, 0);
    background-position-x: 0px;
    background-position-y: 0px;
    background-repeat: repeat;
    background-attachment: scroll;
    background-image: none;
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
    border: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    transition-property: color, background-color, border-color;
    transition-duration: 0.15s, 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
    transition-delay: 0s, 0s, 0s;
}