* {
  font-family: 'Krona One', sans-serif;
  padding:0;
  margin:0;
}
h1 {
  padding-bottom:60px;
  text-transform: capitalize;
}

li{
  padding-bottom:0px;
}
.top-register {
  background-image:
      linear-gradient(to right, rgba(0, 0, 0, 0.418), rgb(0, 0, 0)),
      url('/assets/rocket.jpg');
  height: 65vh;
  background-size: cover;

  padding: 20px; /* Ajouter de l'espace autour du texte */
  color: white; /* Changer la couleur du texte en blanc */
  text-align: center;
  /*
  padding-left: 55%;
  padding-top: 5%;
  */
}
.multi-gaming {
  background-image:
      linear-gradient(to right, rgba(0, 0, 0, 0.418), rgb(0, 0, 0)),
      url('/assets/background/multi-gaming.jpg');
}

img{
  width: 150px;

}
ul {
  list-style: none; /* Supprime les puces de la liste non ordonnée */
}
.register-form-gt{
  height: 100vw;
}
.register-form-gt {
  height: 100vh; /* La hauteur sera égale à la hauteur de l'écran */
}

.btn{
  color: white;
  cursor:pointer;
    position:relative;
    padding:10px 20px;
    background:#401675;
    font-size:28px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    transition:all 1s;
    &:after,&:before{
      content:" ";
      width:10px;
      height:10px;
      position:absolute;
      border :0px solid #fff;
      transition:all 1s;
      }
    &:after{
      top:-1px;
      left:-1px;
      border-top:5px solid #401675;
      border-left:5px solid #401675;
    }
    &:before{
      bottom:-1px;
      right:-1px;
      border-bottom:5px solid #401675;
      border-right:5px solid #401675;
    }
    &:hover{
      border-top-right-radius:0px;
    border-bottom-left-radius:0px;
       color:black;
      &:before,&:after{
        
        width:100%;
        height:100%;
      }
    }
  }
.register-form-gt{
  text-align: center;
  padding-top: 10%;
}
.top-register ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.purple-text {
  color: #7853A7; /* Changer la couleur du texte en mauve */
}
.logo-gt{
  z-index: 999;
  position: absolute;
  top: 50%;
  text-align: center;
  right: 50%;

}
/*
.logo-frites{
  z-index: 999;
  position: absolute;
  top: 50%;
  text-align: center;
  right: 10%;
}
.logo-mettet{
  z-index: 999;
  position: absolute;
  top: 50%;
  text-align: center;
  right: 20%;
}

/* Média query pour les écrans jusqu'à 375px de largeur (Mobile portrait) */
@media screen and (max-width: 376px) {
  .top-register {
    padding-left: 10%; /* Ajuster la largeur pour un écran plus étroit */
    padding-top: 10%;
    height: 120vh;
}

  .logo-gt{
    top:90vh;
    left:0%;
    width: 30px;
  }
  .logo-frites{
    top:90vh;
    left: 34%;
    width: 30px;
  }
  .logo-mettet{
    top: 92vh;
    left: 70%;
    width: 30px;
}
img{
  width: 100px;}
}

/* Média query pour les écrans de 376px à 425px de largeur (Mobile landscape) */
@media screen and (min-width: 376px) and (max-width: 615px) {
  .top-register {
    padding-left: 10%; /* Ajuster la largeur pour un écran plus étroit */
    padding-top: 10%;
    height: 120vh;
}

  .logo-gt{
    top:90vh;
    left:0%;
    width: 30px;
  }
  .logo-frites{
    top:90vh;
    left: 34%;
    width: 30px;
  }
  .logo-mettet{
    top: 92vh;
    left: 70%;
    width: 30px;
}
img{
  width: 100px;}
}

/* Média query pour les écrans de 426px à 768px de largeur (Tablette et mobile landscape) */
@media screen and (min-width: 616px) and (max-width: 769px) {
  .top-register {
    padding-left: 10%; 
    padding-top: 10%;
    height: 120vh;
}
  .logo-gt{
    top:90vh;
    left:0%;
  }
  .logo-frites{
    top:90vh;
    left: 20%;
  }
  .logo-mettet{
    top: 90vh;
    left: 70%;
}

img{
  width: 100px;
}
}
/* Média query pour les écrans de 769px à 1025px de largeur (Tablette landscape et ordinateur portable) */
@media screen and (min-width: 769px) and (max-width: 1025px) {
  .top-register {
    padding-left: 10%; 
    padding-top: 10%;
    height: 120vh;
}
img {
width: 100px;
}

/*
.logo-gt{
  top:100vh;
  left:0%;
}
.logo-frites{
  top: 100vh;
  left: 20%;
}
.logo-mettet{
  top: 100vh;
  left: 70%;
}
*/
}

/* Média query pour les écrans à partir de 1025px de largeur (Écran large) */
@media screen and (min-width: 1025px) and (max-width:1919px) {
  .top-register {
    padding-left: 10%; 
    padding-top: 10%;
    height: 110vh;
}
img {
width: 100px;
}

.top-register{
  width: 100vw;
}
.logo-gt {
  top:100vh;
  left:10%;
text-align: initial;
}
.logo-frites {
  top: 100vh;
  left: 45%;
text-align: initial;
}
.logo-mettet {
  top: 102vh;
  left: 80%;
  text-align: initial;
}
}