/* =========================
   RESET
========================= */

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

width:100%;

overflow-x:hidden;

}


/* =========================
   BODY
========================= */

body{

background:
linear-gradient(
to bottom,
#120022,
#2d1457,
#120022
);

min-height:100vh;

overflow-x:hidden;

display:flex;

justify-content:center;

align-items:center;

font-family:Arial, sans-serif;

position:relative;

padding:30px 15px;

}


/* =========================
   NAVORA BACKGROUND
========================= */

#navoraFrame {

transform:
translateY(40px);

position:absolute;

width:100%;

max-width:1000px;

opacity:1;

z-index:0;

pointer-events:none;

filter:
drop-shadow(
0 0 40px
rgba(180,120,255,0.5)
);

}


/* =========================
   MAIN PAGE
========================= */

#pageContainer {

position:relative;

z-index:2;

display:flex;

justify-content:center;

align-items:center;

width:100%;

padding:0 10px;

}


/* =========================
   MUSIC PLAYER PANEL
========================= */

#musicPlayer {

width:100%;

max-width:760px;

padding:20px;

border-radius:35px;

background:
rgba(20,0,40,0.82);

backdrop-filter:blur(15px);

box-shadow:
0 0 50px
rgba(180,120,255,0.45);

border:
2px solid
rgba(255,255,255,0.12);

display:flex;

flex-direction:column;

align-items:center;

position:relative;

}


/* =========================
   INTRO TEXT
========================= */

#introText {

position:absolute;

top:140px;

color:white;

font-size:clamp(24px, 5vw, 42px);

font-weight:bold;

text-align:center;

text-shadow:
0 0 20px
rgba(255,255,255,0.8);

z-index:5;

opacity:1;

transition:
opacity 2s ease;

padding:20px;

width:100%;

}


/* =========================
   SLIDESHOW
========================= */

#slideshowContainer {

width:100%;

max-width:700px;

aspect-ratio:16 / 9;

overflow:hidden;

border-radius:25px;

margin-bottom:20px;

background:black;

display:flex;

justify-content:center;

align-items:center;

box-shadow:
0 0 30px
rgba(255,255,255,0.25);

}


/* =========================
   SLIDESHOW IMAGE
========================= */

#slideImage {

width:100%;

height:100%;

object-fit:contain;

opacity:1;

transition:
opacity 1.5s ease-in-out;

}


/* =========================
   AUDIO PLAYER
========================= */

audio {

width:100%;

max-width:700px;

border-radius:15px;

}


/* =========================
   END TEXT
========================= */

#endText {

position:absolute;

color:white;

font-size:clamp(22px, 4vw, 34px);

font-weight:bold;

text-align:center;

text-shadow:
0 0 20px
rgba(255,255,255,0.8);

opacity:0;

transition:
opacity 3s ease;

z-index:10;

padding:30px;

max-width:700px;

}


/* =========================
   AMAZON LINK
========================= */

#amazonLink {

color:#ffd700;

font-size:clamp(18px, 3vw, 26px);

font-weight:bold;

text-decoration:none;

padding:12px 24px;

border-radius:15px;

background:
rgba(255,215,0,0.15);

transition:
0.3s ease;

display:inline-block;

}


/* =========================
   HOVER EFFECT
========================= */

#amazonLink:hover {

transform:
scale(1.08);

background:
rgba(255,215,0,0.3);

}


/* =========================
   HOME BUTTON
========================= */

.home-btn {

position:fixed;

top:15px;

left:15px;

width:60px;

height:60px;

z-index:999;

}

.home-btn img {

width:100%;

height:100%;

object-fit:contain;

transition:0.3s ease;

}

.home-btn img:hover {

transform:scale(1.1);

}


/* =========================
   MOBILE
========================= */

@media (max-width:768px){

body{

padding-top:90px;

padding-left:10px;

padding-right:10px;

align-items:flex-start;

}

#musicPlayer{

width:100%;

max-width:430px;

padding:15px;

border-radius:25px;

}

#slideshowContainer{

width:100%;

max-width:420px;

aspect-ratio:4 / 5;

border-radius:18px;

}

#slideImage{

object-fit:contain;

}

#introText{

top:90px;

padding:15px;

font-size:clamp(20px, 5vw, 30px);

}

#endText{

padding:20px;

font-size:clamp(18px, 4vw, 28px);

}

audio{

max-width:420px;

}

#amazonLink{

font-size:18px;

padding:10px 18px;

}

.home-btn{

width:55px;

height:55px;

top:10px;

left:10px;

}

}