/* author:Lugganaut date:20-12-2024 */
/*media (max-width: 768px) {
   .content-to-hide {
      display: none;
   }
} */

html, body {
  height: 100%;
  width: 100%;
  height: 180vh;
  width: 100vw;
  margin: 0;
	overflow-x: hidden;
  scroll-snap-type: inline;
  scroll-snap-type: block;
  overflow-y: scroll;
  scroll-snap-stop: always;
  overflow: initial;
  scroll-snap-stop: y mandatory;
  background: #14375A;
}

div#head {
	width: 100%;
	height: 10%;
	margin: auto;
	border: 0px solid white;
	text-align: center;
	margin-top: 0%;
  background-color: #394550;
	padding-bottom: 5%;
	box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.65);
	overflow: hidden;
  -webkit-box-shadow: 20px 6px 40px -12px black;
  -moz-box-shadow: 20px 40px 40px -12px black;
  box-shadow: -20px 40px -12px black;
}

div#menubutton {
	position: relative;
	left: 1%;
	height: 8%;
	width: 4%;
	top: -15%;
	border: 0px solid black;
  background-position: center;
	background-image:url(menu.png);
	background-size: cover;
}

div#menubutton:hover > div#menu {
  /*background-image: url(menuhover.png);*/
  display: block;

}

div#menu {
	position: relative;
	left: 0%;
	height: 300%;
	width: 200%;
	top: 0%;
	border: 0px solid black;
  background-position: center;
	background-image:url();
	background-size: cover;
	display: none;
	border-radius: 25px;
}

div#menuslot1 {
	left: 0%;
	height: 50%;
	width: 100%;
	top: 0%;
	border: 0px solid black;
	background-color: grey;
	border-radius: 15px 15px 0px 0px;
}

div#menuslot2 {
	left: 0%;
	height: 50%;
	width: 100%;
	top: 0%;
	border: 0px solid black;
	background-color: red;
	border-radius: 0px 0px 15px 15px;
}

h1 {
	font-family: "Helevetic", sans-serif;
	font-size: 400%;
	font-weight: 900;
	color: white;
	margin: auto;
	text-align: center;
	text-shadow: #000 0px 0px 2px,   #000 0px 0px 2px,   #000 0px 0px 2px,
             #000 0px 0px 2px,   #000 0px 0px 2px,   #000 0px 0px 2px;

}
div#body {
	width: 100%;
	height: 100%;
	border: 0px solid black;
	position: relative;

}

div#center {
	width: 80%;
	height: 100%;
	border: 0px solid black;
	position: relative;
	margin: auto;
}

div#centerleft1 {
	width: 60%;
	border: 0px solid black;
	position: relative;
	left: 0%;
	top: 0%;
  background-position: center;
  background-image:url(p1.jpg);
  background-size: cover;
  border-radius: 5px;
  -webkit-box-shadow: 20px 6px 40px -12px black;
  -moz-box-shadow: 20px 40px 40px -12px black;
  box-shadow: -20px 40px -12px black;
  scroll-snap-align: start;
  aspect-ratio: auto 3 / 4;
}

div#centerleft1:hover {
	z-index: 1;
	display: block;
}

div#centerleft1:hover > div#description1 {
	display: block;
}

div#description1 {
	width: 60%;
	height: 30%;
	border: 0px solid black;
	position: relative;
	right: -105%;
	top: 30%;
	display: none;

}


div#centerright2 {
	width: 60%;
	border: 0px solid black;
	position: relative;
	right: -40%;
	top: -10%;
  background-position: center;
  background-image:url(p2.jpg);
  background-size: cover;
  border-radius: 5px;
  -webkit-box-shadow: 20px 6px 40px -12px black;
  -moz-box-shadow: 20px 40px 40px -12px black;
  box-shadow: -20px 40px -12px black;
  scroll-snap-align: start;
  aspect-ratio: auto 3 / 4;
}

div#centerright2:hover {
	z-index: 1;
	display: block;
}

div#centerright2:hover > div#description2 {
	display: block;
}

div#description2 {
	width: 60%;
	height: 30%;
	border: 0px solid black;
	position: relative;
	left: -65%;
	top: 35%;
	display: none;
}

div#centerleft3 {
	width: 60%;
	border: 0px solid black;
	position: relative;
	left: 0%;
	top: -20%;
  background-position: center;
  background-image:url(p3.jpg);
  background-size: cover;
  border-radius: 5px;
  -webkit-box-shadow: 20px 6px 40px -12px black;
  -moz-box-shadow: 20px 40px 40px -12px black;
  box-shadow: -20px 40px -12px black;
  scroll-snap-align: start;
  aspect-ratio: auto 3 / 4;
}

div#centerleft3:hover {
	z-index: 1;
	display: block;
}

div#centerleft3:hover > div#description3 {
	display: block;
}

div#description3 {
	width: 60%;
	height: 30%;
	border: 0px solid black;
	position: relative;
	right: -105%;
	top: 35%;
	display: none;
}

p#description {
  font-family: "Helevetic", sans-serif;
  font-style: normal;
  font-weight: bolder;
  font-size: 20px;
  text-align: center;
}

div#sun {
	position: absolute;
	right: 0;
	height: 15%;
	width: 10%;
	top: 0%;
	border: 0px solid black;
  background-position: center;
	background-image:url(sun.png);
	background-size: cover;
}


footer {
	position: fixed;
	bottom: 0%;
	height: 5%;
	width: 100%;
	overflow: hidden;
}

div#foot {
	position: fixed;
	width: 100%;
	height: 10%;
	margin-bottom: 15%;
	border: 0px solid white;
	padding-bottom: 5%;
	/*box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.65);
	backdrop-filter: invert(80%); */
	overflow: hidden;

    background: -moz-linear-gradient(top,  rgba(137,255,241,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,255,241,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}