@charset "UTF-8";

@font-face {
  font-family: "rafont";
  src: url("fonts/rafont.eot");
  src: url("fonts/rafont.eot?#iefix") format("embedded-opentype"),
    url("fonts/rafont.woff") format("woff"),
    url("fonts/rafont.ttf") format("truetype"),
    url("fonts/rafont.svg#rafont") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "rafont" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "rafont" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-resident-advisor:before {
  content: "\72";
}

.icon-beatport:before {
  content: "\62";
}

body {
  font-family: 'Helvetica', Arial, 'Roboto', sans-serif !important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
}

a {
  color: #6E6E6E;
  transition: 0.3s;
  text-decoration: none !important;
}

img {
  width: 90%;
  height: auto;
}

.container {
  text-align: center;
}

h1 {
  font-size: 1.5em;
}

.clear {
  clear: both !important;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.social-icons a {
  font-size: 1.5em;
  color: #6E6E6E;
  /* Colore delle icone */
  transition: 0.3s;
}

.buttons-list {
  list-style: none;
  margin: 0 auto;
  padding: 30px 0;
}

.buttons-list li {
  float: left;
  width: 33%
}

.w20 {
  width: 20%;
}

.w40 {
  width: 40%;
}

.w60 {
  width: 60%;
}

.w80 {
  width: 80%;
}

.w90 {
  width: 90%;
}

a:hover {
  color: #cacaca;
  /* Colore delle icone */
}

@media only screen and (max-width: 768px) {
  .w20 {
    width: 60%;
  }

  .w40 {
    width: 75%;
  }

  .w60 {
    width: 80%;
  }

  .w80 {
    width: 90%;
  }

  .w900 {
    width: 100%;
  }
}