/*
Auteur              : Nicolas Monnard
Date                : Le 18.03.2022
Description         : Page d'accueil de mon projet
*/
@font-face {
  font-family: "EspFont";
  src: url("../font/NOVASOLID\ TRIAL___.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "EspFontText";
  src: url("../font/Montserrat-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  min-width: 800px;
  overflow: auto;
}

/*
============================================================
Bannière
============================================================
*/

#header1 {
  font-family: "EspFont";
  font-size: 100px;
  background-color: rgb(47, 25, 68);
  z-index: 1;
  text-align: center;
  padding-bottom: 30px;
  color: rgb(0, 0, 0);
}

#linkindex {
  text-decoration: none;
  color: rgb(0, 0, 0);
}

/*
============================================================
Menu de navigation
============================================================
*/
#nav {
  background-color: black;
}

#menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-items: center;
}

#menu button {
  cursor: pointer;
}

#BtnEquipe {
  font-family: "EspFontText";
  font-size: 30px;
  color: rgb(255, 255, 255);
  background-color: black;
  border: none;
  width: 33.333%;
  margin-top: 1em;
  margin-bottom: 1em;
}

#BtnTournois {
  font-family: "EspFontText";
  font-size: 30px;
  color: rgb(255, 255, 255);
  background-color: black;
  border: none;
  width: 33.333%;
}

#BtnJoueurs {
  font-family: "EspFontText";
  font-size: 30px;
  color: rgb(255, 255, 255);
  background-color: black;
  border: none;
  width: 33.333%;
}

#teamsmenu {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: -1;
  justify-content: center;
  font-family: "EspFontText";
  font-size: 20px;
  background-color: rgb(47, 25, 68);
  overflow-y: hidden;
  transform: translatey(-100%);
  transition: 0.5s;
}

#teamsmenu-on {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: -1;
  justify-content: center;
  font-family: "EspFontText";
  font-size: 20px;
  background-color: rgb(73, 39, 105);
  height: 100%;
  top: 0%;
  transform: translatey(0%);
  transition: 0.5s;
}

.espacequipe {
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

#teamsmenu-on :hover {
  color: rgb(184, 184, 184);
}

/*
============================================================
Contenu page index
============================================================
*/

#page-content {
  margin-left: 4%;
  margin-right: 4%;
  margin-bottom: 4%;
  background-color: black;
  color: white;
}

#titreIndex {
  padding-top: 2%;
  text-align: center;
  font-family: "EspFontText";
  font-size: 2em;
}

#par {
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 4%;
  padding-right: 4%;
  text-align: center;
  font-family: "EspFontText";
  font-size: 1em;
}

#imgIndex {
  width: 25%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3%;
  margin-bottom: 3%;
}

/*
============================================================
Pied de page
============================================================
*/
footer {
  background-color: black;
}

.basdepage {
  color: white;
  text-align: center;
  font-family: EspFontText;
  font-size: 1.5em;
  padding-top: 3%;
  padding-bottom: 3%;
}

.basdepage a {
  display: block;
  margin-left: 40%;
  margin-right: 40%;
  margin-top: 1%;
  margin-bottom: 1%;
}

/*
============================================================
Page des joueurs
============================================================
*/

.AlGauche {
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-family: "EspFontText";
  font-size: 1em;
  text-align: left;
}

.AlGauche th {
  width: 60%;
}

.AlGauche p {
  display: block;
  padding-left: 2%;
}

.AlGauche iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  top: 1em;
}

.AlDroite {
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-family: "EspFontText";
  font-size: 1em;
  text-align: right;
}

.AlDroite th {
  width: 40%;
}

.AlDroite p {
  display: block;
  padding-right: 2%;
}

.AlDroite iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  top: 1em;
}

/*
============================================================
Les fonds
============================================================
*/

#backgroundLOL {
  padding-top: 4%;
  padding-bottom: 4%;
  background-image: url("../image/tournoislol.png");
  background-position: center;
}

#backgroundCSGO {
  padding-top: 4%;
  padding-bottom: 4%;
  background-image: url("../image/tournoiscsg.png");
  background-position: center;
}

#backgroundRL {
  padding-top: 4%;
  padding-bottom: 4%;
  background-image: url("../image/tournoisrl.png");
  background-position: top;
}

#backgroundPUBG {
  padding-top: 4%;
  padding-bottom: 4%;
  background-image: url("../image/tournoispubg.png");
  background-position: top;
}

#backgroundR6 {
  padding-top: 4%;
  padding-bottom: 4%;
  background-image: url("../image/toournoisr6.png");
  background-position: center;
}

/*
============================================================
Page Tournois
============================================================
*/

.tournoispar {
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
}

.txtTournois {
  font-family: "EspFontText";
  font-size: 1em;
  padding-left: 3%;
  padding-right: 3%;
  padding-top: 3%;
  padding-bottom: 3%;
}

/*
============================================================
Page équipes
============================================================
*/
#epage-content {
  margin-left: 4%;
  margin-right: 4%;
  margin-bottom: 4%;
  margin-top: 4%;
  background-color: black;
  color: white;
}

#titleC {
  background-color: rgb(14, 14, 14);
  width: 100%;
}

#titleC img {
  width: 150px;
  display: block;
  padding-top: 1%;
  padding-bottom: 1%;
  margin-left: auto;
  margin-right: auto;
}

#tablePresEquipe {
  width: 100%;
}

#tableListeRoasters {
  border: 2px white solid;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 2%;
  width: 96%;
}

#tableListeRoasters th {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  font-family: "EspFontText";
  font-size: 1.5em;
}

.indic {
  background-image: url("../image/indic.png");
  color: rgb(71, 71, 71);
  width: 50%;
}

#tableColTxt {
  width: 60%;
  font-family: "EspFontText";
  font-size: 1em;
}

#txtTransiE {
  margin-top: 2%;
  margin-bottom: 2%;
  text-align: center;
  font-family: "EspFontText";
  font-size: 1.5em;
}

#sponsotxt{
  font-family: "EspFontText";
  font-size: 1em;
  padding-bottom: 3%;
  padding-left: 3%;
  padding-right: 3%;
}

/*
============================================================
Img CEO equipes
============================================================
*/
#imagec9 {
  width: 40%;
  margin-top: 2%;
}

#imagedig{
  width: 40%;
  margin-top: 4%;
}

#imagetsm{
  width: 40%;
  margin-top: 4%;
}

#imageenvy{
  width: 40%;
  margin-top: 4%;
}

#imagefaze{
  width: 40%;
  margin-top: 4%;
}

#imagefnatic{
  width: 40%;
  margin-top: 4%;
}

#imageg2{
  width: 40%;
  margin-top: 4%;
}

#imagegeng{
  width: 40%;
  margin-top: 4%;
}

#imageliquid{
  width: 40%;
  margin-top: 4%;
}

#imagenrg{
  width: 40%;
  margin-top: 4%;
}

/*
============================================================
Les différents fond pour les roasters
============================================================
*/
.apexlegends {
  background-image: url("../image/apex.png");
  background-size: 10%;
  background-position: center;
  background-repeat: no-repeat;
}

.csgo {
  background-image: url("../image/csgo.png");
  background-size: 20%;
  background-repeat: no-repeat;
  background-position: center;
}

.fortnite {
  background-image: url(../image/fortnite.png);
  background-size: 6%;
  background-repeat: no-repeat;
  background-position: center;
}

.lol {
  background-image: url(../image/lol.png);
  background-size: 5%;
  background-repeat: no-repeat;
  background-position: center;
}

.overwatch {
  background-image: url(../image/overwatch.png);
  background-size: 6%;
  background-repeat: no-repeat;
  background-position: center;
}

.pubg {
  background-image: url(../image/pubg.png);
  background-size: 8%;
  background-repeat: no-repeat;
  background-position: center;
}

.r6 {
  background-image: url(../image/r6.png);
  background-size: 6%;
  background-repeat: no-repeat;
  background-position: center;
}

.rl {
  background-image: url(../image/rl.png);
  background-size: 6%;
  background-repeat: no-repeat;
  background-position: center;
}

.hearthstone {
  background-image: url(../image/hearthstone.png);
  background-size: 6%;
  background-repeat: no-repeat;
  background-position: center;
}

.clashroyale {
  background-image: url(../image/clashroyale.png);
  background-size: 4%;
  background-repeat: no-repeat;
  background-position: center;
}

.smash {
  background-image: url(../image/smash.png);
  background-size: 6%;
  background-repeat: no-repeat;
  background-position: center;
}

.starcraft2 {
  background-image: url(../image/starcraft2.png);
  background-size: 10%;
  background-repeat: no-repeat;
  background-position: center;
}

.quake {
  background-image: url(../image/quake.png);
  background-size: 10%;
  background-repeat: no-repeat;
  background-position: center;
}

.dota2 {
  background-image: url(../image/dota2.png);
  background-size: 5%;
  background-repeat: no-repeat;
  background-position: center;
}

.callof {
  background-image: url(../image/callof.png);
  background-size: 10%;
  background-repeat: no-repeat;
  background-position: center;
}

.fifa {
  background-image: url(../image/fifa.png);
  background-size: 10%;
  background-repeat: no-repeat;
  background-position: center;
}

.paladins {
  background-image: url(../image/paladins.png);
  background-size: 5%;
  background-repeat: no-repeat;
  background-position: center;
}

/*
============================================================
Logos Sponsor
============================================================
*/
.sponsocyber {
  width: 1%;
}

.sponsogeico {
  width: 5%;
}

.sponsohtc {
  width: 3%;
}

.sponsohyperx {
  width: 5%;
}

.sponsologitechg {
  width: 5%;
}

.sponsololclass {
  width: 3%;
}

.sponsoredbull {
  width: 5%;
}

.sponsotwitch {
  width: 5%;
}

.sponsoomen {
  width: 5%;
}

.sponsoatt {
  width: 7%;
}

.sponsobmw {
  width: 3%;
}

.sponsosecretlab {
  width: 5%;
}

.sponsousairforce {
  width: 5%;
}

.sponsoalienware {
  width: 2%;
}

.sponsomonsterenergy {
  width: 2%;
}

.sponsosap {
  width: 4%;
}

.sponsohonda {
  width: 4%;
}

.sponsojersey {
  width: 4%;
}

.sponsoneedforseat {
  width: 6%;
}

.sponsohuya {
  width: 5%;
}

.sponsoscuf {
  width: 4%;
}

.sponsogfuel {
  width: 3%;
}

.sponsosteelseries {
  width: 5%;
}

.sponsonissan {
  width: 4%;
}

.sponsowix {
  width: 6%;
}

.sponsomountain {
  width: 4%;
}

.sponsoraynorgaming {
  width: 5%;
}

.sponsowestern {
  width: 4%;
}

.sponsosidiz {
  width: 3%;
}

.sponsosamsung {
  width: 4%;
}

.sponsodesker {
  width: 5%;
}

.sponsodouyu {
  width: 6%;
}

.sponsorivalry {
  width: 4%;
}

.sponsofnaticgear {
  width: 5%;
}

.sponsoamd {
  width: 5%;
}

.sponsooneplus {
  width: 4%;
}

.sponsopaysafecard {
  width: 6%;
}

.sponsoaorus {
  width: 3%;
}

.sponsoaoc {
  width: 4%;
}

.sponsomastercard {
  width: 3%;
}

.sponsohdac {
  width: 2%;
}

.sponsonicecactus {
  width: 6%;
}

.sponsojackinthebox {
  width: 4%;
}

.sponsopredator {
  width: 5%;
}

.sponsocorsaire {
  width: 4%;
}

.sponsojacklinks {
  width: 4%;
}

.sponsoeventdc {
  width: 3%;
}

.sponsonighthawk {
  width: 5%;
}

.sponsocalesports {
  width: 3%;
}

.sponsoballistix {
  width: 4%;
}

.sponsosennheiser {
  width: 4%;
}

.sponsoibuypower {
  width: 5%;
}