/*J'ai repris d'un projet que j'avais déjà fait pour ne pas reprendre à zéro*/

/*Le général*/

body {
    background-attachment: fixed;
    background-size: cover;
    background-image: url("BG.jpg");
}

/*La mise en forme des titres*/
h1 {
    text-align: center;
    font-size: 5.2em;
    font-weight: normal;
    text-decoration: underline;
    color: crimson;
    margin: 0;
    margin-bottom: .5rem;
}

.h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 2rem;
}

form {
    margin: 0;
}


/*La mise en forme des sections en général*/
.form {
    border: 6px solid black;
    border-radius: 40px;
    box-shadow: 20px 20px 6px black;
    background-color: rgba(255, 255, 255, 0.75);
    color: black;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    padding: 2% 2% 2% 2%;
}

#envoi {
    font-size: 1.2em;
    color: green;
    text-align: center;
    position: relative;
        left: 15%;
}



footer {
    border: 1px solid black;
    background-color: white;
    position: fixed;
    bottom: 3px;
    right: 3px;
    padding: 5px;
    transition: .5s all;
    opacity: 1;
    transition-delay: 2s;
}

footer:hover {
    opacity: 0.2;
    transition-delay: 0s;
    transform: translateY(100%);
}

/*La barre de navigation*/
nav {
    text-align: center;
        margin: 0px 0px 0px 0px;
        padding: 1% 1% 1% 1%;
        background: red;
        color: white;
}


nav a {
    color: #FFF;
    text-decoration: none;
    font: 20px Raleway;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}
    
nav a:before,
nav a:after {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

nav a:before {
    top: 0px;
    transform: translateY(10px);
}

nav a:after {
    bottom: 0px;
    transform: translateY(-10px);
}

nav a:hover:before,
nav a:hover:after {
    opacity: 1;
    transform: translateY(0px);
}

/* Les tableaux */
table,
td,
th {
    border: 1px solid #000000;
    text-align: center;
    font-size: 18px;
    text-transform: capitalize;
}

.match-matrix,
.match-matrix td,
.match-matrix th {
    font-size: 0.8rem;
}

th {
    background: #090f42d6;
    color: #fff;
}

tr {
    background: white;
}
table {
    margin: auto;
        margin-top: 1.5rem;
    border-collapse: collapse;
    width: 75vw;
}

th,
td {
    padding: 1rem;
}
table tbody tr:nth-child(odd) {
    background: #eb6969cc;
    color: #000;
    font-weight: 500;
}

caption {
    margin-bottom: 1rem;
    font-size: 2.5em;
    text-decoration: underline;
}

#sans_casse {
    text-transform: none;
}
/*Lien champion*/

.ajout-barre {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.ajout {
    border: 5px solid red;
    padding: .5rem 1rem;
    font-size: 2em;
    border-radius: 10px;
    box-shadow: 10px 10px 3px #000000;
    color: red;
    text-decoration: none;
    font-variant: small-caps;
    font-weight: bold;
    font-family: serif;
    background-color: white;
    margin: 0 .25rem;
}

.ajout option, .ajout optgroup {
    font-size: 1rem;
}

.content-section {
    background-color: rgba(255, 255, 255, 0.75);
    box-shadow: 20px 20px 6px black;
    padding: 1rem 2rem;
    border-radius: 1rem;
    border: solid 6px black;

    margin: auto;
    width: max-content;
}

.content-center {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 3rem;
}

#dump {
    font-size: 1rem;
    text-transform: lowercase;
}
.grid-2 {
    justify-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}

.champion-name {
    max-width: max-content;
    margin-bottom: .5rem;
    font-variant: small-caps;
    font-size: 2rem;
}

.fin-prematuree {
    font-style: italic;
    text-decoration-style: wavy;
}

.score-fin-prematuree {
    text-decoration: underline wavy;
}

.champion-column {
    display: grid;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
}

.winner {
    border: 4px rgb(34, 222, 34) solid;
    border-radius: 1rem;
}

.score {
    margin: .5rem;
    font-size: 2rem;
}

.map {
    font-size: 1rem;
    font-family: monospace;
    white-space: pre;
    margin: 1rem auto;
    width: min-content;
    padding: .5rem .8rem;

    border: black solid 2px;
    border-radius: .7rem;

    background-color: white;
}

.nav-matchs {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.pagination {
    width: 75%;
    margin: auto;
    margin-top: 1rem;
    font-size: 1.1rem;
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    border: 2px red solid;
    border-radius: .5rem;
    padding: .5rem;
    text-align: center;

    background-color: white;
}

.current {
    justify-self: center;
}

.icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: bottom;
}

.side-pagination {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.pagination-right {
    justify-self: end;
}

.content-section-caption {
    text-align: center;
    font-size: 1.7rem;
}

.space-bottom {
    margin-bottom: 2rem;
}

#timer {
    margin: 1rem auto;
    width: max-content;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.timer-nbs {
    text-align: center;
    border: black solid 2px;
    border-radius: .5rem;
    padding: .5rem 1rem;
    width: 100%;
    box-sizing: border-box;
}

.timer-caption {
    margin-top: .75rem;
    font-size: 1.5rem;
}

.digit {
    display: inline;
    font-size: 4rem;
    margin: 0;
    position: relative;
}

.digit .from {
    display: inline-block;
}
.digit .to {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

.digit-2 .from {
    transition: color .2s;
}

.content-red {
    color: red;
    font-weight: bold;
}

.t42 {
    color: red;
}

.matchs-td {
    padding: 0;
}

.matchs-td a {
    color: black;
    display: block;
}

.match-inexistant {
    background: gray;
}

.match-gagnant-1 {
    background: hsl(109, 76%, 67%)
}

.match-gagnant-0 {
    background-color: hsl(40, 98%, 60%);
}

.match-gagnant-2 {
    background-color: hsl(0, 85%, 67%);
}

@media screen and (max-width: 700px) {
    /* :root {
        font-size: 0.75em;
    } */

    #timer {
        gap: 1rem;
        grid-template-columns: repeat(2, 1fr);
    }
}

.mw-max-content {
    min-width: max-content;
}

.select-champ {
    font-size: 2em;
    background-color: white;
    border: solid red 5px;
    color: red;
    border-radius: .8rem;
    padding: .5rem 1rem;
    box-shadow: 10px 10px 3px #000000;
    text-decoration: none;
    font-variant: small-caps;
    font-weight: bold;
    font-family: serif;
}

.select-champ-form {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.text-center {
    margin: .3rem .3rem;
    text-align: center;
    font-size: larger;
}

.grid-key {
    display: grid;
    margin: .5rem auto;
    grid-template-columns: max-content max-content;
    width: max-content;
    gap: 0 1rem;
    font-size: 2rem;
}

.content-text-center {
    text-align: center;
    margin: .5rem 0;
    font-size:  2rem;
}

.command-output {
    font-size: 1rem;
    font-family: monospace;
    white-space: pre-line;
    margin: 1rem auto;
    padding: .5rem .8rem;

    border: black solid 2px;
    border-radius: .7rem;

    background-color: white;
}

.max-90 {
    max-width: 90%;
}
/* Pour les iframes */

iframe {
    width: 97vw;
    height: 100vh;
}

#match_detail {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.margin-center {
    margin: auto;
}
.green_bg {
    background-color: greenyellow;
}

#green {
    color: green
}

#red {
    color: red
}

.cartes-input {
    display: block;
    width: 42ch;
    height: 6em;
}