html, body
{
  overscroll-behavior: none;
}

/* BUTTONS */
button
{
  border: none;
  background: none;
  padding: 0 15px;
}

.btn-icon
{
  width: 75px;
}

.context-btn
{
  padding: 0 10px;
}


/* BODY */

body
{
  background-color: black;
  margin: 50px 5px 0 5px;
}

p
{
  text-align: center;
  font-family: 'Arial';
  font-size: 16px;
  font-weight: bold;
  color: white;
  margin: 10px 0 40px 0;
}

.vip-page
{
  width: 600px;
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}

/* HALO */
.halo1,
.halo2,
.halo3,
.halo4,
.halo5,
.halo6,
.halo7,
.halo9,
.halo10
{
  position: absolute;
  width: 87px;
}
/* Halo positions */
.halo1
{
  top: 10px;
  left: 27px;
}
.halo2
{
  top: 10px;
  left: 141px;
}
.halo3
{
  top: 10px;
  left: 255px;
}
.halo4
{
  top: 10px;
  left: 369px;
}
.halo5
{
  top: 10px;
  left: 483px;
}
.halo6
{
  top: 158px;
  left: 27px;
}
.halo7
{
  top: 158px;
  left: 141px;
}
/* NO HALO 8 BECAUSE POS 8 IS EMPTY */
.halo9
{
  top: 158px;
  left: 369px;
}
.halo10
{
  top: 158px;
  left: 483px;
}

.button-grid
{
  position: relative;
  display: grid;
  grid-template-columns: min-content min-content min-content min-content min-content;
  justify-content: space-evenly;
  padding: 15px 10px 10px 10px;
}

.context-menu
{
  position: relative;
  text-align: center;
  margin: 10px 0;
}

.context-icon
{
  width: 120px;
}

.context-custom-center
{
  position: absolute;
  width: 300px;
  height: 50px;
  top: 15px;
  left: 150px;
}

.context-text
{
  font-size: 25px;
}


/* REACTIVE OPTIONS */
@media screen and (max-width: 599px)
{
  /* BUTTONS */

  button /* CHANGE */
  {
    padding: 0 10px;
  }

  .btn-icon /* CHANGE */
  {
    width: 50px;
  }

  .context-btn /* CHANGE */
  {
    padding: 0 5px;
  }

  .context-icon /* CHANGE */
  {
    width: 75px;
  }


  /* BODY */

  body
  {
    background-color: black;
    margin: 50px 5px 0 5px;
  }

  p /* CHANGE */
  {
    font-size: 12px;
    margin-bottom: 20px;
  }

  .vip-page /* CHANGE */
  {
    width: 400px;
    height: 270px;
  }

  /* HALO */
  .halo1,
  .halo2,
  .halo3,
  .halo4,
  .halo5,
  .halo6,
  .halo7,
  .halo9,
  .halo10 /* CHANGE */
  {
    width: 60px;
  }
  /* Halo positions */
  .halo1
  {
    top: 5px;
    left: 20px;
  }
  .halo2
  {
    top: 5px;
    left: 93px;
  }
  .halo3
  {
    top: 5px;
    left: 170px;
  }
  .halo4
  {
    top: 5px;
    left: 245px;
  }
  .halo5
  {
    top: 5px;
    left: 320px;
  }
  .halo6
  {
    top: 102px;
    left: 20px;
  }
  .halo7
  {
    top: 102px;
    left: 93px;
  }
  /* NO HALO 8 BECAUSE POS 8 IS EMPTY */
  .halo9
  {
    top: 102px;
    left: 245px;
  }
  .halo10
  {
    top: 102px;
    left: 320px;
  }

  .button-grid /* CHANGE */
  {
    padding: 10px;
  }

  .context-menu /* CHANGE */
  {
    margin-top: 0;
  }

  .center-context /* CHANGE */
  {
    width: 220px;
  }

  .context-custom-center /* CHANGE */
  {
    width: 210px;
    height: 30px;
    top: 7px;
    left: 95px;
  }

  .context-text /* CHANGE */
  {
    font-size: 18px;
  }
}