@font-face {
    font-family: 'Alessandra';
    src: url('../assets/font/Alessandra.ttf');
}

@font-face {
    font-family: 'Minecraftia';
    src: url('../assets/font/Minecraftia.ttf');
}

@font-face {
    font-family: 'Fipps';
    src: url('../assets/font/Fipps.otf');
}

@font-face {
    font-family: 'Pixeled';
    src: url('../assets/font/Pixeled.ttf');
}

@font-face {
    font-family: 'Plume';
    src: url('../assets/font/Plume.ttf');
}

@font-face {
    font-family: 'PWScratched';
    src: url('../assets/font/PWScratched.ttf');
}

@font-face {
    font-family: 'CoalhandLuke';
    src: url('../assets/font/CoalhandLuke.ttf');
    src: url('../assets/font/CoalhandLuke.otf');
}

html, body {
    background: #000000;
    padding: 0px;
    margin: 0px;
    height: 95vh;
    width: 100%;
    text-align: center;
}

canvas {
    margin-top: auto;
    margin-bottom: auto;
}

h1 {
    color: white;
    font-family: 'Fipps';
    letter-spacing: .2em;
    text-shadow: 6px -2px 3px rgba(150, 150, 150, 1);
}

.clues, .bossFight {

    background-position: center;
    background-repeat: no-repeat;
    height: 72vh;
    position: absolute;
    /*display: none;*/
    flex-direction: column;
    text-align: center;
}

.clues {
    background-image: url('../assets/img/parcheminHTML.png');
    background-size: contain;
    color: black;
    display: none;
    width: 20%;
    right: 1%;
    justify-content: center;
    font-size: 2em;
}

.bossFight {
    background-image: url('../assets/img/fenetre-bossfight.png');
    background-size: cover;
    font-family: 'Minecraftia';
    color: white;
    display: none;
    width: 22%;
    right: 0%;
    z-index: 100;
}

.clues p {
    font-family: 'Alessandra';
    margin-left: 10%;
    margin-right: 10%;
}

.bossFight .slides {
    
    font-size: 10px;
    text-align: left;
    margin-right: 10%;
    margin-left: 10%;
    /*margin-top: 75%;*/
    position: absolute;
    top: 40%;
    
    letter-spacing: 0.2em;
}

#next {
    font-size: 12px;
    color: white;
    position: absolute;
    bottom: 5%;
    right: 20%;
    width: 35%;
    height: 10%;
    z-index: 100;
}
#next:hover {
    cursor: pointer;
}

.slides {
    display: none;
}

#systRep {
    display: none;
    position: absolute;
    bottom: 20%;
    right: 5%;
    width: 90%;
    height: 10%;
}
#systRep input {
    width: 75%;
}
#systRep button {
    width: 25%;
}

#mon_carnet {
    position: absolute;
    left: 0%;
    width: 22%;
    height: 72vh;
    display: none;
}

#mon_carnet svg {
    position: relative;
    top: 7%;
}

#indice_1, #indice_2, #indice_3, #indice_4, #indice_5 {
    display: none;
}

#manageMusic {
	position: absolute;
	top: 3%;
	left: 3%;
	visibility: hidden;
}