/*CSS pour la page index.html*/

/*Custom fonts utilisés*/
@font-face {
    font-family: dsStyle;
    src: url("../media/fonts/DS_Font/Nintendo-DS-BIOS.ttf") format("truetype");
}

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

/*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;
}

/*Paramètres d'une box basique pour sa taille et son emplacement*/
.box {
    background:url(../media/pictures/placeholder.png);
    background-size:cover;
    margin: 3px;
    box-sizing: border-box;
    border-width: 2px;
    border-style: outset;
    border-radius: 3px;
    position: relative;
    overflow: scroll;
    scrollbar-width: none;
}

/*Boite Vide*/
.prettyBoxF {
    background: transparent;
    border: none;
}

/*Boite DS*/
.prettyBoxG {
    border-width: 7px;
    border-style: solid;
    border-image: url(../media/pictures/DSBox.png) 7 fill round;
    background: none;
    padding: 10px !important;
    font-family : dsStyle;
}

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

/*Boite Main (Centre de la page)*/
.main {
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;

    font-size: 30px;
    color: white;
    text-align: justify;
}

/*Différents éléments nécessaire au marquee*/

/*Fait disparaitre les éléments quant il sortent de la boite*/
.marqueeContainer {
    overflow: hidden;
}

/*Marquee de base*/
.marquee {
    display: inline-block;
    animation: marquee 9s linear infinite;
}

/*Marquee mais dans le sens inverse*/
.marqueeInvert {
    display: inline-block;
    animation: marquee 9s linear infinite reverse;
}

/*Animation du marquee*/
@keyframes marquee {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
/*Différents éléments nécessaire au marquee*/



/*Force le redimenssionnement pour les vieux boutons*/
/*Permet d'être applé d'un div et d'être appliqué à toutes les balises img, évite des répétitions dans l'HTML*/
.oldButton > img {
    height: 31px;
    width: 88px;
}

/*Bouton style DS*/
a.DSbutton {
    display:inline-block;
    padding: 0 .7rem;
    height: 2.5rem;
    width: 100px;
    align-content: center;
    text-align: center;
    color: #000;
    text-decoration: none;
    background-image: url(../media/pictures/DSbutton.png);
    background-size: 100% 100%;
    font-family : dsStyle;
}
a.DSbutton:hover {
    background-image: url(../media/pictures/DSButtonPress.png);
}