/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
  font-family: 'Areion';
  src: url('fonts/Areion Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Digistick';
  src: url('fonts/Digistick_Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'orphan';
  src: url('fonts/dream_orph.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'popstar';
  src: url('fonts/popstar_pop.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Acidic';
  src: url('fonts/Acidic.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gaupop';
  src: url('fonts/GAU_pop_magic.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}


*, *::before, *::after { box-sizing: border-box; }

:root{
  --pink-main: #E3109C;
  --pink-soft: #ffffff;
  --pink-link: #df82d0;
  --panel-border: rgba(230, 48, 169, 0.35);
  --shadow: 0 10px 30px rgba(230, 48, 169, 0.12);
  --bg-url: url('https://preview.redd.it/some-beautiful-pink-wallpapers-for-you-v0-fv6z11x7ph7a1.jpg?width=1080&crop=smart&auto=webp&s=62aafa1ff123bc76fa6b6d5887b0be539716091b');
}

body {
  font-family: 'orphan', monospace;
  font-size: 16px;
  background: #ffffff;
  background-image: var(--bg-url);
  height: 100%;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  color: var(--pink-main);
  margin: 0;
  width: 100%;
}
h3 {
  font-family:'Areion', monospace;
  font-weight: bold;
}
  

/* links */
a { color: var(--pink-link); text-decoration: none; }
a:hover { color:#FF57CF }

.site-banner{
  width: 55%;
  height: auto;
  display: block;
  margin: 0 auto;
}



/* Make Home header link look normal (not link-colored) */
.room h3 a,
.room h3 a:visited,
.room h3 a:hover,
.room h3 a:active {
  color: inherit;
  text-decoration: none;
}


/* Layout */
.layout {
  display: flex;
  gap: 1em;
  justify-content: center;
  max-width: 100%;
}

aside.left, main.main {
  padding: 16px;
  min-height: 500px;
  background: var(--pink-soft);
  border: 2px solid var(--panel-border);
  box-shadow: var(--shadow);
  border-radius: 14px;
}

.left { flex: 1; }
.main { flex: 3; }

.room { margin-bottom: 1em; }
.room h3 { margin: 0.5em 0; cursor: pointer; }
.submenu { padding-left: 1em; }
.submenu a { display: block; margin: 0.3em 0; }

/* Current Music card */
.music-card {
  background: transparent;   /* remove pink backing */
  border: none;              /* remove border */
  box-shadow: none;          /* remove shadow */
  padding: 0;                /* tighter fit */
  max-width: 520px;
}


.music-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px 0;
  font-size: 26px;
  color: #E630A9;
}

/* ===== iPod PNG (fixed + clickable) ===== */
.ipod-device{
  position: relative;
  width: 340px;   /* adjust size */
  margin: 0 auto;
}

.ipod-img{
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* allows clicks through */
}

/* Screen overlay */
.ipod-screen{
  position: absolute;
  top: 9%;          /* slightly lower */
  left: 20%;         /* move inward to reduce width */
  width: 59%;        /* narrower */
  height: 45%;       /* taller */

  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  background: #fff;
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.05);

  border-radius: 12px;
  padding: 10px;
}


.screen-icon{
  width: 70px;
  height: 70px;
  margin-bottom: 6px;
}

.now-playing{
  margin: 6px 0 4px 0;
  font-weight: 700;
  color: #E630A9;
  font-family: 'popstar', cursive;
}

#nowPlaying{
  color: #b8197d;
  font-weight: 700;
  line-height: 1.3;
}

/* Clickable hit areas */
.ipod-hit{
  position: absolute;
  z-index: 10;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 999px;
}

/* hitbox positions */
.hit-prev{
  top: 70%;
  left: 30%;
  width: 12%;
  height: 12%;
}

.hit-next{
  top: 70%;
  right: 30%;
  width: 12%;
  height: 12%;
}

.hit-center{
  top: 68%;
  left: 44%;
  width: 12%;
  height: 12%;
}


/* Song text box under iPod */
.song-textbox{
  margin: 24px auto 0;
  padding: 12px 16px;
  max-width: 360px;

  background: #ffffff;
  border: 2px solid rgba(230,48,169,0.4);
  border-radius: 14px;

  text-align: center;
  font-family: 'popstar', monospace;
  font-size: 14px;
  color: #b8197d;

  box-shadow: 0 6px 18px rgba(230,48,169,0.15);
}

.song-textbox span{
  font-weight: 700;
  letter-spacing: 0.03em;
}
#nowPlaying,
.song-textbox,
.song-textbox span,
.song-textbox a {
  font-family: 'popstar', cursive;
}
#nowPlaying {
  font-size: 15px;
  letter-spacing: 0.04em;
}

.guestbook-panel{
  max-width: 420px;
  margin: 30px auto;
  padding: 20px;
  background: #ffffff;
  border: 2px solid rgba(230,48,169,0.4);
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(230,48,169,0.15);
}

.guestbook-title{
  color: #E630A9;
  margin-bottom: 14px;
}

#guestbookForm input,
#guestbookForm textarea{
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(230,48,169,0.4);
  font-family: inherit;
}

#guestbookForm button{
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid rgba(230,48,169,0.5);
  background: #F7BFE5;
  color: #E630A9;
  cursor: pointer;
}

#guestbookForm button:hover{
  background: #E630A9;
  color: #fff;
}

.guestbook-entries{
  margin-top: 16px;
  text-align: left;
}

.entry{
  background: #F7BFE5;
  padding: 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.entry strong{
  color: #E630A9;
}

.ms-window  {
  font-family: 'popstar', monospace;
}

.ms-content{
  max-height: 320px;          /* pick the height you want */
  overflow-y: auto;
  overflow-x: hidden;
}


.ms-content::-webkit-scrollbar{
  width: 8px;
}

.ms-content::-webkit-scrollbar-track{
  background: #ffe6f5;
}

.ms-content::-webkit-scrollbar-thumb{
  background: #E630A9;
  border-radius: 8px;
}

  a { color: #df82d0; text-decoration: none; }

  .content-wrap { width: 100%; max-width: 70%; margin: 0 auto; padding: 1em 0; }

  header { background: transparent; padding: 1em; text-align: center; }

  footer { color: #ffffff; background: transparent; padding: 1em; text-align: left; }

  .layout {
    display: flex;
    gap: 1em;
    justify-content: center;
    max-width: 100%;
  }

    aside.left, main.main {
      padding: 16px;
      min-height: 500px;
      border: 2px solid rgba(230, 48, 169, 0.35);
      box-shadow: 0 10px 30px rgba(230, 48, 169, 0.12);
      border-radius: 14px;
      backdrop-filter: blur(2px);
    }