/* -------------------------------------------------------------------------- */
/*                                    HOME                                    */
/* -------------------------------------------------------------------------- */

#home {
  width: 100vw;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  background-color: transparent;
  color: white;
  display: grid;
  grid-template-rows: 1fr;
}

#pageViewer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  overflow-y: scroll;
  background-color: transparent;
}

iframe.homesketch {
  width: 100%;
  border: 0px;
  height: 100%;
}


/* -------------------------------------------------------------------------- */
/*                                   HEADER                                   */
/* -------------------------------------------------------------------------- */

#header {
  width: 100vw;
  height: 3em;
  margin-left: 20vw;
  margin-top: 3vh;
  padding: 0px;
  background-color: transparent;
  display: flex;
}

button.title-logo {
  position: absolute;
  top: 0;
  left: 3vw;
  z-index: 1;
  background-color: transparent;
  background-image: url(./assets/png/lbssart-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  border: 0px;
  width: 22vw;
  height: 20vh;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  backface-visibility: hidden;
}

button.title-logo:hover {
  transform: scale(1.05);
}


#header-menu {
  display: flex;
  z-index: 1;
  vertical-align: center;
  margin-left: 10vw;
}

#header-menu button {
  width: 20vw;
  height: 100%;
  border: 0px;
  color: #bb6fea;
  background-color: transparent;
  font-family: Rubik;
  font-size: 1.4em;
  transition: color 0.5s ease-in-out, transform 0.3s ease-in-out; 
}

#header-menu button:hover {
  color: #ff00ff;
  cursor: pointer;
  transform: scale(1.1);
}

/* -------------------------------------------------------------------------- */
/*                                   GENERIC                                  */
/* -------------------------------------------------------------------------- */

div.section-wrapper {
  margin-top: 5vh;
}

div.section-title {
  width: 100vw;
  height: 50vh;
  max-height: 20vh;
  margin-left: 3vw;
  margin-right: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top: 80px;
  margin-bottom: 30px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.text-wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin: 0 0 5vh 0;
}

p {
  font-family: "Rubik", sans-serif;
  text-align: justify;
  color: #bb6fea;
  margin: 2vh 10vw 2vh 10vw;
  text-indent: 2em;
  line-height: 1.6em;
  cursor: auto;
  transition: color 0.3s ease, transform 0.3s ease;
}

p.paragraph-a {
  color: #bb6fea;
  font-size: medium;
}

p.paragraph-a:hover {
  color: white;
  transform: scale(1.02);
}

p.paragraph-b {
  color: #bb6fea;
  font-size: medium;
}

p.paragraph-b:hover {
  color: white;
  transform: scale(1.02);
}

p.subtitle {
  white-space: pre;
  text-align: center;
  font-size: 2vw;
  margin-bottom: 4em;
}

h1 {
  font-family: "Rubik", sans-serif;
  font-size: 3em;
  color: #ff00ff;
  text-align: center;
  margin: 10vh 0 3vh 0;
  transition: color 0.3s ease;
}

h1:hover {
  color: white;
}

h2 {
  font-family: "Rubik", sans-serif;
  font-size: 4em;
  color: #bb6fea;
  text-align: center;
  margin: 0 0 2vh 0;
  transition: color 0.3s ease;
}

h2:hover {
  color: white;
}

div.player-video {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh;
  width: 100vw;
}

iframe.player-video {
  border: none;
  width: 50vw;
  height: 30vh;
}
/* -------------------------------------------------------------------------- */
/*                               CREATIVE CODING                              */
/* -------------------------------------------------------------------------- */

/* CSS */

#pageViewer.creative-coding {
  background-color: black;
}

div.creative-coding-title {
  background-image: url(./assets/png/creativecoding_art.png);
}
div.mixtape-title {
  background-image: url(./assets/png/mixtape_art.png);
}
div.community-title {
  background-image: url(./assets/png/community_art.png);
}

/* Add this to style the parent container */
.discord-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15vh;
  margin-top: 5vh;
  margin-bottom: 10vh;
}

.discord-button {
  background-color: transparent;
  border: none;
  padding: 20px;
  width: 30vw;
  height: 10vh;
  background-image: url(./assets/png/discord.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease; /* Add this */
}

/* Add this for the hover effect */
.discord-button:hover {
  transform: scale(1.2); /* Adjust as needed */
}

/* -------------------------------------------------------------------------- */
/*                                    LIVE                                    */
/* -------------------------------------------------------------------------- */

#pageViewer.live {
  background-color: black;
}

div.live-title {
  background-image: url(./assets/png/live_art.png);
}

.next-gigs-wrapper {
  display: flex;
  justify-content: center;
}

.past-gigs-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 10vh;
}

.tour-events {
  text-align: center;
  margin-top: 3em;
}

.next-gigs {
  color: rgb(233, 111, 230);
}

.past-gigs {
  color: #bb6fea;
}

.tour-date {
  text-align: center;
  font-size: small;
}

.tour-button {
  font-size: large;
  font-family: Rubik;
  background-color: transparent;
  border: 0px;
  width: 100vw;
  transition: transform 0.3s ease, color 0.3s ease; /* Add transition for smooth scaling */
}

.tour-button:hover {
  transform : scale(1.02);
  cursor: pointer;
  color: #ffffff;
}

/* -------------------------------------------------------------------------- */
/*                                    ABOUT                                    */
/* -------------------------------------------------------------------------- */

#pageViewer.about {
  background-color: black;
}

.mail-link {
  color: #bb6fea;
  text-decoration: none;
  font-size: 1.8em;
  text-align: center;
  transition: color 0.3s ease;
  margin-top: 5vh;
  transition: color 0.3s ease, transform 0.3s ease;
}

.mail-link:hover {
  color: white;
  transform: scale(1.3);
}

.links-wrapper {
  display: flex;
  align-items: center;
  justify-items: center;
  margin: 3em 20% 5em 20%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.social-button {
  color: black;
  border-radius: 50%;
  border : none;
  width: 10vw;
  height: 10vw;
  background-color: transparent;
  background-size: 8vw 8vw;
  background-repeat: no-repeat;
  background-position: center;
  font-family: Rubik;
  filter: invert(1); 
  transition: transform 0.3s ease;
}

.social-button:hover {
  transform: scale(1.1);
  cursor: pointer;
}