@font-face{font-family: navigation; src: url(font/InknutAntiqua-SemiBold.ttf);}
@font-face {font-family: texte;src: url(font/InriaSans-Regular.ttf);}
@font-face{font-family: anti; src: url(font/DEMON_NI.TTF);}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#Hivrian{
    background: linear-gradient(180deg, rgba(78, 138, 255, 0.5) 0%, rgba(78, 234, 255, 0) 100%), #FFFFFF;    
}

#Printania{
    background: linear-gradient(180deg, rgba(22, 186, 39, 0.5) 0%, rgba(182, 219, 186, 0.5) 100%), #FFFFFF;
}

#Automaton{
    background: linear-gradient(180deg, rgba(100, 22, 179, 0.5) 31.77%, rgba(156, 78, 255, 0) 100%), #FFFFFF;
}

#Deseter{
    background: linear-gradient(180deg, rgba(250, 227, 26, 0.5) 6.77%, rgba(78, 234, 255, 0) 100%), #FFFFFF;
}

#Pirate{
    background-image: url(/images/autres/fondmer.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 80%;
}

#AntiMonde{
    background-image: url(/images/autres/anti-fond.png);
    background-repeat: no-repeat;
    background-size: cover;
}

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


video{
    width: 60%;
    margin-bottom: 4rem;
    border: 1px solid black;
}

main h2{
    font-size: 2rem;
    font-family: texte;
    margin-bottom: 1rem;
    font-weight: bold;
}

.pays{
    width: 70%;
    background: #F1F1F1;
    border: 1px solid #000000;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

#Anti-Monde{
    background: rgb(0, 0, 0, 0.7);
    border: none;
}

.nom{
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: space-around;
    width: 70%;
    margin: 1rem;
}

.nom img{
    width: 8rem;
    height: 8rem;
}

.nom h2{
    font-size: 2.5rem;
    font-family: navigation;
}

.region{
    width: 90%;
    height: 70vh;
    align-self: center;
    border: 1px solid black;
    background-size: cover;
}

.pays h3{
    font-size: 1rem;
    font-family: navigation;
    margin: 1rem 0rem 0rem 3rem;
}

.pays p{
    font-size: 1rem;
    font-family: texte;
    margin: 1rem 3rem 1rem 3rem;
    text-align: justify;
}

.personnages{
    align-self: center;
    width: 80%;
    border: 1px solid black;
    margin-bottom: 3rem;
}

#persosFB{
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.6) 17.71%, rgba(255, 38, 38, 0.6) 100%), #FFFFFF;
}

#persosW{
    background: linear-gradient(270deg, rgba(185, 59, 5, 0.6) 17.71%, rgba(242, 206, 79, 0.6) 100%), #FFFFFF;
}

#persosN{
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.6) 17.71%, rgba(255, 255, 255, 0.6) 100%), #FFFFFF;
}

#persosH{
    background: linear-gradient(270deg, rgba(10, 179, 190, 0.6) 0%, rgba(14, 84, 34, 0.6) 100%), #FFFFFF;
}

#persosC{ 
    background: linear-gradient(270deg, rgba(135, 147, 137, 0.6) 30.73%, rgba(0, 78, 8, 0.6) 77.6%), #FFFFFF;
}

#persosL{
    background: linear-gradient(270deg, rgba(55, 216, 238, 0.6) 17.71%, rgba(227, 188, 48, 0.6) 66.67%), #FFFFFF;
}

#persosM{
    background: linear-gradient(180deg, #FE0000 16.66%,#FD8C00 16.66%, 33.32%,#FFE500 33.32%, 49.98%,#119F0B 49.98%, 66.64%,#0644B3 66.64%, 83.3%,#C22EDC 83.3%);
}

#persosP{
    background: linear-gradient(270deg, rgba(70, 69, 68, 0.6) 14.06%, rgba(16, 90, 158, 0.6) 100%), #FFFFFF;
}

#persosAl{
    background: linear-gradient(270deg, rgba(101, 101, 101, 0.6) 14.06%, rgba(5, 3, 133, 0.6) 88.02%), #FFFFFF;
}

#persosCH{
    background: linear-gradient(270deg, rgba(130, 86, 0, 0.6) 31.77%, rgba(250, 255, 13, 0.6) 100%), #FFFFFF;
}

#persosE{
    background: linear-gradient(270deg, rgb(36, 122, 125) 0%, rgb(37, 87, 65) 100%), #FFFFFF;
}

#persosMC{
    background: linear-gradient(270deg, rgba(174, 174, 174, 0.6) 14.06%, rgba(57, 57, 57, 0.6) 100%), #FFFFFF;
}

#persosS{
    background: linear-gradient(270deg, rgba(5, 94, 3, 0.6) 14.06%, rgba(78, 214, 66, 0.6) 100%), #FFFFFF;
}

#persosLa{
    background: linear-gradient(270deg, rgba(254, 130, 77, 0.6) 14.06%, rgba(234, 199, 77, 0.6) 100%), #FFFFFF;
}

#persosMe{
    background: linear-gradient(270deg, rgba(131, 53, 231, 0.6) 0%, rgba(45, 2, 138, 0.6) 100%), #FFFFFF;
}

#persosB{
    background: linear-gradient(270deg, rgba(48, 110, 230, 0.6) 14.06%, rgba(9, 216, 216, 0.6) 100%), #FFFFFF;
}

#persosP{
    background: linear-gradient(270deg, rgba(1, 98, 242, 0.6) 0%, rgba(6, 159, 169, 0.6) 100%), #FFFFFF;
}

.ligne{
    display: flex;
    justify-content: space-between;
    margin: 2rem 2rem 2rem 2rem;
}

.ligne img{
    width: 100px;
    height: 100px;
}

.personnage{
    display: flex;
    align-items: center;
}

.personnageD{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ligneD{
    display: flex;
    justify-content: center;
    margin: 2rem 2rem 2rem 2rem;
}

.ligneD img{
    margin-top: 0.5rem;
    width: 100px;
    height: 100px;
}

.personnages h4{
    text-align: center;
    margin: 2rem 0rem 0rem 0rem ;
    font-size: 2rem;
    font-family: navigation;
}

.personnages h5{
    font-family: texte;
    font-weight: bold;
    margin: 0rem 1rem 0rem 1rem;
    font-size: 1.3rem;
}

a{
    text-decoration: none;
    color: #000000;
}

#Camellia{border: 0.1rem solid #C80C0C;}
#Qassius{border: 0.1rem solid #000000;}
#Xavier{border: 0.1rem solid #3A0D83;}
#Voron{border: 0.1rem solid #5c0606;}

#winning{border: 0.1rem solid #b8701e;}
#outlaw{border: 0.1rem solid #770000;}
#lawful{border: 0.1rem solid #cacac8;}
#rick{border: 0.1rem solid #8d5101;}

#inconnu{border: 0.1rem solid black;}
#charlie{border: 0.1rem solid white;}

#Rupert{border: 0.1rem solid white;}
#Kron{border: 0.1rem solid rgb(112, 0, 0);}
#Cladwell{border: 0.1rem solid rgb(75, 71, 71);}
#Bertier{border: 0.1rem solid darkgreen;}

#presidente{border: 0.1rem solid rgb(204, 54, 43);}
#pierre{border: 0.1rem solid rgb(184, 117, 117)}
#butch{border: 0.1rem solid rgb(71, 90, 43)}
#bella{border: 0.1rem solid rgb(221, 116, 195)}

#Olympe{border: 0.1rem solid rgb(182, 76, 159);}
#Milena{border: 0.1rem solid rgb(65, 53, 78);}
#Miggu{border: 0.1rem solid #225a20;}

#Mcdwell{border: 0.1rem solid rgb(230, 133, 6);}
#Nyo{border-top: 0.1rem solid #D66BD8;border-left: 0.1rem solid #D66BD8;border-bottom: 0.1rem solid #3f2709;border-right: 0.1rem solid #3f2709;}
#Stanford{border: 0.1rem solid rgb(29, 13, 2);}
#Ryan{border: 0.1rem solid rgb(65, 2, 2);}

#Major{border: 0.1rem solid rgb(1, 1, 146);}
#Silver{border: 0.1rem solid rgb(153, 214, 230);}
#General{border: 0.1rem solid rgb(34, 45, 80);}
#Altara{border: 0.1rem solid rgb(218, 89, 175)}

#Roswell{border: 0.1rem solid #000000;}
#mcgoof{border: 0.1rem solid rgb(148, 94, 44);}
#albert{border: 0.1rem solid goldenrod;}
#foster{border: 0.1rem solid #5c339e;}

#naomi{border: 0.1rem solid rgb(28, 177, 214);}
#ian{border: 0.1rem solid rgb(9, 128, 72);}
#tamara{border: 0.1rem solid rgb(0, 70, 0);}

#dameP{border: 0.1rem solid rgb(21, 231, 1);}
#dameE{border: 0.1rem solid rgb(252, 215, 94);}
#dameA{border: 0.1rem solid rgb(102, 3, 168);}
#dameH{border: 0.1rem solid rgb(28, 107, 255);}

#barbe-bleue{
    border: 0.15rem solid rgb(32, 91, 126);
    width: auto;
    height: auto;
    border-radius: 100px;
    margin-bottom: 0.5rem;
}






#AntiMonde h1{
    color: #AE0404;
    font-family: anti;
    font-size: 5rem;
    margin-top: 6rem;
    margin-bottom: 1rem;
}

#AntiMonde h3{
    color: #AE0404;
}

#AntiMonde p{
    color: #AE0404;
}

#persosA{
    width: 95%;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.6) 17.71%, rgba(102, 0, 0, 0.6) 100%), #FFFFFF;
    margin-bottom: 0.3rem;
}

.ligneA{
    display: flex;
    justify-content: space-around;
}

.personnageA{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
}

.personnageA h5{
    font-size: 1.1rem;
    margin: 0.3rem 0rem 0.6rem 0rem;
}

.personnageA img{
    border-radius: 100px;
    border: 0.1rem solid #000000;
}

#unw{
    border-radius: 30%;
}