/*résolution 1024*768*/

/*police d'écriture personnalisée'*/
@font-face {
    font-family: "Ambient";
    src: url("../../font/ambient.ttf");
}

html {
    position: relative;
    min-height: 100%;
    /*désactive le scrolling*/
    overflow: hidden;
    /*change le curseur utilisé sur le site*/
    cursor: url(../../img/cursor.png), pointer;
}

body {
    text-align: center;
    margin-bottom: 3em;
    /* Margin bottom by footer height */
    /*image de fond du corps de la page*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-image: url(../../img/fond.jpg);
    /*utilisation de la police dans tous les éléments du body*/
    font-family: "Ambient", cursive;
}

img[usemap], map area {
    outline: none;
    /*désactivation du changement de pointeur quand il est sur la zone cliquable*/
    cursor: url(../../img/cursor.png), pointer;
}

a {
    outline: none;
}

a:hover {
    text-decoration: none;
}

/*gestion de la taille des éléments images ou texte*/
#bgImg {
    max-width: 50em;
}

.levelMainText {
    font-size: 2em;
}

.levelSecondaryText {
    font-size: 1.4em;
}

.imageNiveaux {
    max-height: 450px;
}

#logo {
    max-height: 5em;
}

#aiguille {
    max-height: 2em;
    position: relative;
    z-index: 1;
    margin-left: -4.2em;
    margin-bottom: -0.6em;

    -webkit-animation: rotation 30s infinite linear;
}

/*classe permettant d'arreter l'animation de l'aiguille dans animations.css'*/
#aiguille.off {
    -webkit-animation-name: none;
}

/*permet de fixer la taille maximale de l'image à celle du parent, en l'occurence, le nav*/
.imgTimer {
    max-height: inherit;
}

#timer {
    font-size: larger;
    font-weight: bolder;
}

/*disposition et taille des éléments de choix de personnage*/
#characterChoice {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#characterChoiceBottom {
    /*marge négative pour permettre la superposition en positionnement relatif*/
    margin-top: -1.1em;
}

.characterImgTop {
    position: relative;
    max-width: 15em;
    z-index: 1;
}

.characterImgBottom {
    max-width: 15em;
}

.flecheImg {
    max-height: 5em;
}

/*style de la barre de navigation*/
nav {
    background-color: white;
    max-height: 7em;
    position: fixed;
}

/*placement absolu de l'élément play, texte ou bouton selou le moment du jeu'*/
#play {
    max-width: 10em;
    position: absolute;
    top: 84%;
    left: 86%;
    transform: translate(-50%, -50%);
}

/*style du pied de page*/
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 3em;
    line-height: 3em;
    background-color: #f5f5f5;
    font-family: Montserrat, sans-serif;
}

/*classe permettant de cacher et afficher les différents niveaux du jeu*/
.hidden {
    display: none;
}

/*mise en forme des formulaires et de leurs éléments*/
form {
    text-align: center;
}

input[type=text], [type=email] {
    text-align: center;
    background-color: #00ffce;
    border: none;
    border-radius: 2em 0;
    outline: none;
    font-size: 2em;
}