body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

#sound-img {
	left: 1%;
	bottom: 2%;
	height: 2vw;
	width: auto;
	background-color: #2bbee4;
	border-radius: 2vw;
}

#track-title {
	left: 4%;
	bottom: 1%;
	cursor: none;
	font-size: 1vw;
	color: #2bbee4;
}

#track-info {
	left: 12%;
	bottom: 1%;
	cursor: none;
	font-size: 1vw;
	color: #2bbee4;
}

#content {
	position: absolute;
	width: 100%;
	height: 100%;
}

.background {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('images/back.png') center/cover no-repeat;
	z-index: -100;
	animation: backgroundAnimation 20s infinite alternate;
}

.background-credits {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('images/credits.png') center/cover no-repeat;
	z-index: -100;
	/* animation: backgroundAnimation 30s infinite alternate; */
}

@keyframes backgroundAnimation {
	0% {
		transform: scale(1);
		filter: brightness(1);
	}
	100% {
		transform: scale(1.3);
	filter: brightness(0.2);
	}
}

.a {
	text-decoration: none;
	color: inherit;
}

@keyframes glitch { // effet de tremblement
    0% { text-shadow: 2px 2px red, -2px -2px blue; }
    25% { text-shadow: -2px -2px red, 2px 2px blue; }
    50% { text-shadow: 2px -2px blue, -2px 2px red; }
    75% { text-shadow: -2px 2px red, 2px -2px blue; }
    100% { text-shadow: 2px 2px red, -2px -2px blue; }
}

.glitch { // effet de tremblement
	font-weight: bold;
	color: white;
	font-family: 'VT323', monospace;
	text-transform: uppercase;
	position: relative;
	animation: glitch 0.5s infinite;
}

.buttons button {
    position: absolute;
    font-family: 'VT323', monospace;
    border: none;
    outline: none;
    cursor: alias;
    display: inline-block;  
}

.buttons button:active {
	transform: scale(1);
}

.images img {
	position: absolute;
	border: none;
	outline: none;
	cursor: alias;
	display: inline-block;	
}

.images img:active {
	transform: scale(1);
}

.images-sound img,p {
	position: absolute;
	border: none;
	outline: none;
	cursor: pointer;
	display: inline-block;
}

#link1 {
	left: 30%;
	top: 20%;
	font-size: 3.5vw;
	background: linear-gradient(to right, #cff5bc, #c00d0d);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#link2 {
	left: 10%;
	top: 60%;
	font-size: 2.3vw;
	background: linear-gradient(to right, #2f7486, #cff5bc);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#link3 {
	left: 40%;
	bottom: 10%;
	font-size: 2.3vw;
	background: linear-gradient(to right, #5c96ed, #cff5bc);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#link4 {
	right: 10%;
	top: 15%;
	height: 7vw;
	width: auto;
}

#link5 {
	right: 25%;
	top: 45%;
	height: 1.5vw;
	width: auto;
	border-radius: 15px;
}

#link6 {
	right: 1%;
	bottom: 1%;
	font-size: 2.3vw;
	background: linear-gradient(to right, #183a57, #c4ced7);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* page credits : mise en page */
#credits {
	position: fixed;
	font-size: 2.5vw;
}

#music, #yt, #rpg, #games {
	position: fixed;
	font-size: 2vw;
}

#credits1, #music1, #yt1, #rpg1, #games1 {
	position: fixed;
	font-size: 1.5vw;
}

#guests, #rpg2 {
	position: fixed;
	font-size: 1.2vw;
}

#credits	{ left:  8%; top: 1%;  }
#credits1	{ left: 12%; top: 10%; }
#music		{ left: 12%; top: 20%; }
#music1		{ left: 16%; top: 25%; }
#guests		{ left: 18%; top: 35%; }
#yt			{ left: 12%; top: 40%; }
#yt1		{ left: 16%; top: 45%; }
#rpg		{ left: 12%; top: 53%; }
#rpg1		{ left: 16%; top: 58%; }
#rpg2		{ left: 18%; top: 64%; }
#games		{ left: 12%; top: 69%; }
#games1		{ left: 16%; top: 74%; }

/* bouton close */
.nav img:active {
	transform: scale(1);
}

#close {
    position: fixed;
    top: 2%;
    right: 2%;
	height: auto;
	width: 3vw;
	cursor: alias;
}