/*
Nicolas Fleurent
Laboratoire sur les tableaux
2022-10-20
*/

/*J'ai pris ma police sur squirrel : https://www.fontsquirrel.com/ */
@font-face{
    font-family: Kaushan;
    src: url(../fonts/kaushan-script/KaushanScript-Regular.otf);
}

h1{
    color: white;
    text-align: center;
    text-shadow: 2px 2px 5px Black;
    background-image: url(../images/japBanniere.jpg);
    background-size: cover;
    padding: 50px;
}

h1 span, h1 b{
    color: black;
    text-shadow: 2px 2px 5px purple;
    font-family: Kaushan;
}

h1 span{
    font-size: 50px;
}

h1 b{
    font-size: 36px;
}

table{
    border: 5px red;
    border-style: ridge;
    border-collapse: collapse;
    margin-bottom: 10px;
}

th, td{
    border: 1px solid black;
    padding: 5px;
    text-align: center;
}

tr:nth-child(odd){
    background-color: pink;
}

img{
    width: 150px;
    display: block;
    margin: auto;
}

div{
    width: 500px;
    padding: 50px 100px 15px 100px;
    border: 2px red outset;
    border-radius: 15px;
    text-align: center;
    margin: auto;
    box-shadow: -5px 5px 5px purple;
}

div span{
    font-weight: bold;
}

.shadow{
    text-decoration-line: none;
}

.shadow:link{
    color: black;
}

.shadow:hover, .shadow:focus{
    font-family: Kaushan;
    font-size: 20px;
    color: black;
    text-shadow: 2px 2px 5px purple;
}

.shadow:visited{
    color: black;
}

nav a{
    margin: auto;
    padding: 5px;
    text-align: center;
    border: 5px pink outset;
    background: pink;
    border-radius: 5px;
    text-decoration-line: none;
}

nav a:link{
    color: black;
}

nav a:hover, nav a:focus{
    border: 5px red outset;
    background: red;
    border-radius: 5px;
}

nav a:active{
    border: 5px red inset;
    background: red;
    border-radius: 5px;
}

nav a:visited{
    color: black;
}

/******************************************************************************************************
Petite section que j'ai fait en extra pour m'amuser suite à un test qui n'a pas marcher
Update : Finalement ça fonctionne! Le text apparait parfois mais en général il est masquer et clickable
*******************************************************************************************************/
.transparent{
    text-decoration-line: none;
    padding-top: 50px;
    padding-bottom: 50px;
}

.transparent:link{
    color: black;
    padding-top: 50px;
    padding-bottom: 50px;
}

.transparent:hover{
    color: transparent;
    padding-top: 50px;
    padding-bottom: 50px;
}

.transparent:visited{
    color: black;
    padding-top: 50px;
    padding-bottom: 50px;
}

#berserk:hover{
    background-image: url(../images/extra/fondBerserk.webp);
    background-size: 95px;
    height: 125px;
    width:  87px;
    font-size: 87px;
}

#gigant:hover{
    background-image: url(../images/extra/fondGigantomachia.jpg);
    background-size: 95px;
    height: 125px;
    width:  87px;
    font-size: 105px;
}


#jap:hover{
    background-image: url(../images/extra/fondJapan.jpg);
    background-size: 95px;
    height: 120px;
    width:  87px;
    font-size: 85px;
}

#ohroh:hover{
    background-image: url(../images/extra/fondOhRoh.jpg);
    background-size: 95px;
    height: 120px;
    width:  87px;
    font-size: 85px;
}

#op:hover{
    background-image: url(../images/extra/fondOnePiece.jpg);
    background-size: 95px;
    height: 135px;
    width:  87px;
    font-size: 50px;
}

#ez:hover{
    background-image: url(../images/extra/fondEdenZero.jpeg);
    background-size: 95px;
    height: 135px;
    width:  87px;
    font-size: 85px;
}

#ft:hover{
    background-image: url(../images/extra/fondFairyTail.jpg);
    background-size: 95px;
    height: 135px;
    width:  87px;
    font-size: 85px;
}

#ft100:hover{
    background-image: url(../images/extra/fondFairyTail100.jpg);
    background-size: 95px;
    height: 135px;
    width:  87px;
    font-size: 85px;
}

#stone:hover{
    background-image: url(../images/extra/fondDrStone.jpg);
    background-size: 95px;
    height: 135px;
    width:  87px;
    font-size: 85px;
}

#origin:hover{
    background-image: url(../images/extra/fondOrigin.jpg);
    background-size: 95px;
    height: 120px;
    width:  87px;
    font-size: 85px;
}

#skr:hover{
    background-image: url(../images/extra/fondSunKenRock.jpg);
    background-size: 95px;
    height: 120px;
    width:  87px;
    font-size: 85px;
}

#db:hover{
    background-image: url(../images/extra/fondDragonBall.jpg);
    background-size: 95px;
    height: 135px;
    width:  87px;
    font-size: 85px;
}

#slump:hover{
    background-image: url(../images/extra/fondDrSlump.jpg);
    background-size: 95px;
    height: 135px;
    width:  87px;
    font-size: 85px;
}