@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat");
.header-home {
  background-image: url("../assets/images/cover-home.png");
  background-size: cover;
  background-position: center;
}

.container-grid-menu {
  display: grid;
  height: 100vh;
  grid-template-areas: "a1 a2 a3" "a4 a4 a4" "a5 a5 a5";
}

.container-fit-100vh {
  display: grid;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container-fit-75vh {
  height: 75vh;
  justify-content: center;
  align-items: center;
}

.i1 {
  grid-area: a1;
  align-self: center;
  justify-self: center;
}

.i2 {
  grid-area: a2;
  align-self: center;
  justify-self: center;
}

.i3 {
  grid-area: a3;
  align-self: center;
  justify-self: center;
}

.i4 {
  grid-area: a4;
  align-self: flex-start;
}

.i5 {
  grid-area: a5;
  align-self: center;
  color: #1e1e1e;
}

.social-media-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: right;
  width: -moz-fit-content;
  width: fit-content;
  height: 100vh;
}

.navigation-bar-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: left;
  width: -moz-fit-content;
  width: fit-content;
  height: 100vh;
}

.social-media-icon {
  width: 25px;
}

.rect {
  height: 30px;
  padding-bottom: 40px;
  padding-top: 40px;
}

.btn-rounded-rectangle {
  width: 150px;
  height: -moz-fit-content;
  height: fit-content;
  font-size: 1.3em;
  padding: 10px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border: none;
  color: #fff;
}

.grid-menu {
  display: grid;
  grid-template-areas: "n1 n2 n3";
  justify-content: center;
  grid-gap: 5%;
  padding-top: 15px;
  padding-bottom: 15px;
}

.btn-voltar {
  grid-area: n1;
}

.btn-logo-grid {
  grid-area: n2;
}

.btn-ajuda {
  grid-area: n3;
}

.btn-logo-small {
  width: 100px;
}

.span-voltar:after {
  content: "Voltar";
}

.span-sobre:after {
  content: "Sobre Nós";
}

.span-ajuda:after {
  content: "Ajuda";
}

#question {
  color: #1e1e1e;
  font-weight: bold;
  font-size: 1.3em;
}

#answers {
  color: #1e1e1e;
  font-size: 1.3em;
  list-style: none;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

li {
  padding-top: 5px;
  padding-bottom: 5px;
}

input[type=radio] {
  /* Define the size of the radio button */
  width: 25px;
  height: 25px;
  /* Remove the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Define the custom appearance */
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: #fff;
  /* Add a hover effect */
  cursor: pointer;
}

/* Define the appearance of the radio button when it is checked */
input[type=radio]:checked {
  border-color: #0ae0f0;
  background-image: linear-gradient(to bottom, #0ae0f0, #ff6fbe);
}

#btnConfirmar {
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
  background-color: #00B0BE;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.7s ease;
  box-shadow: 2px 3px 0px rgb(2, 87, 94);
  transition: 0.3s ease-in-out;
}

#btnConfirmar:hover {
  background-color: #62dee7;
}

#btnConfirmarPink {
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
  background-color: #FF5BB6;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.7s ease;
  box-shadow: 2px 3px 0px rgb(177, 36, 113);
  transition: 0.3s ease-in-out;
}

#btnConfirmarPink:hover {
  background-color: #fd91cc;
}

#restart {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #00B0BE;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.7s ease;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 2px 3px 0px rgb(2, 87, 94);
}

#restart:hover {
  background-color: #62dee7;
}

#restartPink {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #FF5BB6;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.7s ease;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 2px 3px 0px rgb(177, 36, 113);
}

#restartPink:hover {
  background-color: #fd91cc;
}

#questionType {
  color: #1e1e1e;
  font-weight: bold;
  font-size: 1.3em;
}

#inputBox {
  margin-top: 20px;
}

#resultMessage {
  margin-top: 10px;
}

#answerInput {
  border-radius: 50px;
  padding-left: 7px;
  margin-bottom: 20px;
  padding: 10px 20px;
  border-style: solid;
  border-color: #00B0BE;
  outline: none;
  box-shadow: -2px 3px 0px rgb(2, 87, 94);
}

#answerInputPink {
  border-radius: 50px;
  padding-left: 7px;
  margin-bottom: 20px;
  padding: 10px 20px;
  border-style: solid;
  border-color: #FF5BB6;
  outline: none;
  box-shadow: -2px 3px 0px rgb(177, 36, 113);
}

#reiniciarButton {
  display: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #00B0BE;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.7s ease;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 2px 3px 0px rgb(2, 87, 94);
}

#reiniciarButton:hover {
  background-color: #62dee7;
}

#reiniciarButtonPink {
  display: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #FF5BB6;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.7s ease;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 2px 3px 0px rgb(177, 36, 113);
}

#reiniciarButtonPink:hover {
  background-color: #fd91cc;
}

@media screen and (max-width: 576px) {
  .span-voltar:after {
    content: "<";
  }
  .span-ajuda:after {
    content: "?";
  }
  .span-sobre:after {
    content: "i";
  }
  .btn-rounded-rectangle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.3em;
    padding: 10px;
    border: none;
    color: #fff;
  }
}
@media screen and (max-width: 1620px) {
  .iframe-container-tutorial {
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.12%;
  }
}
@media screen and (max-width: 1420px) {
  .iframe-container-tutorial {
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.12%;
  }
  .text-resize {
    font-size: 2.3em;
  }
  .text-resize-subtitle {
    font-size: 1.9em;
  }
  .cta-btn {
    width: 40vw;
    height: 75px;
  }
  .cta-btn-2 {
    width: 20vw;
    height: 50px;
  }
}
@media screen and (max-width: 1200px) {
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .text-description {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 992px) {
  .container-lang {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    padding: 25px;
    display: grid;
    grid-gap: 10px;
    grid-template: 30% 40% 30%/100%;
    justify-content: center;
    align-items: center;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .grid-nivel {
    grid-template: auto auto auto/auto;
    grid-gap: 25px;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .iframe-container-music {
    position: relative;
    width: 80%;
    height: 100%;
    padding-bottom: 80px;
  }
  .image-hd-sm {
    width: 100%;
  }
  #video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .cta-btn {
    width: 70vw;
    height: 75px;
    font-size: 2rem;
  }
  .cta-btn-2 {
    width: 50vw;
    height: 50px;
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 820px) {
  .grid-text-image {
    display: grid;
    grid-template: auto auto/auto;
  }
  .image-hd-sm {
    width: 40%;
  }
  .image-hd {
    width: 40%;
  }
  .text-center-mobile {
    text-align: center;
  }
  .text-center-mobile-flex {
    text-align: center;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .text-resize {
    font-size: 1.9em;
  }
  .text-resize-subtitle {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 768px) {
  .btn-disappear {
    display: none;
  }
  .height-full-fit {
    height: -moz-fit-content;
    height: fit-content;
  }
  .btn-logo {
    width: 100px;
    margin: auto;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .grid-album {
    display: grid;
    grid-template: auto auto auto/auto;
    text-align: center;
    width: 90vw;
    justify-content: space-evenly;
  }
  .title-album-song-mj {
    font-size: 3em;
  }
  .subtitle-album-song-mj {
    font-size: 2em;
  }
  .title-album-song {
    font-size: 2.5em;
  }
  .subtitle-album-song {
    font-size: 1.5em;
  }
  .title-album-song-sm {
    font-size: 1.5em;
  }
  .subtitle-album-song-sm {
    font-size: 1em;
  }
  .album-cover {
    width: 200px;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 576px) {
  .h2-flex {
    font-size: 1.5em;
  }
  .title {
    font-size: 4em;
  }
  .title-minor {
    font-size: 3em;
  }
  .i1 {
    grid-area: a1;
    justify-self: center;
    align-self: center;
    margin: 10px;
  }
  .i2 {
    grid-area: a2;
  }
  .i3 {
    grid-area: a3;
    justify-self: center;
    align-self: flex-start;
    margin: 10px;
  }
  .i4 {
    grid-area: a4;
    justify-self: center;
  }
  .i5 {
    grid-area: a5;
    justify-self: center;
  }
  .container-grid-menu {
    height: -moz-fit-content;
    height: fit-content;
    display: grid;
    grid-template-areas: "a2 a2 a2" "a4 a4 a4" "a1 a1 a1" "a3 a3 a3" "a5 a5 a5";
  }
  .social-media-container {
    display: none;
  }
  .navigation-bar-container {
    display: none;
  }
  .line-rippled {
    width: 250px;
  }
  .link-item {
    margin: 10px;
  }
  .links-info {
    display: block;
    justify-content: left;
    align-items: left;
  }
  .container-footer-bg {
    height: -moz-fit-content;
    height: fit-content;
    background-image: url("../assets/images/bg-footer.png");
  }
  .subtitle {
    font-size: 1.6em;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .title-center-bold {
    font-size: 2em;
    font-weight: bold;
  }
  .btn-small {
    width: 50px;
  }
  .title-5em {
    font-size: 4em;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .text-resize {
    font-size: 2em;
  }
  .text-resize-subtitle {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 500px) {
  .font-resize {
    font-size: 25px;
  }
  .flag {
    width: 37px;
  }
  .title-bigger {
    font-size: 3.5em;
    font-weight: bolder;
  }
  .title-album-song {
    font-size: 1.5em;
  }
  .subtitle-album-song {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 450px) {
  .title {
    font-size: 3em;
  }
  .title-minor {
    font-size: 1.8em;
  }
  .subtitle {
    font-size: 1em;
  }
  .btn-150px {
    width: 100px;
  }
  .text-small {
    font-size: 1.3em;
  }
  .line-rippled {
    width: 150px;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .title-bigger {
    font-size: 3.5em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .iframe-container-music {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 80px;
  }
  .title-5em {
    font-size: 3em;
  }
}
@media screen and (max-width: 439px) {
  .flag {
    width: 30px;
  }
}
@media screen and (max-width: 429px) {
  .flag {
    width: 30px;
  }
}
body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  outline: none;
  display: none;
}

.cyan-color-panel .original {
  background-color: #00B0BE;
  transition: all 0.3s;
}
.cyan-color-panel .container-board {
  border: solid 5px #00B0BE;
  box-shadow: 0px 0px 30px rgba(0, 176, 190, 0.8);
  transition: all 0.3s;
}
.cyan-color-panel .translation {
  color: #00B0BE;
  transition: all 0.3s;
}
.cyan-color-panel .line-break {
  border: solid 2px #00B0BE;
  transition: all 0.3s;
}
.cyan-color-panel .glossary-board {
  background-color: #00B0BE;
  transition: all 0.3s;
}
.cyan-color-panel #btnConfirmar {
  background-color: #00B0BE;
  box-shadow: 2px 3px 0px rgb(2, 87, 94);
  transition: all 0.3s;
}
.cyan-color-panel #reiniciarButton {
  background-color: #00B0BE;
  box-shadow: 2px 3px 0px rgb(2, 87, 94);
  transition: all 0.3s;
}
.cyan-color-panel #restart {
  background-color: #00B0BE;
  box-shadow: 2px 3px 0px rgb(2, 87, 94);
  transition: all 0.3s;
}
.cyan-color-panel #answerInput {
  border-color: #00B0BE;
  box-shadow: -2px 3px 0px rgb(2, 87, 94);
  transition: all 0.3s;
}
.cyan-color-panel .cyanbtnlink {
  background-color: #00B0BE;
  transition: all 0.3s;
}
.cyan-color-panel .cyanbtnlink:hover {
  background-color: #FF5BB6;
  transition: all 0.3s;
}
.cyan-color-panel .fb-comments {
  background-color: #00B0BE;
  color: #ffffff;
  border-radius: 21px;
  transition: all 0.3s;
}

.pink-color-panel .original {
  background-color: #FF5BB6;
  transition: all 0.3s;
}
.pink-color-panel .container-board {
  border: solid 5px #FF5BB6;
  box-shadow: 0px 0px 30px rgba(255, 91, 182, 0.8);
  transition: all 0.3s;
}
.pink-color-panel .translation {
  color: #FF5BB6;
  transition: all 0.3s;
}
.pink-color-panel .line-break {
  border: solid 2px #FF5BB6;
  transition: all 0.3s;
}
.pink-color-panel .glossary-board {
  background-color: #FF5BB6;
  transition: all 0.3s;
}
.pink-color-panel #btnConfirmar {
  background-color: #FF5BB6;
  box-shadow: 2px 3px 0px rgb(177, 36, 113);
  transition: all 0.3s;
}
.pink-color-panel #reiniciarButton {
  background-color: #FF5BB6;
  box-shadow: 2px 3px 0px rgb(177, 36, 113);
  transition: all 0.3s;
}
.pink-color-panel #restart {
  background-color: #FF5BB6;
  box-shadow: 2px 3px 0px rgb(177, 36, 113);
  transition: all 0.3s;
}
.pink-color-panel #answerInput {
  border-color: #FF5BB6;
  box-shadow: -2px 3px 0px rgb(177, 36, 113);
  transition: all 0.3s;
}
.pink-color-panel .cyanbtnlink {
  background-color: #FF5BB6;
  transition: all 0.3s;
}
.pink-color-panel .cyanbtnlink:hover {
  background-color: #00B0BE;
  transition: all 0.3s;
}
.pink-color-panel .fb-comments {
  background-color: #FF5BB6;
  color: #ffffff;
  border-radius: 21px;
  transition: all 0.3s;
}

/* Light mode styles */
body.light-mode {
  background-color: #ffffff;
  color: #111111;
  transition: all 0.3s;
}

/* Dark mode styles */
body.dark-mode {
  background-color: #111111 !important;
  color: #ffffff !important;
  transition: all 0.3s;
}
body.dark-mode .breadcrumb {
  background-color: #111111;
  color: #ffffff;
  transition: all 0.3s;
}
body.dark-mode .container-board {
  background-color: #111111;
  color: #ffffff;
}
body.dark-mode .container-board-pink {
  background-color: #111111;
  color: #ffffff;
}
body.dark-mode .accordion-item {
  background-color: #111111;
  color: #ffffff;
}
body.dark-mode #question {
  background-color: #111111;
  color: #ffffff;
}
body.dark-mode #answers {
  background-color: #111111;
  color: #ffffff;
}
body.dark-mode #questionType {
  background-color: #111111;
  color: #ffffff;
}

html {
  scroll-behavior: smooth;
}

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

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #00B0BE 0%, #FF5BB6 100%);
  border-radius: 10px;
}

* {
  font-family: "Montserrat", sans-serif, Arial, Helvetica, "Archivo Black";
}

.bg-cyan {
  background-color: #00B0BE;
}

.bg-pink {
  background-color: #FF5BB6;
}

.bg-black {
  background-color: #1E1E1E;
}

.bg-bronze {
  background-color: #FB8003;
}

.bg-silver {
  background-color: #A4A4A4;
}

.bg-golden {
  background-color: #F8BC0A;
}

.bg-shadow-bronze {
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0px 0px 30px #FB8003;
}

.bg-shadow-silver {
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0px 0px 30px #A4A4A4;
}

.bg-shadow-golden {
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0px 0px 30px #F8BC0A;
}

.text-cyan {
  color: #00B0BE;
}

.text-pink {
  color: #FF5BB6;
}

.text-black {
  color: #1E1E1E;
}

.text-blue-navy {
  color: #1C2C68;
}

.text-yellow {
  color: #FFD072;
}

.text-red {
  color: #D34F5E;
}

.text-bronze {
  color: #FB8003;
}

.text-silver {
  color: #A4A4A4;
}

.text-golden {
  color: #F8BC0A;
}

.text-spotify {
  color: #1FDF64;
}

.youtube-music {
  color: #FF0000;
}

.btn-left {
  box-shadow: -2px 3px 0px rgb(177, 36, 113);
  background-color: #FF5BB6;
  transition: 0.3s ease-in-out;
}

.btn-left:hover {
  background-color: rgb(255, 153, 209);
  transition: 0.3s ease-in-out;
}

.btn-right {
  box-shadow: 2px 3px 0px rgb(2, 87, 94);
  background-color: #00B0BE;
  transition: 0.3s ease-in-out;
}

.btn-right:hover {
  background-color: rgb(20, 211, 224);
  transition: 0.3s ease-in-out;
}

.cta-btn {
  font-family: "Archivo Black", sans-serif;
  color: #fff;
  background-image: linear-gradient(to right, #FF5BB6, #00B0BE);
  width: 30vw;
  height: 75px;
  border: none;
  border-radius: 50px;
  font-size: 2.5rem;
  box-shadow: 0px 10px rgb(255, 255, 255), 0px 0px 70px rgba(0, 176, 190, 0.5);
  font-weight: bolder;
  font-style: italic;
  transition: all ease-in-out 0.5s;
  display: block;
}

.cta-btn:hover {
  transform: translateY(4px);
  box-shadow: 0px 5px rgb(255, 255, 255), 0px 0px 70px rgba(0, 176, 190, 0.5);
}

.cta-btn-2 {
  color: #fff;
  background-image: linear-gradient(to right, #FF5BB6, #00B0BE);
  width: 15vw;
  height: 50px;
  border: none;
  border-radius: 50px;
  font-size: 1.5rem;
  box-shadow: 0px 7px rgb(255, 255, 255), 0px 0px 70px rgba(0, 176, 190, 0.5);
  font-weight: bolder;
  font-style: italic;
  transition: all ease-in-out 0.5s;
  display: block;
}

.cta-btn-2:hover {
  transform: translateY(4px);
  box-shadow: 0px 3px rgb(255, 255, 255), 0px 0px 70px rgba(0, 176, 190, 0.5);
}

button, button:active {
  outline: none !important;
}

.cta-btn .cta-btn-span {
  font-family: "Archivo Black", sans-serif;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.cta-btn .cta-btn-span:after {
  content: "»";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -15px;
  transition: 0.5s;
}

.cta-btn:hover .cta-btn-span {
  padding-right: 30px;
}

.cta-btn:hover .cta-btn-span:after {
  opacity: 1;
  right: 0;
}

.container-banner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.container-banner .imgBanner {
  max-width: 100%;
  height: auto;
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.album-cover {
  box-shadow: 0px 0px 30px #1e1e1e;
}

.title-center-bold {
  font-size: 2.5em;
  font-weight: bold;
}

.height-full {
  height: 100vh;
}

.img-200 {
  width: 250px;
  height: 250px;
}

.img-300 {
  width: 300px;
  height: 300px;
}

.btn-logo {
  width: 150px;
  margin: auto;
}

.btn-small {
  width: 75px;
}

.image-hd {
  width: 100%;
}

.image-hd-sm {
  width: 70%;
}

.image-right {
  display: flex;
  justify-content: flex-end;
}

.image-center {
  display: flex;
  justify-content: center;
}

.img-full {
  width: 311px;
  height: 100%;
}

.img-small {
  width: 97px;
  height: 100%;
}

.imgBtnVpn {
  width: 37px;
}

.spotify-logo {
  width: 97px;
  margin-top: 7px;
}

.container-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.link-original {
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
}

.link-original:hover {
  color: #0056b3;
}

.link-no-style, .link-no-style:hover {
  text-decoration: none;
  color: currentColor;
}

.link {
  text-decoration: none;
  color: currentColor;
  transition: all ease-in-out 0.3s;
}

.link:hover {
  text-decoration: none;
  color: rgb(47, 47, 185) !important;
  font-weight: bold;
}

.link-navy-blue {
  text-decoration: none;
  color: #1C2C68;
  transition: 0.6s;
}

.link-navy-blue:hover {
  text-decoration: none;
  color: rgb(47, 72, 161);
  transition: 0.6s;
}

.link-black {
  text-decoration: none;
  color: #1e1e1e;
}

.link-black:hover {
  text-decoration: none;
  color: #1e1e1e;
}

.text-small {
  font-size: 1.5em;
}

.text-description {
  font-size: 1.5em;
}

.title {
  font-family: "Archivo Black", sans-serif;
  font-size: 5em;
  font-weight: bolder;
}

.title-minor {
  font-family: "Modak", cursive;
  font-size: 4em;
}

.subtitle {
  font-size: 2em;
}

.title-bigger {
  font-family: "Archivo Black", sans-serif;
  font-size: 7em;
  font-weight: bolder;
}

.line-rippled {
  width: 300px;
  margin: auto;
}

.grid-75vh {
  display: grid;
  grid-template: auto auto/auto;
  align-content: flex-start;
}

.title-center {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-album {
  display: grid;
  grid-template: auto/auto auto auto;
  text-align: left;
  width: 80vw;
  height: 57vh;
  justify-content: center;
  align-content: center;
  grid-gap: 20px;
}

.center-column-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title-song-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 55vh;
  width: 80vw;
}

.text-center-mobile-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-size: 1.4em;
}

.grid-text-image {
  display: grid;
  grid-template: auto/70% 30%;
  height: -moz-fit-content;
  height: fit-content;
}

.title-5em {
  font-size: 5em;
}

.title-album-song-mj {
  font-size: 5em;
}

.subtitle-album-song-mj {
  font-size: 3em;
}

.title-album-song {
  font-size: 4em;
}

.subtitle-album-song {
  font-size: 2.5em;
}

.title-album-song-sm {
  font-size: 3em;
}

.subtitle-album-song-sm {
  font-size: 2em;
}

.tooltipLink {
  position: relative;
  display: inline-block;
}

.tooltipLink .tooltipTextLink {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltipLink .tooltipTextLink::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltipLink:hover .tooltipTextLink {
  visibility: visible;
  opacity: 1;
}

.inputCopyLink {
  border: 1px solid #00B0BE;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.inputCopyLinkpink {
  border: 1px solid #FF5BB6;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.3);
}

.pinkbtnlink {
  background-color: #FF5BB6;
  color: #ffffff;
  border-radius: 50px;
  border: none;
  transition: 0.5s;
}

.pinkbtnlink:hover {
  background-color: #00B0BE;
}

.cyanbtnlink {
  color: #ffffff;
  border-radius: 50px;
  border: none;
  transition: 0.5s;
}

.container-flag {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* CSS code */
#video-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#video-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 0;
  padding-bottom: 28.12%;
}

#play-button {
  background-color: #FF5BB6;
  color: #ffffff;
  border-radius: 50px;
  border: none;
  transition: 0.5s;
}

#play-button:hover {
  background-color: #00B0BE;
}

#close-button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  font-size: 1.2em;
  background-color: #FF5BB6;
  color: #ffffff;
  border: none;
  cursor: pointer;
  margin: 3px;
  transition: 0.5s;
  border-radius: 50px;
}

#close-button:hover {
  background-color: #00B0BE;
}

#video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 9999;
}

#loader {
  width: 100px;
  height: 100px;
}

#loader img {
  width: 100%;
  height: 100%;
}

.bg-menu-nav {
  background-color: #e2a41b;
  border-radius: 50px;
}

.modeToggle {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 999;
  padding: 10px;
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  transition: all 1s;
  background-color: transparent;
}

.modeToggle img {
  max-width: 100%;
  height: auto;
  margin-right: 5px;
  transition: all 1s;
}

.modeToggle .image2 {
  display: none;
  transition: all 1s;
}

.modeToggle.active .image1 {
  display: none;
  transition: all 1s;
}

.modeToggle.active .image2 {
  display: inline-block;
  transition: all 1s;
}

.dimToggle {
  top: 10px;
  right: 10px;
  padding: 10px;
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  transition: all 1s;
  background-color: transparent;
}

.dimToggle img {
  max-width: 100%;
  height: auto;
  margin-right: 5px;
  transition: all 1s;
}

.dimToggle .image2 {
  display: none;
  transition: all 1s;
}

.dimToggle.active .image1 {
  display: none;
  transition: all 1s;
}

.dimToggle.active .image2 {
  display: inline-block;
  transition: all 1s;
}

.toggleColor {
  top: 10px;
  right: 10px;
  padding: 10px;
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  transition: all 1s;
  background-color: transparent;
}

.toggleColor img {
  max-width: 100%;
  height: auto;
  margin-right: 5px;
  transition: all 1s;
}

.toggleColor .image2 {
  display: none;
  transition: all 1s;
}

.toggleColor.active .image1 {
  display: none;
  transition: all 1s;
}

.toggleColor.active .image2 {
  display: inline-block;
  transition: all 1s;
}

@media screen and (max-width: 1620px) {
  .iframe-container-tutorial {
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.12%;
  }
}
@media screen and (max-width: 1420px) {
  .iframe-container-tutorial {
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.12%;
  }
  .text-resize {
    font-size: 2.3em;
  }
  .text-resize-subtitle {
    font-size: 1.9em;
  }
  .cta-btn {
    width: 40vw;
    height: 75px;
  }
  .cta-btn-2 {
    width: 20vw;
    height: 50px;
  }
}
@media screen and (max-width: 1200px) {
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .text-description {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 992px) {
  .container-lang {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    padding: 25px;
    display: grid;
    grid-gap: 10px;
    grid-template: 30% 40% 30%/100%;
    justify-content: center;
    align-items: center;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .grid-nivel {
    grid-template: auto auto auto/auto;
    grid-gap: 25px;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .iframe-container-music {
    position: relative;
    width: 80%;
    height: 100%;
    padding-bottom: 80px;
  }
  .image-hd-sm {
    width: 100%;
  }
  #video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .cta-btn {
    width: 70vw;
    height: 75px;
    font-size: 2rem;
  }
  .cta-btn-2 {
    width: 50vw;
    height: 50px;
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 820px) {
  .grid-text-image {
    display: grid;
    grid-template: auto auto/auto;
  }
  .image-hd-sm {
    width: 40%;
  }
  .image-hd {
    width: 40%;
  }
  .text-center-mobile {
    text-align: center;
  }
  .text-center-mobile-flex {
    text-align: center;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .text-resize {
    font-size: 1.9em;
  }
  .text-resize-subtitle {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 768px) {
  .btn-disappear {
    display: none;
  }
  .height-full-fit {
    height: -moz-fit-content;
    height: fit-content;
  }
  .btn-logo {
    width: 100px;
    margin: auto;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .grid-album {
    display: grid;
    grid-template: auto auto auto/auto;
    text-align: center;
    width: 90vw;
    justify-content: space-evenly;
  }
  .title-album-song-mj {
    font-size: 3em;
  }
  .subtitle-album-song-mj {
    font-size: 2em;
  }
  .title-album-song {
    font-size: 2.5em;
  }
  .subtitle-album-song {
    font-size: 1.5em;
  }
  .title-album-song-sm {
    font-size: 1.5em;
  }
  .subtitle-album-song-sm {
    font-size: 1em;
  }
  .album-cover {
    width: 200px;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 576px) {
  .h2-flex {
    font-size: 1.5em;
  }
  .title {
    font-size: 4em;
  }
  .title-minor {
    font-size: 3em;
  }
  .i1 {
    grid-area: a1;
    justify-self: center;
    align-self: center;
    margin: 10px;
  }
  .i2 {
    grid-area: a2;
  }
  .i3 {
    grid-area: a3;
    justify-self: center;
    align-self: flex-start;
    margin: 10px;
  }
  .i4 {
    grid-area: a4;
    justify-self: center;
  }
  .i5 {
    grid-area: a5;
    justify-self: center;
  }
  .container-grid-menu {
    height: -moz-fit-content;
    height: fit-content;
    display: grid;
    grid-template-areas: "a2 a2 a2" "a4 a4 a4" "a1 a1 a1" "a3 a3 a3" "a5 a5 a5";
  }
  .social-media-container {
    display: none;
  }
  .navigation-bar-container {
    display: none;
  }
  .line-rippled {
    width: 250px;
  }
  .link-item {
    margin: 10px;
  }
  .links-info {
    display: block;
    justify-content: left;
    align-items: left;
  }
  .container-footer-bg {
    height: -moz-fit-content;
    height: fit-content;
    background-image: url("../assets/images/bg-footer.png");
  }
  .subtitle {
    font-size: 1.6em;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .title-center-bold {
    font-size: 2em;
    font-weight: bold;
  }
  .btn-small {
    width: 50px;
  }
  .title-5em {
    font-size: 4em;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .text-resize {
    font-size: 2em;
  }
  .text-resize-subtitle {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 500px) {
  .font-resize {
    font-size: 25px;
  }
  .flag {
    width: 37px;
  }
  .title-bigger {
    font-size: 3.5em;
    font-weight: bolder;
  }
  .title-album-song {
    font-size: 1.5em;
  }
  .subtitle-album-song {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 450px) {
  .title {
    font-size: 3em;
  }
  .title-minor {
    font-size: 1.8em;
  }
  .subtitle {
    font-size: 1em;
  }
  .btn-150px {
    width: 100px;
  }
  .text-small {
    font-size: 1.3em;
  }
  .line-rippled {
    width: 150px;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .title-bigger {
    font-size: 3.5em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .iframe-container-music {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 80px;
  }
  .title-5em {
    font-size: 3em;
  }
}
@media screen and (max-width: 439px) {
  .flag {
    width: 30px;
  }
}
@media screen and (max-width: 429px) {
  .flag {
    width: 30px;
  }
}
@media screen and (max-width: 1620px) {
  .iframe-container-tutorial {
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.12%;
  }
}
@media screen and (max-width: 1420px) {
  .iframe-container-tutorial {
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.12%;
  }
  .text-resize {
    font-size: 2.3em;
  }
  .text-resize-subtitle {
    font-size: 1.9em;
  }
  .cta-btn {
    width: 40vw;
    height: 75px;
  }
  .cta-btn-2 {
    width: 20vw;
    height: 50px;
  }
}
@media screen and (max-width: 1200px) {
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .text-description {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 992px) {
  .container-lang {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    padding: 25px;
    display: grid;
    grid-gap: 10px;
    grid-template: 30% 40% 30%/100%;
    justify-content: center;
    align-items: center;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .grid-nivel {
    grid-template: auto auto auto/auto;
    grid-gap: 25px;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .iframe-container-music {
    position: relative;
    width: 80%;
    height: 100%;
    padding-bottom: 80px;
  }
  .image-hd-sm {
    width: 100%;
  }
  #video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .cta-btn {
    width: 70vw;
    height: 75px;
    font-size: 2rem;
  }
  .cta-btn-2 {
    width: 50vw;
    height: 50px;
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 820px) {
  .grid-text-image {
    display: grid;
    grid-template: auto auto/auto;
  }
  .image-hd-sm {
    width: 40%;
  }
  .image-hd {
    width: 40%;
  }
  .text-center-mobile {
    text-align: center;
  }
  .text-center-mobile-flex {
    text-align: center;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .text-resize {
    font-size: 1.9em;
  }
  .text-resize-subtitle {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 768px) {
  .btn-disappear {
    display: none;
  }
  .height-full-fit {
    height: -moz-fit-content;
    height: fit-content;
  }
  .btn-logo {
    width: 100px;
    margin: auto;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .grid-album {
    display: grid;
    grid-template: auto auto auto/auto;
    text-align: center;
    width: 90vw;
    justify-content: space-evenly;
  }
  .title-album-song-mj {
    font-size: 3em;
  }
  .subtitle-album-song-mj {
    font-size: 2em;
  }
  .title-album-song {
    font-size: 2.5em;
  }
  .subtitle-album-song {
    font-size: 1.5em;
  }
  .title-album-song-sm {
    font-size: 1.5em;
  }
  .subtitle-album-song-sm {
    font-size: 1em;
  }
  .album-cover {
    width: 200px;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 576px) {
  .h2-flex {
    font-size: 1.5em;
  }
  .title {
    font-size: 4em;
  }
  .title-minor {
    font-size: 3em;
  }
  .i1 {
    grid-area: a1;
    justify-self: center;
    align-self: center;
    margin: 10px;
  }
  .i2 {
    grid-area: a2;
  }
  .i3 {
    grid-area: a3;
    justify-self: center;
    align-self: flex-start;
    margin: 10px;
  }
  .i4 {
    grid-area: a4;
    justify-self: center;
  }
  .i5 {
    grid-area: a5;
    justify-self: center;
  }
  .container-grid-menu {
    height: -moz-fit-content;
    height: fit-content;
    display: grid;
    grid-template-areas: "a2 a2 a2" "a4 a4 a4" "a1 a1 a1" "a3 a3 a3" "a5 a5 a5";
  }
  .social-media-container {
    display: none;
  }
  .navigation-bar-container {
    display: none;
  }
  .line-rippled {
    width: 250px;
  }
  .link-item {
    margin: 10px;
  }
  .links-info {
    display: block;
    justify-content: left;
    align-items: left;
  }
  .container-footer-bg {
    height: -moz-fit-content;
    height: fit-content;
    background-image: url("../assets/images/bg-footer.png");
  }
  .subtitle {
    font-size: 1.6em;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .title-center-bold {
    font-size: 2em;
    font-weight: bold;
  }
  .btn-small {
    width: 50px;
  }
  .title-5em {
    font-size: 4em;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .text-resize {
    font-size: 2em;
  }
  .text-resize-subtitle {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 500px) {
  .font-resize {
    font-size: 25px;
  }
  .flag {
    width: 37px;
  }
  .title-bigger {
    font-size: 3.5em;
    font-weight: bolder;
  }
  .title-album-song {
    font-size: 1.5em;
  }
  .subtitle-album-song {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 450px) {
  .title {
    font-size: 3em;
  }
  .title-minor {
    font-size: 1.8em;
  }
  .subtitle {
    font-size: 1em;
  }
  .btn-150px {
    width: 100px;
  }
  .text-small {
    font-size: 1.3em;
  }
  .line-rippled {
    width: 150px;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .title-bigger {
    font-size: 3.5em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .iframe-container-music {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 80px;
  }
  .title-5em {
    font-size: 3em;
  }
}
@media screen and (max-width: 439px) {
  .flag {
    width: 30px;
  }
}
@media screen and (max-width: 429px) {
  .flag {
    width: 30px;
  }
}
.iframe-container {
  position: relative;
  width: 50%;
  height: 50%;
  padding-bottom: 28.12%;
}

.iframe-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 992px) {
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
}
.iframe-container-tutorial {
  position: relative;
  width: 25%;
  height: 25%;
  padding-bottom: 14.06%;
}

.iframe-container-tutorial iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 992px) {
  .iframe-container-tutorial {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
}
iframe {
  box-shadow: 0px 5px 15px rgba(30, 30, 30, 0.5);
  border-radius: 25px;
}

.iframe-container-music {
  position: relative;
  width: 50%;
  height: 100%;
  padding-bottom: 80px;
}

.iframe-container-music iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container-lang {
  width: 100%;
  display: grid;
  grid-template: 100%/30% 40% 30%;
  justify-content: center;
  align-items: center;
}

.card-lang {
  display: grid;
  grid-template: auto/100%;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

h1 {
  text-align: center;
  margin: 2rem 0;
  font-size: 2.5rem;
}

.accordion {
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
}

.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}

.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.accordion-item-header::after {
  content: "+";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}

.accordion-item-header.active::after {
  content: "−";
}

.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  -o-border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
     border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

@media (max-width: 767px) {
  html {
    font-size: 14px;
  }
}
.text-to-copy {
  position: absolute;
  left: -9999px;
}

.copy-button {
  border: none;
  background: none;
}

@media screen and (max-width: 1620px) {
  .iframe-container-tutorial {
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.12%;
  }
}
@media screen and (max-width: 1420px) {
  .iframe-container-tutorial {
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.12%;
  }
  .text-resize {
    font-size: 2.3em;
  }
  .text-resize-subtitle {
    font-size: 1.9em;
  }
  .cta-btn {
    width: 40vw;
    height: 75px;
  }
  .cta-btn-2 {
    width: 20vw;
    height: 50px;
  }
}
@media screen and (max-width: 1200px) {
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .text-description {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 992px) {
  .container-lang {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    padding: 25px;
    display: grid;
    grid-gap: 10px;
    grid-template: 30% 40% 30%/100%;
    justify-content: center;
    align-items: center;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .grid-nivel {
    grid-template: auto auto auto/auto;
    grid-gap: 25px;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .iframe-container-music {
    position: relative;
    width: 80%;
    height: 100%;
    padding-bottom: 80px;
  }
  .image-hd-sm {
    width: 100%;
  }
  #video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .cta-btn {
    width: 70vw;
    height: 75px;
    font-size: 2rem;
  }
  .cta-btn-2 {
    width: 50vw;
    height: 50px;
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 820px) {
  .grid-text-image {
    display: grid;
    grid-template: auto auto/auto;
  }
  .image-hd-sm {
    width: 40%;
  }
  .image-hd {
    width: 40%;
  }
  .text-center-mobile {
    text-align: center;
  }
  .text-center-mobile-flex {
    text-align: center;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .text-resize {
    font-size: 1.9em;
  }
  .text-resize-subtitle {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 768px) {
  .btn-disappear {
    display: none;
  }
  .height-full-fit {
    height: -moz-fit-content;
    height: fit-content;
  }
  .btn-logo {
    width: 100px;
    margin: auto;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .grid-album {
    display: grid;
    grid-template: auto auto auto/auto;
    text-align: center;
    width: 90vw;
    justify-content: space-evenly;
  }
  .title-album-song-mj {
    font-size: 3em;
  }
  .subtitle-album-song-mj {
    font-size: 2em;
  }
  .title-album-song {
    font-size: 2.5em;
  }
  .subtitle-album-song {
    font-size: 1.5em;
  }
  .title-album-song-sm {
    font-size: 1.5em;
  }
  .subtitle-album-song-sm {
    font-size: 1em;
  }
  .album-cover {
    width: 200px;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 66.66%;
    height: 66.66%;
    padding-bottom: 37.5%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 576px) {
  .h2-flex {
    font-size: 1.5em;
  }
  .title {
    font-size: 4em;
  }
  .title-minor {
    font-size: 3em;
  }
  .i1 {
    grid-area: a1;
    justify-self: center;
    align-self: center;
    margin: 10px;
  }
  .i2 {
    grid-area: a2;
  }
  .i3 {
    grid-area: a3;
    justify-self: center;
    align-self: flex-start;
    margin: 10px;
  }
  .i4 {
    grid-area: a4;
    justify-self: center;
  }
  .i5 {
    grid-area: a5;
    justify-self: center;
  }
  .container-grid-menu {
    height: -moz-fit-content;
    height: fit-content;
    display: grid;
    grid-template-areas: "a2 a2 a2" "a4 a4 a4" "a1 a1 a1" "a3 a3 a3" "a5 a5 a5";
  }
  .social-media-container {
    display: none;
  }
  .navigation-bar-container {
    display: none;
  }
  .line-rippled {
    width: 250px;
  }
  .link-item {
    margin: 10px;
  }
  .links-info {
    display: block;
    justify-content: left;
    align-items: left;
  }
  .container-footer-bg {
    height: -moz-fit-content;
    height: fit-content;
    background-image: url("../assets/images/bg-footer.png");
  }
  .subtitle {
    font-size: 1.6em;
  }
  .title-bigger {
    font-size: 4em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .title-center-bold {
    font-size: 2em;
    font-weight: bold;
  }
  .btn-small {
    width: 50px;
  }
  .title-5em {
    font-size: 4em;
  }
  .iframe-container-tutorial {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .container-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .text-resize {
    font-size: 2em;
  }
  .text-resize-subtitle {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 500px) {
  .font-resize {
    font-size: 25px;
  }
  .flag {
    width: 37px;
  }
  .title-bigger {
    font-size: 3.5em;
    font-weight: bolder;
  }
  .title-album-song {
    font-size: 1.5em;
  }
  .subtitle-album-song {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 450px) {
  .title {
    font-size: 3em;
  }
  .title-minor {
    font-size: 1.8em;
  }
  .subtitle {
    font-size: 1em;
  }
  .btn-150px {
    width: 100px;
  }
  .text-small {
    font-size: 1.3em;
  }
  .line-rippled {
    width: 150px;
  }
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
  }
  .title-bigger {
    font-size: 3.5em;
    font-weight: bolder;
  }
  .text-description {
    font-size: 1em;
  }
  .iframe-container-music {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 80px;
  }
  .title-5em {
    font-size: 3em;
  }
}
@media screen and (max-width: 439px) {
  .flag {
    width: 30px;
  }
}
@media screen and (max-width: 429px) {
  .flag {
    width: 30px;
  }
}
.container-footer-bg {
  width: 100%;
  height: 300px;
  background-image: url("../assets/svg/shape-footer.svg");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.logo-footer {
  width: 75px;
  margin-bottom: 10px;
}

.container-footer {
  display: grid;
  grid-template: auto auto/auto;
}

.link-item {
  margin: 20px;
}

.icon-footer {
  margin: 20px;
}

.links-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-media-responsive {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-social-media {
  width: 30px;
}

.rodape {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 576px) {
  .links-info {
    display: block;
    justify-content: center;
    align-items: center;
  }
  .logo-footer {
    width: 75px;
    margin-top: 10px;
  }
  .bolinha {
    display: none;
  }
  .container-footer-bg {
    height: -moz-fit-content;
    height: fit-content;
    background-image: url("../assets/images/bg-footer.png");
  }
  .icon-footer {
    margin: 0;
  }
  .icon-social-media {
    width: 30px;
    margin: 20px;
  }
}
.grid-options {
  display: grid;
  grid-template: auto/auto auto auto;
  justify-content: space-around;
  margin-bottom: 50px;
}

.card-options {
  padding: 10px;
  margin: 20px;
  width: 200px;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid transparent 2px;
  transition: all ease-in-out 0.5s;
}

.card-options:hover {
  border: solid #FF5BB6 2px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0px 0px 40px rgba(30, 30, 30, 0.3);
  color: #00B0BE;
}

@media screen and (max-width: 660px) {
  .grid-options {
    grid-template: auto auto auto/auto;
    justify-content: space-around;
    margin-bottom: 0px;
  }
}
.card-icone {
  width: 154px;
  height: 150px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0px 0px 30px #1e1e1e;
}

.card-artist {
  width: 300px;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0px 0px 30px #1e1e1e;
}

.album-cover {
  width: 300px;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0px 0px 30px #1e1e1e;
}

.card-songs {
  width: 50vw;
  display: grid;
  background-image: linear-gradient(90deg, #FF5BB6, #00B0BE);
  grid-template: auto/auto auto;
  justify-content: left;
  text-align: left;
  grid-gap: 25px;
  padding: 15px;
  border-radius: 27px;
  box-shadow: 0px 5px 20px rgba(30, 30, 30, 0.5);
  transition: all ease-in-out 0.3s;
  border: #fff solid 3px;
}

.card-songs:hover {
  cursor: pointer;
  background: linear-gradient(-90deg, #ff5bb6, #00b0be);
  box-shadow: 0px 0px 80px #00b0be;
  background-size: 400% 400%;
  animation: AnimationName 2s ease-in-out infinite;
}
@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.card-songs:active {
  box-shadow: 0px 0px 80px #00b0be;
}

.card-em-breve {
  width: -moz-fit-content;
  width: fit-content;
  color: #F8BC0A;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 7px rgba(248, 188, 10, 0.5);
}

.card-album {
  width: -moz-fit-content;
  width: fit-content;
  color: #532dff;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 7px rgba(83, 45, 255, 0.5);
}

.card-compilation {
  width: -moz-fit-content;
  width: fit-content;
  color: #D34F5E;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 7px rgba(211, 79, 94, 0.5);
}

.card-single {
  width: -moz-fit-content;
  width: fit-content;
  color: #00B0BE;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 7px rgba(0, 176, 190, 0.5);
}

.card-ep {
  width: -moz-fit-content;
  width: fit-content;
  color: #FF5BB6;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 7px rgba(255, 91, 182, 0.5);
}

.card-remixes {
  width: -moz-fit-content;
  width: fit-content;
  color: #ff8800;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 7px rgba(255, 136, 0, 0.5);
}

@media screen and (max-width: 1200px) {
  .card-songs {
    width: 60vw;
  }
}
@media screen and (max-width: 992px) {
  .card-songs {
    width: 50vw;
    grid-template: auto auto/auto;
    justify-content: center;
    text-align: center;
    border-radius: 50px;
  }
  .card-em-breve {
    margin: auto;
  }
  .card-album {
    margin: auto;
  }
  .card-single {
    margin: auto;
  }
  .card-compilation {
    margin: auto;
  }
  .card-ep {
    margin: auto;
  }
  .card-remixes {
    margin: auto;
  }
}
@media screen and (max-width: 768px) {
  .card-songs {
    width: 60vw;
    grid-template: auto auto/auto;
    justify-content: center;
    text-align: center;
    border-radius: 50px;
  }
  .card-artist {
    width: 200px;
    height: 200px;
  }
  .container-cover {
    margin-top: 20px;
  }
  .album-cover {
    width: 200px;
    height: 200px;
  }
}
@media screen and (max-width: 576px) {
  .card-songs {
    width: 70vw;
  }
}
@media screen and (max-width: 439px) {
  .card-songs {
    width: 80vw;
  }
}
@media screen and (max-width: 380px) {
  .card-songs {
    width: 90vw;
  }
}
.container-board {
  width: 90%;
  height: -moz-fit-content;
  height: fit-content;
  background-color: #fff;
  color: #1e1e1e;
  border-radius: 50px;
  border: solid 5px #00B0BE;
  box-shadow: 0px 0px 30px rgba(0, 176, 190, 0.8);
}

.container-board-pink {
  width: 90%;
  height: -moz-fit-content;
  height: fit-content;
  background-color: #fff;
  color: #1e1e1e;
  border-radius: 50px;
  border: solid 5px #FF5BB6;
  box-shadow: 0px 0px 30px rgba(255, 91, 182, 0.8);
}

.container-flip {
  display: grid;
  grid-template: 100%/50% 50%;
  justify-content: center;
  align-items: center;
}

.container-spotify-mobile {
  display: none;
}

.legend {
  display: grid;
  grid-template: auto auto/auto;
}

.legend-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.legend-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-original {
  width: 30px;
  height: 30px;
  border: solid 1px #1e1e1e;
  border-radius: 50%;
}

.circle-translation {
  width: 30px;
  height: 30px;
  border: solid 1px #1e1e1e;
  border-radius: 50%;
  background-color: #00B0BE;
}

.txt-board {
  font-size: larger;
}

.original {
  color: #fff;
  background-color: #00B0BE;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
}

.original-pink {
  color: #fff;
  background-color: #FF5BB6;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
}

.translation {
  color: #00B0BE;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
}

.translation-pink {
  color: #FF5BB6;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
}

.glossary-title {
  font-weight: bolder;
}

.glossary-board {
  background-color: #00B0BE;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
}

.glossary-board-pink {
  background-color: #FF5BB6;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
}

.glossary-term {
  font-weight: bold;
  font-size: larger;
  padding: 0;
  margin: 0;
}

.glossary-explanation {
  padding: 0;
  margin: 0;
}

.glossary-word {
  text-decoration: underline;
  font-style: italic;
  cursor: pointer;
}

.line-break {
  width: 50%;
  border: solid 2px #00B0BE;
  border-radius: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.line-break-pink {
  width: 50%;
  border: solid 2px #FF5BB6;
  border-radius: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.iframe-spotify {
  width: 600px;
  height: 80px;
}

.spotifyPlayer {
  text-align: center;
}

.spotifyPlayer--fixo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.list-container {
  display: flex;
  flex-direction: column;
  transition: all ease-in-out 0.3s;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 90%;
  margin: auto;
  align-items: center;
  justify-content: center;
  transition: all ease-in-out 0.3s;
}

.card-songs-grid {
  background-image: linear-gradient(90deg, #FF5BB6, #00B0BE);
  width: 20vw;
  grid-template: auto auto/auto;
  justify-content: center;
  text-align: center;
  border-radius: 50px;
  display: grid;
  grid-gap: 7px;
  padding: 7px;
  box-shadow: 0px 5px 20px rgba(30, 30, 30, 0.5);
  transition: all ease-in-out 0.3s;
  border: #fff solid 3px;
}
.card-songs-grid .card-em-breve {
  margin: auto;
}
.card-songs-grid .card-album {
  margin: auto;
}
.card-songs-grid .card-single {
  margin: auto;
}
.card-songs-grid .card-compilation {
  margin: auto;
}
.card-songs-grid .card-ep {
  margin: auto;
}
.card-songs-grid .card-remixes {
  margin: auto;
}
.card-songs-grid .container-flag {
  justify-content: center;
}
@media screen and (max-width: 700px) {
  .card-songs-grid .card-icone {
    width: 100px;
    height: 97px;
  }
}

.card-songs-grid:hover {
  cursor: pointer;
  background: linear-gradient(-90deg, #ff5bb6, #00b0be);
  box-shadow: 0px 0px 80px #00b0be;
  background-size: 400% 400%;
  animation: AnimationName 2s ease-in-out infinite;
}
@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.card-songs-grid:active {
  box-shadow: 0px 0px 80px #00b0be;
}

.center-column-aside {
  flex-grow: 1;
  overflow: hidden;
}

.center-column-aside h2,
.center-column-aside h4 {
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: auto;
  transition: all ease-in-out 0.7s;
}

.toggle-button img {
  width: 37px;
  height: 37px;
  transition: all ease-in-out 0.7s;
}

@media screen and (max-width: 768px) {
  .iframe-spotify {
    width: 300px;
    height: 80px;
  }
}
@media screen and (max-width: 1024px) {
  .spotifyPlayer {
    display: none;
  }
  .spotify-text {
    display: none;
  }
  .container-spotify-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 992px) {
  .container-board {
    width: 100%;
  }
  .container-board-pink {
    width: 100%;
  }
  .card-songs-grid {
    width: 40vw;
    grid-template: auto auto/auto;
    justify-content: center;
    text-align: center;
    grid-gap: 7px;
    padding: 7px;
    border-radius: 27px;
    background-color: burlywood;
  }
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 90%;
    margin: auto;
  }
}
@media screen and (max-width: 768px) {
  .container-board {
    width: 90%;
  }
  .container-board-pink {
    width: 90%;
  }
  .container-flip {
    display: grid;
    grid-template: auto auto/100%;
    justify-content: center;
    align-items: center;
  }
  .container-original {
    border-bottom: none;
  }
  .legend-row {
    display: none;
  }
}
@media screen and (max-width: 576px) {
  .container-translation {
    border-bottom: none;
    border-top: none;
  }
  .container-original {
    border-bottom: none;
    border-top: none;
  }
  .container-board {
    width: 100%;
    border-radius: 25px;
    box-shadow: 0px 0px 15px rgba(0, 176, 190, 0.8);
  }
  .container-board-pink {
    width: 100%;
    border-radius: 25px;
    box-shadow: 0px 0px 15px rgba(255, 91, 182, 0.8);
  }
  .glossary-board {
    background-color: #00B0BE;
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
  }
}
@media screen and (max-width: 500px) {
  h4 {
    font-size: medium !important;
  }
  h2 {
    font-size: large !important;
  }
}
.header-bg {
  background-image: url("../../../images/background-artist.jpg");
  background-size: cover;
  background-position: center;
}

.container-footer-bg {
  width: 100%;
  height: 300px;
  background-image: url("../../../../assets/svg/shape-footer.svg");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

@media screen and (max-width: 576px) {
  .container-footer-bg {
    height: -moz-fit-content;
    height: fit-content;
    background-image: url("../../../../assets/images/bg-footer.png");
  }
}/*# sourceMappingURL=style.css.map */