@font-face{font-family: navigation; src: url(font/InknutAntiqua-SemiBold.ttf);}

main{
    background: linear-gradient(180deg, rgba(82, 219, 60, 0.3) 0%, rgba(255, 200, 57, 0.3) 32.29%, rgba(165, 60, 202, 0.3) 61.98%, rgba(151, 71, 204, 0.3) 65.62%, rgba(40, 154, 218, 0.3) 93.75%), #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2rem;
}

main h1{
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-size: 3rem;
    font-family: navigation;
    
}

#carte{
    border: 1px solid black;
    width: 70%;
    display: flex;
    background-color: black;
    margin-bottom: 2rem;
}

#fabula{
    width: 100%;
}

#carte .logo{
    position: absolute;
    width: 4.2%;
}

#pirate{
    margin-left: 3%;
    margin-top: 3%;
}

#cloakhoover{
    margin-left: 18%;
    margin-top: 1.5%;
}

#atolcost{
    margin-left: 30%;
    margin-top: 2.5%;
}

#eugenium{
    margin-left: 41.5%;
    margin-top: 5%;
}

#manicrome{
    margin-left: 54%;
    margin-top: 2.5%;
}

#mysandria{
    margin-left: 3.4%;
    margin-top: 11.5%;
}

#westphalian{
    margin-left: 37%;
    margin-top: 16%;
}

#celestia{
    margin-left: 15%;
    margin-top: 25%;
}

#pacifia{
    margin-left: 33%;
    margin-top: 25%;
}

#fort-brillant{
    margin-left: 54%;
    margin-top: 24%;
}

#loisiria{
    margin-left: 27%;
    margin-top: 36%;
}

#historian{
    margin-left: 42.5%;
    margin-top: 38.5%;
}

#nostalgian{
    margin-left: 60%;
    margin-top: 42%;
}

#shanna{
    margin-left: 10%;
    margin-top: 47%;
}

#lagartha{
    margin-left: 32%;
    margin-top: 48%;
}

#megara{
    margin-left: 42%;
    margin-top: 47%;
}

#bianca{
    margin-left: 59%;
    margin-top: 48%;
}

#aurore{
    position: absolute;
    width: 2%;
    margin-left: 55%;
    margin-top: 17%;
}

/* -------------------------------------------------------------------------------------- */



#rubriques{
    width: 70%;
}

.etages{
    display: flex;
    justify-content:space-around;
    margin-top: 3rem;
}

.rubrique img{
    width: 20rem;
    border: 1px solid black;
}

#presentation{
    background-image: url(/images/miniatures/video\ 1.png);
    background-size: cover;
}

#record{
    background-image: url(/images/miniatures/seance\ 1.png);
    background-size: cover;
}

#personnages{
    background-image: url(/images/autres/Tableau_APF.png);
    background-size: cover;
}

#commerce{
    background-image: url(/images/autres/autre.png);
    background-size: cover;
}

.blanc{
    width: inherit;
    height: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 85.42%), url(image.png);
    width: 25rem;
    height: 13rem;
    display: flex;
    justify-content: center;
    align-items:flex-end;
    padding: 0.2rem;
    border: 1px solid black;
}

a{text-decoration: none;color: black;}

.rubrique h2{font-family: navigation;}


/* -------------------------- */

.persos{
    display: none;
    position: absolute;
    height: 4rem;
    padding: 0rem 1rem 0rem 1rem;
    align-items: center;
    border: 2px solid black;
}

.persos img{
    width: 3rem;
    height: 3rem;
    border: 1px solid black;
    margin: 2px;
}

#pCloakhoover{
    background-color: rgb(230, 151, 60);
    margin-left: 13.8%;
    margin-top: -1.5%;
}


#pAtolcost{
    background-color: rgb(65, 75, 212);
    margin-left: 25.5%;
    margin-top: -0.6%;
}

#pEugenium{
    background-color: rgb(141, 63, 204);
    margin-left: 39.8%;
    margin-top: 2.1%;
}

#manicrome{
    margin-left: 54%;
    margin-top: 2.5%;
}

#pMysandria{
    background-color: rgb(240, 89, 220);
    margin-left: 0.3%;
    margin-top: 9%;
}

#pWestphalian{
    background-color: rgb(204, 201, 8);
    margin-left: 32.5%;
    margin-top: 13.5%;
}

#pCelestia{
    background-color: rgb(68, 153, 42);
    margin-left: 10.58%;
    margin-top: 22.5%;
}

#pPacifia{
    background-color: rgb(48, 87, 97);
    margin-left: 30.1%;
    margin-top: 22.3%;
}

#pFort-brillant{
    background-color: rgb(71, 20, 20);
    margin-left: 49.6%;
    margin-top: 21.4%;
}

#pLoisiria{
    background-color: rgb(63, 194, 211);
    margin-left: 22.45%;
    margin-top: 33.4%;
}

#historian{
    margin-left: 42.5%;
    margin-top: 38.5%;
}

#nostalgian{
    margin-left: 60%;
    margin-top: 42%;
}

#shanna{
    margin-left: 10%;
    margin-top: 47%;
}

#lagartha{
    margin-left: 32%;
    margin-top: 48%;
}

#megara{
    margin-left: 42%;
    margin-top: 47%;
}

#bianca{
    margin-left: 59%;
    margin-top: 48%;
}

#aurore{
    position: absolute;
    width: 2%;
    margin-left: 45%;
    margin-top: 20%;
}