body {
    padding: 0;
    margin: 0;
    background-color: black;
	--background-image: url("Images/background.png");
	background-repeat: repeat;
	background-attachment: top left;
	background-position: bottom 100%;
}

::-webkit-scrollbar {
    width: 2px;
}

#Wires {
	position: relative;
	width: 100%;
	height: 50%;
	z-index: 1;
	pointer-events: none;
    user-select: none;
	-webkit-user-drag: none;
}

@keyframes InvertAnimation {
	0% {filter: invert(0%); }
		
	100% {filter: invert(100%);}
}

@keyframes hover-out {
	0% { filter: invert(85%); }
	100% { filter: invert(0%); }
}

#Logo {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 100%;
	border: 0.3vw solid rgb(204, 184, 117);
	margin-top: -20%;
	width : 22.5vw;
	z-index: 3;
    user-select: none;
	-webkit-user-drag: none;
	filter: invert(0%);
	animation: hover-out 1s forwards;
}


#Logo:hover {
	animation-fill-mode: forwards;
	animation-name: InvertAnimation;
	animation-duration: 0.75s;
}

#IconsContainer {
	position: relative;
	display: flex;
	justify-content: center;   /* Centers items horizontally (along the main axis) */
 	align-items: center;
	gap: 2.75vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 7.5%;
	z-index: 4;
	--margin-top: -2.5%;
	aspect-ratio: 6;
	border: 0.1vw solid white;
	background: transparent;
	width: 35vw;
}

#Light {
	width: 95%;
	height: 30%;
	position:absolute;
	margin-left: auto;
	margin-right: auto;
	top: 0;
	left: 2%;
	z-index: 2;
	opacity: 30%;
	filter: sepia(200%);
	user-select: none;
	-webkit-user-drag: none;
}

#Copyright {
	color: white;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	font-size: 1vw;
	bottom: 0;
	font-family: "Lucida Console", "Courier New", monospace;
}

#Info {
	color: white;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	font-size: 1.75vw;
	margin-top: 3%;

	font-family: "Lucida Console", "Courier New", monospace;
}

#SubInfo {
	color: white;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	font-size: 1vw;
	margin-top: 1.5%;

	font-family: "Lucida Console", "Courier New", monospace;
}
#Info-Usage {
	color: white;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	font-size: 1vw;
	margin-top: 3.5%;

	font-family: "Lucida Console", "Courier New", monospace;
}


#NowPlaying {
	position:sticky;
	display: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 7.5%;
	bottom:5%;
	z-index: 5;
	border: 0.1vw solid white;
	background: black;
	width: 30vw;
	height: 0vw;
}

#PlayingInfo {
	color: white;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	font-size: 1vw;

	font-family: "Lucida Console", "Courier New", monospace;
}

#MediaDisplay {
	display: none;
	position:absolute;
	bottom: 0%;
	z-index: 4;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 70%);
	opacity: 100%;
}

#MediaImage {
	display: none;
    margin:auto;
	height : 90%;
	margin-top: 2vw;
	border: 0.1vw solid white;
	user-select: none;
	-webkit-user-drag: none;
}
#MediaVideo {
	display: block;
    margin:auto;
	height : 90%;
	margin-top: 2vw;
	user-select: none;
	-webkit-user-drag: none;
}

#CloseButton {
	display:block;
	position: absolute;
	margin-left: 3vw;
	margin-top: 2vw;
	width: 3vw;
	height: 3vw;
	border: 0;
	background: url(Images/close.png);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#CloseButton:hover {
	cursor:pointer;
}

#MediaIndex {
	color: white;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	font-size: 1.25vw;
	font-family: "Lucida Console", "Courier New", monospace;
}

@keyframes scale-in {
	0% { scale: 0.8; opacity: 100%;}
	100% { scale: 1; opacity: 75%; }
}
@keyframes scale-out {
	0% { scale: 1; opacity:  75;}
	100% { scale: 0.8; opacity: 100%;}
}


.CollectionButton {
	display: block;
	aspect-ratio: 1/1;
	width: 4.5vw;
	border: none;
	animation: scale-in 0.35s forwards;
}

.CollectionButton:hover {
	animation: scale-out 0.25s forwards;
}

#Squabble {
	background: url(Images/Squabble.png);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#Blooming {
	background: url(Images/Blooming.png);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	
}

#Life {
	background: url(Images/Life.png);
	background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
}

#Church {
	background: url(Images/Church.png);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	image-rendering: pixelated;
}

#Village {
		background: url(Images/Village.png);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	image-rendering: pixelated;
}

#LeftButton {
	display:block;
	position: absolute;
	margin-left: 3vw;
	margin-top: 25%;
	width: 3vw;
	height: 3vw;
	background: url(Images/left.png);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#RightButton {
	display:block;
	position: absolute;
	margin-right: 3vw;
	margin-top: 25%;
	right: 0%;
	width: 3vw;
	height: 3vw;
	background: url(Images/right.png);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}