@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

html {
  width: 100%;
  min-height: 100vh;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background: var(--bgcolor);
}

html[data-theme=dark] {
  --bgcolor: #111;
  --maincolor: #fff;
  --bluecolor: #246bfd;
  --pinkcolor: #fba3ff;
  --greencolor: #a7fa9e;
  --yellowcolor: #ffeb76;
  --orangecolor: #ff968e;
  --babyblue: #05DCF0;
  --violet: #402B76;
  --paddingsides: 0 15px;
  --headerHeight: 100px;
  --mobileNavigationHeight: 150px;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 420ms !important;
  transition-delay: 0 !important;
}

h1 {
  color: var(--babyblue);
}

.blueText {
  color: var(--babyblue);
}

iframe#innerPage {
  width: 100%;
  height: 100vh;
  border: none;
}

section.main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-image: url("../src/svg/bg.svg");
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: calc(var(--mobileNavigationHeight) + 15px);
}
section.main .content {
  padding-top: var(--headerHeight) !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: var(--paddingsides);
}

.mainHeader {
  width: 100%;
  height: var(--headerHeight);
  padding: var(--paddingsides);
  padding-top: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
.mainHeader .iconsCont {
  display: flex;
  align-items: center;
  gap: 20px;
}
.mainHeader .iconsCont img {
  height: 20px;
}
.mainHeader .iconsCont .iconBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.mainHeader .iconsCont .iconBox span {
  font-size: 0.8rem;
  color: var(--maincolor);
}
.mainHeader .iconsCont .iconBack {
  height: 13px;
}

.titleSection {
  text-transform: uppercase;
  font-size: 30px;
  line-height: 32.99px;
  padding: 10px 0;
  border-bottom: 1px solid var(--maincolor);
}
.titleSection .main {
  color: var(--babyblue);
  font-weight: 300;
}
.titleSection .sub {
  color: var(--maincolor);
  font-weight: 900;
}

.subtitlesection {
  text-transform: uppercase;
  font-size: 17px;
  line-height: 32.99px;
  padding: 10px 0;
  display: flex;
  gap: 7px;
}
.subtitlesection .main {
  color: var(--babyblue);
  font-weight: 300;
}
.subtitlesection .sub {
  color: var(--maincolor);
  font-weight: 900;
}

.artistsSection {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--maincolor);
}
.artistsSection .artistsContainer {
  width: 100%;
  display: flex;
  gap: 10px;
  overflow-y: hidden;
  overflow-x: auto;
}
.artistsSection .artistsContainer .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.artistsSection .artistsContainer .item .mediaContainer {
  width: 80px;
  height: 80px;
  border: 2px solid var(--babyblue);
  border-radius: 35px 17px 35px 16px;
  overflow: hidden;
}
.artistsSection .artistsContainer .item .mediaContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artistsSection .artistsContainer .item .textContainer {
  width: 100%;
  text-align: center;
}
.artistsSection .artistsContainer .item .textContainer span {
  color: #828796;
  font-size: 14px;
  font-weight: 600;
}

.recentNewsSection {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--maincolor);
}
.recentNewsSection .recentNews {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.recentNewsSection .recentNews .item {
  width: 45%;
}
.recentNewsSection .recentNews .item .mediaContainer {
  width: 100%;
  height: 136px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recentNewsSection .recentNews .item .mediaContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}
.recentNewsSection .recentNews .item .textContainer p {
  color: var(--maincolor);
}

.rowDataInline {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--maincolor);
  text-transform: uppercase;
  font-style: italic;
}
.rowDataInline .nameData {
  font-size: 15px;
  font-weight: 300;
  line-height: 17.58px;
}
.rowDataInline .valueData {
  font-size: 15px;
  font-weight: 700;
  line-height: 17.58px;
}

.estadisticas {
  padding-bottom: 15px;
}
.estadisticas .countryInfo .data {
  display: flex;
  gap: 10px;
}
.estadisticas .countryInfo .data .flag {
  width: 54px;
  height: 54px;
  overflow: hidden;
}
.estadisticas .countryInfo .data .flag img {
  width: 100%;
  height: 100%;
  border-radius: 0 12px 0 12px;
}

section#mobileMenu {
  width: 100%;
  height: var(--mobileNavigationHeight);
  overflow: hidden;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
}
section#mobileMenu .player {
  width: 100%;
  height: 100%;
  background: #1e113f;
  padding: var(--paddingsides);
  padding-top: 15px;
  padding-bottom: 75px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 25px 25px 0 0;
}
section#mobileMenu .player .song {
  display: flex;
  align-items: center;
  gap: 10px;
}
section#mobileMenu .player .song .coverContainer {
  width: 57px;
  height: 57px;
}
section#mobileMenu .player .song .coverContainer img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
section#mobileMenu .player .song .data .songName {
  font-weight: 400;
  color: var(--maincolor);
  font-size: 13px;
  line-height: 15.23px;
}
section#mobileMenu .player .song .data .artistsName {
  font-weight: 900;
  color: var(--babyblue);
  font-size: 13px;
  line-height: 15.23px;
}
section#mobileMenu .player .controls {
  display: flex;
  gap: 10px;
}
section#mobileMenu .player .controls .iconContainer {
  width: 30px;
  height: 30px;
}
section#mobileMenu .player .controls .iconContainer img,
section#mobileMenu .player .controls .iconContainer lord-icon {
  width: 100%;
  height: 100%;
}
section#mobileMenu nav#mainMenu {
  width: 100%;
  height: 60px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.67);
  border-radius: 25px 25px 0 0;
  display: flex;
  align-items: center;
  padding: var(--paddingsides);
}
section#mobileMenu nav#mainMenu ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
section#mobileMenu nav#mainMenu ul li {
  width: 27px;
  height: 30px;
}
section#mobileMenu nav#mainMenu ul img,
section#mobileMenu nav#mainMenu ul lord-icons {
  width: 100%;
  height: 100%;
}

/*# sourceMappingURL=main.css.map */