@charset "utf-8";
/* CSS Document */

/* yello html {
	background: linear-gradient(#FFFAAC,#FFF782 75%);
	text-align: center;
	scroll-behavior: smooth;
} 
 */
/* porpol  html {
	background: linear-gradient(#d2abff,#a182ff 75%);
	text-align: center;
	scroll-behavior: smooth;
} */

/* spooky  html {
	background: linear-gradient(#f76420,#343136 75%);
	text-align: center;
	scroll-behavior: smooth;
}
*/
/* festive  html {
	background: linear-gradient(#ffadad,#3d9636 75%);
	text-align: center;
	scroll-behavior: smooth;
} */

/* winter */  html {
	background: linear-gradient(#51FFA6,#032066 75%);
	text-align: center;
	scroll-behavior: smooth;
}

/* porpol old */ /* html {
	text-align: center;
	scroll-behavior: smooth;
	background:
	  linear-gradient(-135deg, #a182ff 25%, transparent 25%) -50px 0,
	  linear-gradient(-225deg, #a182ff 25%, transparent 25%) -50px 0,
	  linear-gradient(-315deg, #a182ff 25%, transparent 25%),
	  linear-gradient(-45deg, #a182ff 25%, transparent 25%);
	background-size: 100px 100px;
	background-color: #d2abff;
	height: 100px;
	animation: gradient2 25s ease infinite;
}
*/

body {
	background-color: #ffc2fd;
	width: 90%;
	margin: auto;
}

header {
	margin: 0px 0px 20px;
	background-color: #3B3246;
	padding: 20px 0px 0px;
}

header h1 {
	margin: auto;
	padding: 15px 0px 0px;
}

footer {
	background-color: #3B3246;
	padding: 0px 0px 20px;
}

footer div {
	background-color: #5A4D6B;
	padding: 15px 0px;
}

nav a {
	padding: 5px 10px 7.5px;
	margin: auto;
}

nav ul li {
	display: inline-block;
	padding: 0px 15px;
}

nav ul {
	margin: 10px 0px 0px;
	padding: 10px 0px;
}

nav {
	width: 100%;
	margin: auto;
	background-color: #5A4D6B;
}

blockquote {
	width: 80%;
	background-color: rgba(255,254,178,0.50);
	margin: 50px auto 50px;
	border-radius: 20px;
	border-top: groove 10px #AFC0CC;
	border-left: groove 10px #AFC0CC;
	border-right: ridge 10px #AFC0CC;
	border-bottom: ridge 10px #AFC0CC;
	padding: 10px 0px 0px;
}

nav li a {
	transition: font-size 0.25s ease;
}

nav li a:hover {
	font-size: 150%;
}

div.rock {
	width: 5%;
	animation: rock 2.5s ease infinite;
	animation-delay: 0.125s;
	position: fixed;
	top: -25px;
	right: -35px;
}

div.rock2 {
	width: 2.5%;
	animation: rock 3s ease infinite;
    animation-delay: 0.125s;
	position: fixed;
	top: -25px;
	right: 50px;
}

div.rock3 {
	width: 2.5%;
	animation: rock 3s ease infinite;
	animation-delay: 0.125s;
	position: fixed;
	top: 70px;
	right: -25px;
}

div.rock4 {
	width: 10%;
	animation: rock 4s linear infinite;
	animation-delay: 0.125s;
	position: fixed;
	bottom: -75px;
	left: -80px;
}

div.rock5 {
	width: 5%;
	animation: rock 3s ease infinite;
    animation-delay: 0.125s;
	position: fixed;
	bottom: -50px;
	left: 80px;
}

div.rock6 {
	width: 5%;
	animation: rock 3s ease infinite;
	animation-delay: 0.125s;
	position: fixed;
	bottom: 90px;
	left: -50px;
}

div.thing {
	width: 40%;
	background-image: url("Images/Graphics/thingw.svg");
	background-size: 200px 1800px;
	animation: thing 15s linear infinite;
	z-index: 1;
	position: fixed;
	bottom: -40px;
	right: -300px;
	height: 200px;
}

div.rock7 {
	width: 40%;
	animation: rotate 1s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1s);
	position: fixed;
	z-index: 0;
	bottom: -300px;
	right: -350px;

}

div.gear {
	width: 20%;
	animation: gear 10s ease infinite;
	position: absolute;

}
#navicon {
	width: 60%;
	margin: 10px auto auto 40px;
}

div.aside:hover {
	left: -10px;
}

div.aside:hover img {
    opacity: 0%;
}

div.aside img {
    opacity: 100%;
    transition: opacity 0.5s ease;
}

div.aside {
	text-align: left;
	margin: 40px auto auto auto;
	left: -90px;
	transition: left 0.5s ease;
	position: fixed;
	background: rgba(118,220,241,0.25);
	border-top: ridge 10px #AFC0CC;
	border-left: ridge 10px #AFC0CC;
	border-right: groove 10px #AFC0CC;
	border-bottom: groove 10px #AFC0CC;
	border-radius: 0px 30px 30px 0px;
	width: 7.5%;
	height: 40%;
	overflow: hidden;
}

div.aside ul li {
	list-style: none;
	padding: 10px 0px;
}

div.aside li a {
	transition: font-size 0.25s ease;
}

div.aside li a:hover {
	font-size: 150%;
}

div.thing2 {
	width: 40%;
	background-image: url("Images/Graphics/thingw.svg");
	background-size: 200px 1800px;
	animation: thing2 15s linear infinite;
	position: fixed;
	top: -40px;
	left: -300px;
	height: 200px;
}

@keyframes thing {
	0% {background-position: 0px; transform: rotate(-35deg)}
	100% {background-position: 1800px; transform: rotate(-35deg)}
}

@keyframes thing2 {
	0% {background-position: 0px; transform: rotate(-215deg)}
	100% {background-position: 1800px; transform: rotate(-215deg)}
}

@keyframes rock {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

@keyframes rotate {
	100% {transform: rotate(360deg);}
}

@keyframes gradient2 {
	0% {right: 0px;}
	
	12.5% {left: 0px;}
	
	25% {right: 0px; }
	
	37.5% {left: 0px; }
	
	50% {background-position: center; right: 0px;}
	
	62.5% {left: 0px;}
	
	75% {right: 0px;}
	
	87.5% { left: 0px;}
	
	100% {left: auto; right: auto;}

}

@keyframes gradientreal {
	0% {background-position: 0px;}
	
	25% {background-position: -2500px;}
	
	50% {background-position: -5000px;}
	
	75% {background-position: -7500px;}
	
	100% {background-position: -10000px;}
}