/*---------------------- GENERAL ----------------------*/
  @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@0;1&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

  body {
    margin: 0;
    padding: 0;
    background-color: white;
  }

  .oculto {
    visibility: hidden;
  }

  .hidden {
    display: none;
  }

  h2 {
    font-family: 'Lexend', sans-serif;
  }

  h3,
  h4 {
    color: #000000;
    text-align: center;
    font-family: 'Ubuntu Condensed', sans-serif;
  }

  a {
    font-family: 'Rubik', sans-serif;

  }

  p {
    font-family: 'Roboto Condensed', sans-serif;
  }

 
  /*---------------------- HEADER ----------------------*/
  header {
    margin: 90px 0 0 0;
    background-image: linear-gradient(90deg, #0078c2df, #0690e63c, #45b8ffe1), url(../img/wallpaper.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 170px 0 170px 0;
    border-bottom: #0077c2 3px solid;
  }

  #img {
    margin-top: 10px;
    padding: 0 30px 0 30px;

  }

  #estrellas {
    color: rgb(238, 211, 4);
    text-shadow: rgb(238, 211, 4) 1px 1px 8px;
    display: flex;
    justify-content: center;
    font-size: 80px;
  }

  #estrellas:hover {
    transition: 0.8s;
    color: rgb(238, 211, 4);
    text-shadow: rgb(238, 211, 4) 2px 2px 30px;
    font-size: 115px;
    padding-bottom: 0;
  }

  #estrellas:not(:hover) {
    transition: 1s;
  }

  /*---------------------- NAV ----------------------*/

  nav {
    background-color: #021727;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    box-shadow: #021727 0 0 10px;
  }

  nav ul {
    list-style-type: none;
    display: flex;
  }

  nav ul li a {
    padding: 20px;
    color: #fff;
    text-decoration: none;
    margin-right: 2px;
  }

  nav ul li a:hover {
    transition: 0.7s;
    color: #0690e6;
    text-shadow: #0690e6 1px 1px 10px;
  }

  nav ul li a:not(:hover) {
    transition: 0.7s;
  }

  nav ul li a.active {
    color: #0690e6;
    text-shadow: #0690e6 1px 1px 10px;
  }

  nav div img {
    width: 90px;
    object-fit: contain;
    padding: 5px;
  }

  /*---------------------- SECCIONES ----------------------*/
  .sectionA {
    background-color: rgb(255, 255, 255);
    padding: 70px 20px 70px 20px;
  }

  .sectionA hr {
    height: 0px;
    border: 1.5px solid #000000;
  }

  .sectionA h2 {
    color: #0077c2;
    font-size: xx-large;
  }

  .sectionB {
    background: linear-gradient(90deg, #0077c2, #0690e6, #45b8ff);
    padding: 70px 20px 70px 20px;
    color: white;
  }

  .sectionB h2 {
    color: #ffffff;
    font-size: xx-large;
  }

  section h2 {
    text-align: start;
    white-space: nowrap;
    word-wrap: break-word;
  }

  .torneos {
    width: 17rem;
    margin: auto;
    padding: 1rem;
    margin-bottom: 25px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.534));
  }

  .logro {
    margin: 2rem 2rem 3rem 2rem;
    flex: 1;
  }

  .logro button:focus {
    background: #0690e6;
    color: white;
  }

  .logro p {
    text-align: start;
    margin: 1rem 0 1rem 0;
  }

  .accordion-collapse {
    border: #35b2ff solid 1px;
  }

  .titulos {
    display: flex;
    justify-content: space-around;
  }

  section h2 {
    color: #0077c2;
    font-size: 40px;
  }

  section {
    text-align: center;
  }

  section p {
    font-size: 18px;
    line-height: 1.5;
  }

  #jugadores p {
    text-align: start;
  }

  #logros, #jugadores, #comentarios {
    scroll-margin-top: 80px;
  }

  #presentacion {
    padding: 90px;
  }

  #premios {
    text-align: start;
  }

  #messi{
    font-size: large;
  }

  /*---------------------- FORMULARIO ----------------------*/

  #form {
    display: inline-block;
    text-align: left;
    background: linear-gradient(90deg, #0077c2, #0690e6, #1da2f5);
    padding: 30px;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 30px;
    box-shadow: #024874 0 0 15px;
  }

  form p {
    color: rgb(255, 225, 0);
    font-size: larger;
    font-weight: bold;
  }

  label {
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
    margin-bottom: 15px;
  }

  input[type="text"] {
    padding: 10px;
    margin-bottom: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
  }

  input[type="text"]:focus {
    transition: 0.5s;
    box-shadow: white 1px 1px 8px;
    outline: none;
    padding: 12px;
  }

  input[type="text"]:not(:focus) {
    transition: 1s;
  }

  textarea {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
  }

  textarea:focus {
    transition: 1s;
    box-shadow: white 1px 1px 8px;
    outline: none;
    padding: 12px;

  }

  textarea:not(:focus) {
    transition: 0.5s;
  }

  ::placeholder {
    font-family: 'Roboto Condensed', sans-serif;
  }

  #form button {
    margin-top: 10px;
    background-color: #01131f;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Roboto Condensed', sans-serif;
  }

  #form button:hover {
    background-color: #022a43;
  }

  li {
    list-style: none;
  }

  #comentarios li {
    text-align: start;
    margin-bottom: 15px;
  }


  /*---------------------- MENSAJES ----------------------*/
  .messages {
    list-style: none;
    margin: 50px 0 0 0;
    padding: 0;
  }

  .messages li {
    margin-top: 20px;
  }

  .user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    color: rgb(255, 255, 255);
  }

  .username {
    font-weight: bold;
    margin-right: 10px;
  }

  .message-content {
    background-color: #00000018;
    padding: 10px;
    border-radius: 5px;
    box-shadow: #00000018 1px 1px 10px;
  }

  .message-content p {
    margin: 0;
    color: rgb(0, 0, 0);
  }

  #commentList{
    margin-bottom: 20px;
  }

  #verMas {
    text-decoration: none;
    color: white;
  }

  #verMas:hover {
    transition: 1s;
    color: rgb(255, 217, 0);
    text-shadow: 1px 1px 5px rgb(255, 217, 0);
  }

  #verMas:not(:hover) {
    transition: 1s;
  }

  #presentacion h4,
  #presentacion h3 {
    text-align: start;
  }


  /*---------------------- FOOTER ----------------------*/
  #agradecimiento {
    background: linear-gradient(90deg, #0078c2df, #0690e676, #45b8ffe1), url(https://cloudfront-us-east-1.images.arcpublishing.com/infobae/AMRK26Q5QZFOTIFODXVCJ3XKHI.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 13rem 0 13rem 0;
  }

  #agradecimiento h3 {
    color: white;
    text-align: center;
    text-shadow: #000000 0 0 2px;
    font-family: 'Lexend', sans-serif;
    padding: 0 10px 0 10px;
  }

  footer {
    background-color: #021727;
    color: #fff;
    text-align: center;
    padding: 20px 10px 20px 10px;
  }

  footer p {
    margin-top: 12px;
  }


  /*---------------------- BARRA NAV ----------------------*/
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background-color: #021727;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #0690e6;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #e6c106;
  }


  /*---------------------- RESPONSIVE ----------------------*/
  @media screen and (max-width: 465px) {

    header {
      margin-top: 40px;
    }

    nav ul {
      font-size: small;
      margin-bottom: 5px;
      padding: 0;
      margin-left: auto;
    }

    nav ul li {
      margin: 0;
      padding: 0;
    }

    nav div img {
      width: 60px;
      object-fit: contain;
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: start;
      width: 100%;
    }

    #estrellas:hover {
      font-size: 95px;
    }

    #logros {
      scroll-margin-top: 50px;

    }

    #jugadores {
      scroll-margin-top: 50px;
    }

    #comentarios {
      scroll-margin-top: 50px;
    }

    footer{
      font-size: small;
    }
  }

  @media screen and (max-width: 1200px) {
    .titulos {
      flex-direction: column;
    }

    .logro {
      margin: 2rem 0 1rem 0;
    }

    .logro:nth-child(-n+2) {
      border-bottom: 2px solid #0690e6;
      padding-bottom: 30px;
    }

    .logro:nth-child(n+3) {
      margin-bottom: 50px;
    }

    #presentacion {
      padding: 80px 30px 80px 30px;
    }
  }


  /*---------------------- ANIMACIONES ----------------------*/