/* @font-face { */
/* font-family: 'IranNastaliq'; */
/* src: url('../fonts/IranNastaliq.eot?#') format('eot'), */
/* url('../fonts/IranNastaliq.ttf') format('truetype'), */
/* url('../fonts/IranNastaliq.woff') format('woff'); */
/* } */
/* body{ */
	/* font-family:IranNastaliq,'IranNastaliq',tahoma; */
/* } */

/* -------- center frame --------- */
.center-frame
{
width: 200px;
height: 200px;
padding: 55px;
border-radius: 300px; /* for getting circle shape */
border: double 15px rgba(254,254,254,0.7);
background: rgba(254,254,254,0.7);
}

.blue-text {
color: #black;
/* background: #FFFFFF; */
text-shadow: 2px 2px 0 #070707, 2px -2px 0 #727475, -2px 2px 0 #000, -2px -2px 0 #4074b5, 2px 0px 0 #000, 0px 2px 0 #4074b5, -2px 0px 0 #000, 0px -2px 0 #0dcaf0;	
color: white;
letter-spacing: 0.4em;
opacity: 0.2;
/* background: #FFFFFF; */
}

/* --------------------zoom hover ------------------ */
.zoom {
	filter: grayscale(0%) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.5));
	transition: transform .2s; /* Animation */
}

.zoom:hover {
	transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* -------------------- colorize hover ----------------- */
.colorize {
	filter: grayscale(100%);
	transition: filter 450ms ease;
  

}

.colorize:is(:hover, :focus) {
	font-size: 8em;
	filter: grayscale(0%) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.5));
}

/* ------------- background images animation ---------- */
#offcanvasMenu {
	/* height: 80%; */
	/* max-height: 600px; */
	/* width: 1000px; */
	background-color: lightblue;
	background-image:		
		url("../assets/img/clouds2.png"), 
		 url("../assets/img/clouds.png"), 
		url("../assets/img/clouds2.png"),
		url("../assets/img/clouds2.png"),
		url("../assets/img/clouds.png");
	background-repeat: repeat-x;
	background-position: 
		0 20%,
		0 100%,
		0 50%,
		0 100%,
		0 0;
	background-size: 
		2500px,
		800px,
		500px 200px,
		1000px,
		400px 260px;
	animation: 50s para infinite linear;
	/* opacity: 0.5; */
	}

@keyframes para {
	100% {
		background-position: 
			-5000px 20%,
			-800px 95%,
			500px 50%,
			1000px 100%,
			400px 0;
		}
	}
	
	
	/* ----------------------------- my animation exprience ------------------- */
	
	/* The small dragon flying top left */
	@keyframes kf-dragon-sm {
	  0%   {left:0px; top:0px;}
	  25%  {left:200px; top:0px;}
	  50%  {left:200px; top:200px;}
	  75%  {left:0px; top:200px;}
	  100% {left:0px; top:0px;}
	}
	/* The element to apply the animation to #anim-dragon-sm */
	#anim-dragon-sm {
	  width: 100px;
	  height: 100px;
	  position: relative;
	  background-color: transparent;
	  animation-name: kf-dragon-sm;
	  animation-duration: 35s;
	}
	
		
	/* The medium dragon flying */
	@keyframes kf-dragon-md {
	  0%   {left:250px; top:250px;}
	  50%  {left:250px; top:0px;}
	  100%  {left:250px; top:250px;}
	  /* 75%  {left:0px; top:400px;}  */
	  /* 100% {left:800px; top:800px;} */
	}
	/* The element to apply the animation to #anim-dragon-sm */
	#anim-dragon-md {
	  width: 100px;
	  height: 100px;
	  position: relative;
	  background-color: transparent;
	  animation-name: kf-dragon-md;
	  animation-duration: 10s;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
	  animation-direction: alternate;
	}
	
/* ------------------- rotate image animation ----------------- */
.img-rotation{
  animation: sun-rotation 3	s infinite linear;
}

@keyframes sun-rotation {
  from {
    transform: rotate(0deg);
	transform: scale(0.0, 0.0);
	opacity:0.2;
  }
  to {
    transform: rotate(360deg);
	transform: scale(1.4, 1.6);
	opacity:0.4;
  }
}

/* ------------------- main modal animation ----------------- */
.main-modal{
  animation: rotation 1s infinite linear;
}

@keyframes rotation {
  from {
    /* transform: scale(0.1, 0.5); */
	opacity:0.6;
  }
  to {
    transform: scale(1.0, 1.0);
	opacity:1.1;
  }
}

/* ------------------------ zoom animation (poem) --------------------*/
.zoom-in-animation {
  animation: zoom-in 6s ease;
}
@keyframes zoom-in {
  0% {
    scale: 10%;
	opacity:0.0;
  }
    /* 25% { */
    /* scale: 25%; */
	/* opacity:0.25; */
  /* } */
    50% {
    scale: 80%;
	opacity:1.0;
  }
  /* 75% { */
    /* scale: 75%; */
	/* opacity:0.75; */
  /* } */
    100% {
    scale: 300%;
	opacity:0.0;
  }
}

/* ------------------------ zoom in and out animation (poem) --------------------*/
.zoom-in-out-animation {
  animation: zoom-in-zoom-out 3s ease;
}
@keyframes zoom-in-zoom-out {
  0% {
    scale: 300%;
	opacity:0.0;
  }
  100% {
    scale: 100%;
	opacity:1.0
  }
}