html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  background-image: url("img/sfondo25Aprile.png");
  background-size: cover;
  background-position: left;
  background-attachment: fixed;

}


header{
  display: flex;
  flex-direction: column;
}
footer img{
  width: 150px;
}



header img{
  width: 200px;
}

.player-wrapper {
  height: calc((100vw -30px)*0.5265);
}










/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  #player-section{
    display: flex;

    flex-direction: column;
    justify-content: center;
      height: calc(var(--vih,100vh) - 400px);
    min-height: 500px;

}
header img{
  width: 140px;
}
.player-wrapper {
  margin: 0 auto;
  height: 196.88px;
  width: 350px;
}
.chatContainer{
  margin: 0 auto;
  height: 500px;
  width: 450px;
}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {


  #player-section {
    height: calc(var(--vih,100vh) - 700px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .player-wrapper {
    margin: 0 auto;
    height: 287px;
    width: 510px;
  }


}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #player-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(var(--vih,100vh) - 400px);
    min-height: 570px;
  }


  .player-wrapper {
    margin: 0 auto;
    height: 393.75px;
    width: 700px;
  }


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #player-section {

    min-height: 570px;
    height: calc(var(--vih,100vh) - 400px);
  }
  .player-wrapper {
    margin: 0 auto;
    width: 900px;
    height: 506.25px;

  }


}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #player-section {
    min-height: 570px;
    height: calc(var(--vih,100vh) - 400px);
  }
  .player-wrapper {
    margin: 0 auto;

    width: 1000px;
    height: 562.50px;
  }
}
/* Devices with 1400px and up */
@media screen and (min-width: 1400px) {
  #player-section {
    min-height: 570px;
    height: calc(var(--vih,100vh) - 400px);
  }
  .player-wrapper {
    margin: 0 auto;

    width: 1000px;
    height: 562.50px;
  }
}
/* Devices with 1600px and up */
@media screen and (min-width: 1600px) {
  #player-section {
    min-height: 570px;
    height: calc(var(--vih,100vh) - 400px);
  }
  .player-wrapper {
    margin: 0 auto;

    width: 1000px;
    height: 562.50px;
  }

}
/*Devices with 1900px and up */
@media screen and (min-width: 1900px) {
  #player-section {
    min-height: 570px;
    height: calc(var(--vih,100vh) - 400px);
  }
  .player-wrapper {
    margin: 0 auto;

    width: 1000px;
    height: 562.50px;
  }

}