/*Dédié a un nouveau style général du site*/
/*Encore en cours de rédaction*/

/*Définition de couleur custom*/
/*Couleur avec -a indique qu'elles sont transparentes*/
:root{
    --cafe-noir: rgb(81, 79, 79);
    --off-white: rgb(255, 249, 239);

    --cambridge-clear-a: rgba(55, 174, 138,0.85);
    --cambridge-dark-a: rgba(18, 186, 136,0.85);
    --cafe-noir-a: rgba(81, 79, 79,0.85);
}

/*Paramètres du body, définit également le fond de l'écran principal*/
body{
    background: url("../media/video/RoverBus.png");
    background-size:cover;
    color:white;
    font-family: 'Ycomputer-Regular';
    font-size: 13px;
    text-shadow: 0 0 2px black;
}

/*Permet de mettre des bandes rétros en bas du sites, oui c'est débiles mais c'est génial*/
#footer {
    width: 100%;
    margin: 0 auto;
    height: 60px;
    display: flex;
    flex-direction: row;
    bottom: 0;
    position: absolute;
    justify-content: space-between;
}


/*Centre une boite au milieu de la page sur une largeur de 1300px (Non responsive)*/
#wrapper{
    margin:auto;
    position:relative;
    width:1300px;
}

/*Crée une boite qui limiteras les boite en son intérieur*/
#flex-wrapper {
    width: 1200px;
    margin: auto !important;
}

/*Permet de créer une boite permettant de manière flexible (flex) plusieurs autres boites pour créer comme un grillage s'auto redimensionnant*/
#corps-flexible {
    display: flex;
    flex-direction: row;
    gap: 3px;
}

/*Permet de remplir l'espace restant lorsqu'un élément est dans un conteneur flex*/
.flexGrow {
    flex-grow:1
}

/*Paramètres d'une box basique pour sa taille et son emplacement*/
.box {
    margin-top: 3px;
    box-sizing: border-box;
    border-width: 2px;
    border-style: outset;
    border-radius: 3px;
    position: relative;
}

/*Paramètre d'une box pour son style (Fond, texte, etc)*/
.prettyBoxA {
    background: linear-gradient(var(--cambridge-clear-a),var(--cafe-noir-a)), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38) 3px, rgba(0, 0, 0,0) 1px, rgba(0,0,0,0) 5px);
    box-shadow: inset 0 7px 9px -7px rgba(255, 255, 255,0.2), inset 0 -7px 9px -7px var(--cafe-noir);
    border-color: var(--cafe-noir);
    color: var(--off-white);
}

.prettyBoxB {
    background: linear-gradient(rgb(28, 96, 75),rgba(52, 18, 94, 0.85)), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38) 3px, rgba(0, 0, 0,0) 1px, rgba(0,0,0,0) 5px);
    box-shadow: inset 0 7px 9px -7px rgba(255, 255, 255,0.2), inset 0 -7px 9px -7px var(--cafe-noir);
    border-color: var(--cafe-noir);
    color: var(--off-white);
}

/*Paramètre pour ajouter du padding en interne de la boite pour rendre encore plus joli*/
.paddington {
    padding: 9px;
}

/*Boite principale de la page, son corps en somme*/
.corps {}

.textCenter { /*Place un block de texte au centre*/
    text-align: center;
}
/*Text général pour le séparer du text du body*/
.generalText{
    font-size: 14px;
    text-shadow: 0 0 0;
}

/*Permet de centrer un bloc p tout en gardant les espaces (Equivalent de la balise pre mais centré sans casser un ASCII art)*/
.centerPre{
    display: flex;
    justify-content: center;
    font-family: monospace;
    white-space: pre;
}

.monospace{
    font-family: monospace;
}

/*Pour rendre une boite "flexible"*/
.flex {
    display: flex;
    flex-direction: row;
    gap: 3px;
}

/*Boite Main*/
.main {
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

/*Animation lorsqu'un objet est survolé*/
.shake{
    transition: all .2s;
}
.shake:hover{
    scale:1.1;
    z-index:10000;
}
/*Animation lorsqu'un objet est survolé*/

.ACbubble {
    visibility: hidden;
}

/* Toggle this class - hide and show the popup */
.show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation:fadeIn 1s;}

/* Add animation (fade in the popup) */
@-moz-keyframes fadeIn {
    from {scale: 0;}
    to {scale: 1;}
}

@keyframes fadeIn {
    from {scale: 0;}
    to {scale:1 ;}
}

/* Toggle this class - hide and show the popup */
.hide {
    visibility: visible;
    -webkit-animation: fadeOut 1s;
    animation:fadeOut 1s;}

    /* Add animation (fade in the popup) */
    @-moz-keyframes fadeOut {
        from {scale: 1;}
        to {scale: 0;}
    }

    @keyframes fadeOut {
        from {scale: 1;}
        to {scale:0;}
    }

h4 {
    text-align: center;
}