*{
    border: 0;
    padding: 0;
}
a{
    text-decoration: none;
}

body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  background-color: #2c2f3e;
}

footer{
display: flex;
  justify-content: center;
  background-color: #1c1e27;
  background: linear-gradient(
    to top,
    rgba(28, 30, 39, 0.9),
    rgba(0, 0, 0, 0.1)   
  );
  padding: 3rem;
  gap: 1rem;
  color: white;
}

nav {
  display: flex;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
  background: linear-gradient(
    to bottom,
    rgba(28, 30, 39, 0.9),
    rgba(0, 0, 0, 0.1)
  );
}

.btn {
  background-color: #444c5c;
  border: 4px solid #DAA520;
  border-radius: 10px;
  width: 10rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn:hover{
    text-align: center;
    background-color: #a1b0d8;
    width: 10rem;
    height: 4rem;
    border-radius: 10px;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.btn a {
  color: white;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.btnextra{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, #FFD700, #bb8e1b);
    width: 14rem;
    height: 4rem;
    border-radius: 10px;
    border:4px solid #a17a17;
    
}

.btnextra:hover{
    text-align: center;
    background-color: #a1b0d8;
    width: 14rem;
    height: 4rem;
    border-radius: 10px;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.btnextra a{
    color: white;
    display: inline-block;
}

.btntroll{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #FFD700, #bb8e1b);;
    width: 14rem;
    height: 4rem;
    border-radius: 10px;
    border:4px solid #a17a17;
    
}

.btntroll:hover{
    text-align: center;
    background-color: #a1b0d8;
    width: 14rem;
    height: 4rem;
    border-radius: 10px;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.btntroll a{
    color: white;
    display: inline-block;
}

.botones{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

h1 {
  font-size: 5rem;
}

.containerhome {
    width: 100%;         
    height: 100vh;           
    background-image: url(https://pa1.aminoapps.com/6004/167cfb5276fbfcb4c29fbe4d50d3fc30599e552b_hq.gif); /* Ruta de la imagen */
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    display: flex;
}

.containerjonia{
    width: 100%;         
    height: 100%;           
    background-image: url(https://64.media.tumblr.com/a3e875662ef42da4b0dade5e078686d1/8ab5388f4a13c32c-46/s540x810/a1ced3aedd85a6ede5af2f7bce36e8f6ad6cdac0.gif); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed;
    display: flex;
}

.containernoxus{
    width: 100%;         
    height: 100%;           
    background-image: url(https://64.media.tumblr.com/4eea46f86b630cb4085b94ccd9e3e917/96e06f7da4422289-e4/s540x810/64f4ef1667de51e779a70ade090ce92c6012f32a.gifv); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed;
    display: flex;
}

.containerarena{
    width: 100%;         
    height: 100%;           
    background-image: url(https://i.makeagif.com/media/1-21-2019/N3MnDW.gif); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed;
    display: flex;
}

.homecontent{
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    width: 800em;
    margin-left: 10%;
    margin-right: 10%;
    color: white;
    padding: 10rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.joniacontent{
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    width: 800em;
    margin-left: 10%;
    margin-right: 10%;
    color: white;
    padding: 10rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.noxuscontent{
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    width: 800em;
    margin-left: 10%;
    margin-right: 10%;
    color: white;
    padding: 10rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.arenacontent{
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    width: 800em;
    margin-left: 10%;
    margin-right: 10%;
    color: white;
    padding: 10rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/*contenido modal*/
.modal{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #111111bd;
    display: none;
}

.contenido-modal{
    background-color: white;
    width: 15%;
    max-height: 90%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-top: 10%;
    border-radius: 6px;
    padding: 2em 2em;
    display: flex;
    gap: 2em;
    align-items: center;
    justify-content: center;
}

.modal span {
    float: right;
    font-size: 19px;
    cursor: pointer;
    background-color: red;
    max-height: 20px;
    width: 2rem;
    text-align: center;
    color: white;
    border-radius: 5px;
    margin: 1rem;
}

.campeones{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}