@font-face {
    font-family: "Avenir Black";
    src: url('../fonts/Avenir-Black.woff') format('woff'),
 url('../fonts/Avenir-Black.woff2') format('woff2'),
 url('../fonts/Avenir-Black.eot'),
 url('../fonts/Avenir-Black.otf'),
 url('../fonts/Avenir-Black.ttf');
}

@font-face {
    font-family: "Zekton";
    src: url('../fonts/zekton-rg.woff') format('woff'),
 url('../fonts/zekton-rg.woff2') format('woff2'),
 url('../fonts/zekton-rg.eot'),
 url('../fonts/zekton-rg.otf'),
 url('../fonts/zekton-rg.ttf');
}

@font-face {
    font-family: "Street Fighter";
    src: url('../fonts/Street-Fighter.woff') format('woff'),
     url('../fonts/Street-Fighter.woff2') format('woff2'),
     url('../fonts/Street-Fighter.eot'),
     url('../fonts/Street-Fighter.otf'),
     url('../fonts/Street-Fighter.ttf');
}

@font-face {
    font-family: "Cyberverse";
    src: url('../fonts/Cyberverse.woff') format('woff'),
        url('../fonts/Cyberverse.woff2') format('woff2'),
        url('../fonts/Cyberverse.eot'),
        url('../fonts/Cyberverse.otf'),
        url('../fonts/Cyberverse.ttf');
}

@keyframes arriveeHaut {
    0% {
        font-size: 0;
    }
}

@keyframes arriveeCote {
    0% {
        opacity: 0;
        left: -20%;
        font-style: italic;
    }
    25% {
        opacity: 1;
        left: 2%;
        font-style: italic;
    }
    100% {
        left: 0;
    }
}

@keyframes fondu {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    text-align: center;
    min-height: 100%;
}

.selection {
    background-image: url(../fonds/chateaudebowser.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #ffffff;
}

.arene {
    background-image: url(../fonds/arenedebowser.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #ffffff;
}

table, tr, td, th {
    border: 0.0625rem solid #000000;
}
table {
    border-collapse: collapse;
}

table, header h4 {
    margin: 0 auto;
}

header, th, strong, fieldset legend, .persoinfos, .tours {
    font-family: "Avenir Black", "Verdana", sans-serif;
}

td, td a, select[name="persos1"], select[name="persos2"], input, label, td .nom_perso, p, .retour, .tentatives, .stop, #prev, fieldset .supprimer, fieldset .regenerer {
    font-family: "Zekton", "Verdana", sans-serif;
}

td, th {
    padding: 2.5rem;
}

tr th {
    background-color: rgba(255,255,255,0.5);
    color: #000000;
}


header h1 {
    font-size: 5rem;
    font-family: "Street Fighter";
    -webkit-animation: arriveeHaut 1.5s;
    animation: arriveeHaut 1.5s;
}

header h1::before, header h1::after {
    content:"";
    display: inline-block;
    width: 6.25rem;
    height: 15rem;
    background-image: url(../fonds/kaimanu_logo_flames_final_3.gif);
    background-repeat: no-repeat;
    background-size: contain;
    animation: fondu 1s;
}

header h4 {
    width: 70%;
    position: relative;
    font-size: 1.5rem;
    -webkit-animation: arriveeCote 1.5s;
    animation: arriveeCote 1.5s;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

section, form[action="combat.php"], form[action="creation_personnage.php"] {
    -webkit-animation: fondu 1.5s;
    animation: fondu 1.5s;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

.image_perso {
    background-size: cover;
    background-repeat: no-repeat;
}

tr:nth-child(2n + 1) {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(111,110,113,0.3)), to(#d7af64));
    background-image: linear-gradient(to right, rgba(111,110,113,0.3), #d7af64);
}

tr:nth-child(2n) {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(215,175,100,0.3)), to(#6f6e71));
    background-image: linear-gradient(to right, rgba(215,175,100,0.3), #6f6e71);
}

tr td a {
    display: block;
    text-decoration: none;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    background-color: transparent;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

tr td .modifier {
    border: 0.0625rem solid #ffff00;
    color: #ffff00;
}

tr td .modifier:hover, tr td .modifier:focus, tr td .modifier:active {
    color: #000000;
    background-color: #ffff00;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

tr td .supprimer, fieldset .supprimer {
    border: 0.0625rem solid #ff0000;
    color: #ff0000;
}

fieldset .supprimer, fieldset .regenerer {
    display: inline-block;
    text-decoration: none;
    width: 25%;
    font-size: 2rem;
    padding: 2rem;
}

tr td .supprimer:hover, tr td .supprimer:focus, tr td .supprimer:active, fieldset .supprimer:hover, fieldset .supprimer:focus, fieldset .supprimer:active {
    color: #000000;
    background-color: #ff0000;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

tr td .regenerer, fieldset .regenerer {
    border: 0.0625rem solid #00ff00;
    color: #00ff00;
}

tr td .regenerer:hover, tr td .regenerer:focus, tr td .regenerer:active, fieldset .regenerer:hover, fieldset .regenerer:focus, fieldset .regenerer:active {
    color: #000000;
    background-color: #00ff00;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

fieldset {
    width: 50%;
    margin: 0 auto;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top-color: #ffffff;
}

fieldset legend {
    font-size: 2rem;
}

select[name="persos1"], select[name="persos2"], input{
    border: none;
    border-radius: 5%;
    width: 50%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.4rem;
}

select:focus + span::after, input:focus + span::after{
    content: url('../fonds/duel.png');
     position: absolute;
}

form[action="combat.php"] strong, label {
    font-size: 1.4rem;
}

input[type="submit"]{
    border: 0.0625rem solid #ffffff;
    border-radius: 0;
    background-color: transparent;
    color: #ffffff;
    transition-duration: 0.5s;
}

input[type="submit"]:hover {
    cursor: pointer;
}

input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active {
    color: #000000;
    background-color: #ffffff;
    transition-duration: 0.5s;
}

input[type="button"] {
    font-size: 1.3rem;
    background-color: transparent;
    border: 0.0625rem solid #ffffff;
    color: #ffffff;
    transition-duration: 0.5s;
    width: 30%;
}

input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active {
    color: #000000;
    cursor: pointer;
    background-color: #ffffff;
    transition-duration: 0.5s;
}

#choix_fichier{
    width: 40%;
}

#supprphoto{
    font-size: 1.1rem;
}

.retour, .stop {
    display: block;
    width: 25%;
    background-color: #ffffff;
    color: #000000;
    text-decoration: none;
    margin: 0 auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.5rem;
    transition-duration: 0.5s;
}

.stop {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}


.retour:hover, .retour:focus, .retour:active, .stop:hover, .stop:focus, .stop:active {
    background-color: #000000;
    color: #ffffff;
    transition-duration: 0.5s;
}

.info {
    font-size: 1.5rem;
}

.imagearene {
    border-radius: 50%;
}

.knock-out {
    font-family: "Cyberverse", "Verdana", sans-serif;
    font-size: 2rem;
}

.youwin {
    font-size: 3rem;
}

@media screen and (min-width: 992px) and (max-width: 1200px){
    fieldset legend {
        font-size: 1.5rem;
    }
    
    select[name="persos1"], select[name="persos2"], input, label{
        font-size: 1.1rem;
    }
    
    #choix_fichier{
        font-size: 1.2rem;
    }
    
    #supprphoto{
        font-size: 1rem;
    }
    
    fieldset .supprimer, fieldset .regenerer {
    font-size: 1.5rem;
    padding: 1.5rem;
}
    
}

@media screen and (min-width: 768px) and (max-width: 992px){
    fieldset legend {
        font-size: 1.3rem;
    }
    
    header h1 {
        font-size: 3rem;
    }
    
    header h4 {
        font-size: 1.2rem;
    }
    
    select[name="persos1"], select[name="persos2"], input, label{
        font-size: 1.1rem;
    }
    input[type="text"], input[type="file"], input[type="number"], select[name="persos1"], select[name="persos2"]{
        width: 80%;
    }
    
    #choix_fichier{
        width: 55%;
        font-size: 1.2rem;
    }
    
    #supprphoto {
        width: 45%;
        font-size: 1.1rem;
    }
    
    input[type="submit"]{
        width: 90%;
    }
    
    fieldset .supprimer, fieldset .regenerer {
    font-size: 1.2rem;
    padding: 1.2rem;
}
    
}

@media screen and (max-width: 768px){
    
    td, th{
        padding: 0.2rem;
    }
    
    fieldset legend {
        font-size: 1rem;
    }
    
    header h1 {
        font-size: 2rem;
    }
    
    header h1::before, header h1::after{
        width: 2.75rem;
    }
    
    header h4 {
        font-size: 1rem;
    }
    
    select[name="persos1"], select[name="persos2"], input, label, #prev{
        font-size: 0.9rem;
    }
    input[type="text"], input[type="file"], input[type="number"], select[name="persos1"], select[name="persos2"]{
        width: 90%;
    }
    
    #choix_fichier{
        width: 100%;
        font-size: 1.1rem;
    }
    
    #supprphoto {
        width: 85%;
        font-size: 1rem;
    }
    
    input[type="submit"]{
        width: 100%;
    }
    
    tr td {
        font-size: 0.7rem;
    }
    
    tr th {
        font-size: 0.9rem;
    }
    
    tr td .regenerer, tr td .supprimer, tr td .modifier{
        width: 100%;
    }
    
    select:focus + span::after, input:focus + span::after{
    content: url('../fonds/duel.png');
     position: absolute;
        width: 2rem;
        height: 2rem;
}
    
    .knock-out {
        font-size: 1rem;
    }
    
    .youwin {
        font-size: 2rem;
    }
    
    .info, .retour, .stop {
        font-size: 1rem;
    }
    
    .retour, .stop {
        width: 40%;
    }
    
    figure img, .imgregen {
        width: 9.375rem;
        height: 4.4375rem;
    }
    
    .persoinfos, .tours {
        font-size: 1.4rem;
    }
    
    .stop {
        width: 60%;
    }
    
    fieldset .supprimer, fieldset .regenerer {
        width: 90%;
    font-size: 1rem;
    padding: 2.5rem;
}
    
    fieldset .supprimer{
        margin-bottom: 1rem;
    }
    
}