/*---------------------------- 

Nebuluna.com [Dreamlit Cosmos Network] (c) Star.

DO NOT use, copy, redistribute, modify, steal, 
or plagiarize any content from this website --
graphics, written content, code, or otherwise.

----------------------------*/







* { cursor: url('images/default.cur'), auto !important; }

:root{
  --footer-w: 846;
  --footer-h: 270;
  --header-h: 500px;
}

::selection      { background-color: #ffbe00; }
::-moz-selection { background-color: #ffbe00; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  margin: 0;
  background-image:
    url("images/bg.png"),
    linear-gradient(180deg, #68e0cf 500px, #b8f7da 50%, #b8f7da 90%, #38b5f0 95%);
  background-repeat:
    repeat-x,
    no-repeat;
  background-position:
    top center,
    top center;
  background-size:
    auto,
    100% 100%;
}

@font-face {
  font-family: 'SDV';
  src: url('images/SDV.ttf');
}

@font-face {
  font-family: '04b03';
  src: url('images/04b03.TTF');
}

@media (max-width: 800px){
  body {
    background-image: linear-gradient(180deg, #68e0cf clamp(260px, 45vh, 500px), #b8f7da 50%,#b8f7da 90%,#38b5f0 95%);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
  }
}

b { color: #ef6123; letter-spacing: 1px; }

i { color: #38b5f0; }

u { color: #48b221; }

.req { color: red; }

li { list-style-image: url('images/bullet.png'); }



/*---------------------------- 
 >>>> MAIN NAVIGATION
----------------------------*/
nav {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
  z-index: 2;
}

nav a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 40px;
  font: 1.75em "04b03", sans-serif;
  text-transform: uppercase;
  color: #000;
  background-color: #fff;
  border: 2px solid #ffbe00;
  box-shadow: 3px 3px 0 #96533a;
  border-radius: 15px;
  letter-spacing: .1em;
  text-decoration: none;
  transition: transform 0.15s ease-in-out;
}

nav a::before {
  content: url('images/navmusic.png');
  margin-right: 5px;
}

nav a:hover,
nav a:focus {
  color: #fff;
  background-color: #ffbe00;
  border: 2px solid #fff;
  box-shadow: -3px -3px 0 #48b221;
  transform: translateY(6px);
}

.nav-dropdown { display: none; }

@media (max-width: 1000px) {
  nav { display: none; }

  .nav-dropdown {
    display: block;
    position: static;
    width: min(1000px, 80%);
    margin: clamp(.5rem, 2vw, 1rem) auto;
    padding-bottom: 1em;
  }

  .nav-dropdown > .nav-summary {
    text-align: center;
    padding: .75rem 1rem;
    font: 1em "04b03", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    background-color: #ffbe00;
    border: 2px solid #fff;
    letter-spacing: .1em;
    text-decoration: none;
    box-shadow: 5px 5px 0 #48b221;
    border-radius: 15px;
  }

  .nav-dropdown > .nav-summary::-webkit-details-marker { display: none; }

  .nav-dropdown a:is(:link,:visited) {
    text-align: center;
    font-weight: 0;
    font: 1em "04b03", sans-serif;
    text-transform: uppercase;
    color: #fff;
    background-color: #96533a;
    text-decoration: none;
    letter-spacing: 2px;
    display: block;
    padding: .8rem 1rem;
    box-shadow: 5px 5px 0 #ffbe00;
  }

  .nav-dropdown a::before  {
    content: url('images/navmusic.png');
    margin-right: 5px;
  }
    
    
  .nav-dropdown a:is(:hover,:focus) { 
    text-shadow: 2px 2px 0 #000;
    background-color: #CC5A1B;
  }
}



/*---------------------------- 
 >>>> LAYOUT
----------------------------*/
header, main, footer { position: relative; }

header, nav, .nav-dropdown { 
  position: relative; 
  z-index: 10; 
}

main { flex: 1; }

header {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 1200 / 500;
  margin-inline: auto;
  position: relative;
  background: url('images/banner.png') no-repeat top center / contain;
}



/*----------------------------
 >>>> FOOTER
----------------------------*/
footer {
  position: relative;
  margin: 0 auto;
  width: clamp(320px, 100vw, var(--footer-w)*1px);
  aspect-ratio: var(--footer-w) / var(--footer-h);
  background: center / contain no-repeat url("images/footer.png");
}

.copyright {
  font-family: 'Roboto', sans-serif;
  font-size: .7em;
  font-weight: 0;
  color: #fff;
  text-align: center;
  line-height: 1.15;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(90%, 1000px);
  padding: clamp(6px, 2vw, 10px);
  border-radius: 15px;
}

.copyright b {
  background-color: #96533a;
  color: #fff;
  padding: 3px;
}

.copyright a {
  text-transform: uppercase;
  color: #ffbe00;
  text-decoration: none;
  padding: 2px;
}

.copyright a:hover {
  color: #ef6123;
}

@media (max-width: 700px){
  footer {
    width: 90vw;
    aspect-ratio: var(--footer-w) / var(--footer-h);
    background-position: center bottom;
    background-size: contain;
  }

  .copyright {
    color: #000;
    position: absolute;
    left: 50%;
    top: -5em;
    transform: translateX(-50%);
    width: 90vw;
    max-width: none;
    border-radius: 12px;
    padding: 8px 12px;
    box-sizing: border-box;
    background: none;
    z-index: 2;
  }

.copyright b {
  color: #96533a;
  background: none;
  padding: 3px;
}

.copyright a {
  text-transform: uppercase;
  color: #48b221;
  text-decoration: none;
  padding: 2px;
}
}

@media (max-width: 480px){
    .copyright {
      top: -8em;
  }
}



/*----------------------------
 >>>> MID BANNERS
----------------------------*/
.mid-banners {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1.5em auto 1em auto;
  width: 100%;
  max-width: 1000px;
}

.mid-banners a {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}

.mid-banners a:hover { transform: translateY(-10px); }

.mid-banners img {
  width: clamp(140px, 25vw, 285px);
  height: auto;
}

@media (max-width: 800px) {
  .mid-banners {
    gap: 0.5em;
    margin: 1em auto;
  }

  .mid-banners img { width: clamp(120px, 40vw, 200px); }
}



/*---------------------------- 
 >>>> CONTENT
----------------------------*/
.content {
  font: 1em 'Roboto', sans-serif;
  color: #000;
  letter-spacing: .5px;
  line-height: 1.5;
  width: clamp(320px, 96vw, 1000px);
  margin: 3em auto;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
}

.content a {
  font-family: '04b03', sans-serif;
  text-transform: uppercase;
  color: #48b221;
  text-shadow: none;
  text-decoration: none;
}

.content a:hover { color: #ef6123; }

.content-box {
  width: clamp(320px, 92vw, 800px);
  margin: 0 auto;
  font-size: 1em;
  line-height: 1.75;
  box-sizing: border-box;
  position: relative;
}

.content-header {
  width: 100%;
  height: clamp(35px, 5.5vw, 45px);
  background: url("images/top.png") no-repeat left top / 100% 100%;
}

.content-body {
  background: url("images/back.png") repeat-y left top / 100% auto;
  box-sizing: border-box;
  padding: 0 2em 1rem;
}

.content-body > h1 {
  grid-column: 1 / -1;
  margin: 0 0 .75em 0;
  justify-self: center;
}

.content-footer {
  position: relative;
  width: 100%;
  height: clamp(29px, 1.8vw, 39px);
  background: url("images/bottom.png") no-repeat left bottom / 100% 100%;
  display: flow-root;
  overflow: visible;
}

.content-sprite {
  position: absolute;
  bottom: 0;
  right: -20px;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  pointer-events: none;
  z-index: 1;
  transform: translateY(30%);
}

.content-sprite.drums { 
  background-image: url("images/drums.png"); 
  width: 130px; 
  height: 160px; 
}

.content-sprite.drums2 { 
  background-image: url("images/drums2.png");
  width: 140px;  
  height: 160px; 
}

.content-sprite.keyboard { 
  background-image: url("images/keyboard.png"); 
  width: 130px; 
  height: 105px; 
}

.content-sprite.guitar { 
  background-image: url("images/guitar.png"); 
  width: 65px; 
  height: 140px; 
  transform: rotate(25deg);
}

.content-sprite.piano { 
  background-image: url("images/piano.png"); 
  width: 165px; 
  height: 144px; 
}

.content-sprite.piano2 { 
  background-image: url("images/piano2.png"); 
  width: 165px; 
  height: 120px; 
}

.content-sprite.jukebox { 
  background-image: url("images/jukebox.png"); 
  width: 78px; 
  height: 126px; 
}

.content-box + .content-box { margin-top: 4em; }

.content-body > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .content { margin: 2em auto; }

  .content-body { padding: 0 1.25em 1rem; }

  .content-sprite {
    right: -20px;
    transform: translateY(40%) scale(0.8);
  }
}

.etc {
  background-color: #96533a;
  width: 80%;
  text-align: center;
  padding: 10px;
  border-radius: 30px;
  margin: 0 auto 2em auto;
  box-shadow: 5px 5px #000;
	}

.etc a {
  font-family: '04b03', sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
	}

.divicon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("images/divicon.png");
  margin-inline: 10px;
}

.ost {
  font-family: '04b03', sans-serif;
  color: white;
  padding: 0.2em 0.8em;
  margin-bottom: 10px;
  border-radius: 30px;
  text-shadow: 1px 1px #38b5f0;
  background: linear-gradient(280deg, #38b5f0 0%, #48b221 100%);
}

.ost[open] { background: linear-gradient(180deg, #2a1078 35%, rgba(56, 181, 240, 1) 100%); }

.ost-deets { text-transform: uppercase; }

.ost-deets::marker {
  color: #ffbe00;
  font-size: 1.2em;
}

article { 
  font: 1em 'Roboto', sans-serif;
  letter-spacing: .5px;
  padding: 20px; 
}

article > *:first-child { margin: 0; }
article > * + * { margin: 0.75em 0 0 0; }

.code-a {
  font-family: "Courier New", monospace;
  background-color: #CC5A1B;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  padding-block: clamp(8px, 1.2vw, 12px);
  padding-inline: clamp(14px, 6vw, 48px);
  border-radius: clamp(12px, 6vw, 30px);
  max-width: min(92vw, 800px); 
  margin: 1em auto 2em;
  width: fit-content;
  overflow-wrap: anywhere;
}

.code-b, .aff { border: 3px solid #d68f54; }

.code-b:hover, .aff:hover { border: 3px solid #CC5A1B; }



/*----------------------------
 >>>> HEADERS
----------------------------*/
h1 {
  font-family: '04b03', sans-serif;
  position: relative;
  font-size: clamp(1.5em, 1em + 1vw, 2.5em);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  margin: 1em auto;
  height: clamp(70px, 9vw, 109px);
  padding: 0 clamp(1em, 4vw, 2em);
  background: url('images/h1.png') no-repeat center/contain;
  text-shadow: 2px 2px 0 #dc7b05;
  z-index: 1;
  gap: clamp(8px, 1.5vw, 15px);
  image-rendering: pixelated;
  box-sizing: border-box;
}

h1::after {
  display: inline-block;
  width: clamp(0.8em, 1.2vw, 1em);
  height: clamp(0.8em, 1.2vw, 1em);
  transform: translateY(-50%);
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M28.185 7.625h1.53v3.04h-1.53Zm-1.52-1.53h1.52v1.53h-1.52Z' stroke-width='1.5' stroke='%23000'/%3E%3Cpath fill='%23000' d='M25.135 4.575h1.53v1.52h-1.53Zm-6.09 18.28h3.05v-1.52h1.52V4.575h1.52v-1.53h-1.52v-1.52h-1.52v15.24h-3.05v1.52h-1.52v3.05h1.52zm-6.1-7.62h1.53v3.05h-1.53Zm-1.52-1.52h1.52v1.52h-1.52Zm-1.52-1.52h1.52v1.52h-1.52Zm-6.1 18.28h3.05v-1.52h1.52v-16.76h1.53v-1.53h-1.53v-1.52h-1.52v15.24h-3.05v1.52h-1.52v3.05h1.52z' stroke-width='1.5' stroke='%23000'/%3E%3C/svg%3E");
}

h1::before {
  content: "";
  position: relative;
  width: clamp(40px, 6vw, 68px);
  height: clamp(40px, 6vw, 72px);
  z-index: 2;
  image-rendering: pixelated;
}

.h1-guitar::before {
  background: url('images/h1-1.png') no-repeat center/contain;
}

.h1-sax::before {
  background: url('images/h1-2.png') no-repeat center/contain;
}

.h1-piano::before {
  background: url('images/h1-3.png') no-repeat center/contain;
}

.h1-maracas::before {
  background: url('images/h1-4.png') no-repeat center/contain;
}

.h1-tamb::before {
  background: url('images/h1-5.png') no-repeat center/contain;
  width: clamp(42px, 6vw, 72px);
  height: clamp(32px, 4vw, 56px);
}

.h1-synth::before {
  background: url('images/h1-6.png') no-repeat center/contain;
  width: clamp(42px, 6vw, 72px);
  height: clamp(28px, 4vw, 48px);
}

.h1-violin::before {
  background: url('images/h1-7.png') no-repeat center/contain;
}

.h1-snare::before {
  background: url('images/h1-8.png') no-repeat center/contain;
  width: clamp(42px, 6vw, 72px);
  height: clamp(42px, 6vw, 72px);
}

@media (max-width: 500px) {
  h1 {
    gap: 6px;
    text-shadow: 1px 1px 0 #dc7b05;
  }

  h1::after {
    transform: translateY(-10%) scale(0.9);
  }
}

h2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: '04b03', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffbe00;
  background: url("images/h2.png") repeat-x center / auto 100%;
  image-rendering: pixelated;
  width: 92%;
  height: 40px;
  margin-block: 2.5em 1.5em;
  margin-inline: auto;
  border: none;
  box-sizing: border-box;
  overflow: hidden;
}

h2:first-of-type {
  margin-top: 0;
}

h2 span {
  background-color: #96533a;
  padding: 0.2em 0.8em;
  line-height: 1;
  display: inline-block;
  z-index: 1;
  position: relative;
  border-radius: 10px;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;
}

hr {
  width: 100%;
  height: 21px;
  border: none;
  background: url("images/hr.png") repeat-x center;
  background-size: auto 100%;
  image-rendering: pixelated;
  margin: 2.5em auto;
  position: relative;
  overflow: hidden;
  margin-block: 2em;
}



/*---------------------------- 
 >>>> QUICK NAVIGATION
----------------------------*/
.quicknav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3em 0 2em 0;
}

.quicknavlink a:is(:link,:visited,:active) {
  text-decoration: none;
  letter-spacing: .06em;
  padding: 10px;
  margin: 10px;
  width: 100px;
  line-height: 1;
  display: grid;
  justify-content: center;
  align-content: center;
  border-radius: 15px;
  transition: 0.12s ease-in-out;
  font: 1em "04b03", sans-serif;
  color: #fff;
  text-transform: uppercase;
  border: 2px solid #ffbe00;
  background-color: #96533a;
}

.quicknavlink a:hover {
  border: 2px solid #96533a;
  background-color: #dc7b05;
  transform: translateY(3px);
}

@media (max-width: 800px){
  .quicknav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3em 0 5em 0;
  }
}

@media (max-width: 480px){
    .quicknav {
      margin-bottom: 7em;
  }
}


/*---------------------------- 
 >>>> FORMS
----------------------------*/
.form-style {
  font-family: '04b03', serif;
  text-transform: uppercase;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="reset"]), textarea, select {
  color: #000;
  letter-spacing: 1px;
  border: 2px solid #96533a;
  padding: .5em;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: #d68f54;
  cursor: url('images/text.cur'), auto !important;
}

button, #captcha input[type="button"] {
  cursor: url('images/link.cur'), auto !important;
}



/*---------------------------- 
 >>>> STATS
----------------------------*/
blockquote {
  color: #fff;
  background-color: #96533a;
  width: 80%;
  margin: 1.25rem auto;
  font-size: clamp(.8rem, .74rem + .3vw, 1rem);
  line-height: 1.45;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-radius: 15px;
  text-shadow: none;
  position: relative;
  overflow: visible;
}

blockquote p {
  display: inline;
}

cite {
  font-style: normal;
  width: fit-content;
  margin-left: auto;
  margin-top: 1rem;
  line-height: 1.5;
  position: relative;
  display: block;
}

.stats {
  font-family: '04b03', sans-serif;
  color: #000;
  width: clamp(260px, 80vw, 435px);
  aspect-ratio: 435 / 198;
  margin: 3rem auto 0 auto;
  font-size: clamp(.56em, .56em + .4vw, .76em);
  line-height: 1.25;
  padding: clamp(14px, 4vw, 35px) 0 clamp(14px, 3.5vw, 35px) clamp(16px, 4.5vw, 30px);
  background: url("images/stats.png") left top / contain no-repeat;
  image-rendering: pixelated;
  box-sizing: border-box;
  text-transform: uppercase;
}

@media (max-width: 500px) {
  .stats {
    background-size: 100% auto;
    font-size: clamp(.6em, 2.5vw, .7em);
    padding: clamp(10px, 5vw, 20px);
  }
}



/*---------------------------- 
 >>>> FANS LIST
----------------------------*/
.members-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  align-content: center;
}

.member-card {
  color: #000;
  font-size: clamp(.75em, .7em + 0.4vw, 1em);
  text-shadow: 1px 1px 0 #fff;
  background: url('images/fan.png') no-repeat center / contain;
  height: 148px;
  width: clamp(80px, 22vw, 107px);
  aspect-ratio: 107 / 148;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 0.85;
}

.member-card b {
  color: #ef6123;
}

@media (max-width: 480px) {
  .members-grid {
    gap: 0.6em;
  }
}



/*---------------------------- 
 >>>> GLOBAL LINK CURSOR
----------------------------*/
a, a * {
  cursor: url('images/link.cur'), auto !important;
}