/* 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: 'AnglicanText';
  src: url('fonts/AnglicanText.ttf') format('truetype');
}

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

@font-face {
    font-family: 'BulletSmallCaps';
    src: url('fonts/bullet-smallcaps.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body.index {
  background-color: #575757;
  color: #EDEDED;
  font-family: 'BulletSmallCaps', Verdana, serif;

  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  text-align: center;
}

.index h1 {
  font-size: 200px;
  margin: -50px;
  margin-bottom: 0;
}

.index p {
  margin-top: 0;
  font-size: 50px;
}

.index a {
  color: #EDEDED;
}

.index img {
  margin-top: -30px;
}
/* HOME STYLE */

body.home {
  background-image: url("materialdictionary186_147.jpg");
  background-size: cover;        /* fills screen */
  background-position: center;   /* keeps it centered */
  background-repeat: no-repeat;  /* no tiling */
  font-family: 'BulletSmallCaps', Verdana, serif;
  
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  text-align: center;
}

.home h1 {
  font-size: 200px;
  margin: 0;
}

.links {
  font-size: 50px;
  display: flex;
  flex-direction: column;
}

.back-link {
  position: absolute;  /* float it over the page */
  top: 20px;           /* distance from top */
  left: 20px;          /* distance from left */
  text-decoration: none; /* remove underline if you want */
  color: white;        /* change to your background-friendly color */
  font-size: 50px;     /* optional size */
  font-family: 'BulletSmallCaps', Verdana, serif;
}

/* MEDIA STYLE */

body.media {
  background-image: url("miscellaneous_2.jpg");
  background-size: cover;        /* fills screen */
  background-position: center;   /* keeps it centered */
  background-repeat: no-repeat;  /* no tiling */
  font-family: 'BulletSmallCaps', Verdana, serif;
  
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  text-align: center;
}

.media h1 {
  font-size: 200px;
  margin: 0;
}


/* MUSIC STYLE */

body.music {
  background-image: url("asadal_stock_154.jpg");
  background-size: cover;        /* fills screen */
  background-position: center;   /* keeps it centered */
  background-repeat: no-repeat;  /* no tiling */
  
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  text-align: center;
}

.music h1 {
  font-size: 200px;
  font-family: 'BulletSmallCaps', Verdana, serif;
  margin: 0;
}
.music p {
  font-family: 'CascadiaCode', Verdana, serif;
}

.music .links {
  font-family: 'BulletSmallCaps', Verdana, serif;
}

/* GOATS STYLE */
body.goats {
  background-image: url("materialdictionary178_8.jpg");
  background-size: cover;        /* fills screen */
  background-position: center;   /* keeps it centered */
  background-repeat: no-repeat;  /* no tiling */
  font-family: 'BulletSmallCaps', Verdana, serif;
  
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  text-align: center;
}

.goats h1 {
  font-size: 200px;
  margin: 0;
}

.goats .links {
  font-family: 'CascadiaCode', Verdana, serif;
  text-align: left;
  font-size: 16px;
}

/* PLAYLISTS STYLE */
body.playlists {
  background-image: url("materialdictionary186_17.jpg");
  background-position: center;   /* keeps it centered */
  background-repeat: repeat;      /* tiles the image */
  background-size: auto; 
  font-family: 'CascadiaCode', Verdana, serif;
  
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  text-align: center;
}

.playlists h1 {
  font-size: 200px;
  font-family: 'BulletSmallCaps', Verdana, serif;
  margin: 0;
}
.playlists p {
  font-family: 'CascadiaCode', Verdana, serif;
}

.playlists .links {
  font-family: 'BulletSmallCaps', Verdana, serif;
}

.playlists .p_info {
  color: #777;        
  opacity: 0.7; 
}

.playlists .song_list {
  width: 80%;
  max-width: 700px;
  text-align: left;
  margin: 0 auto;
  white-space: nowrap;   /* keep each item on a single line */
  line-height: 1.4; 
}



/* BUILT IN MUSIC */
#music-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.7);
  color: white;
  font-family: 'CascadiaCode', serif;
  font-size: 24px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  box-sizing: border-box;
  z-index: 1000;
}

#marquee-wrapper {
  flex: 1;               /* take up all space except the button */
  overflow: hidden;
  white-space: nowrap;
  margin-right: 20px;    /* space before the button */
}

#song-name {
  display: inline-block;
  padding-left: 100%;    /* start off-screen right */
  animation: scroll-text 10s linear infinite;
}

@keyframes scroll-text {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

#play-pause {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  flex-shrink: 0;         /* don’t shrink the button */
}

/* --- CAROUSEL & WINDOW --- */
.playlist-carousel {
  display: flex;
  align-items: center;    /* arrows vertically aligned with window */   
  justify-content: center;
}

.playlist-window {
  flex: none;              /* prevent auto-stretching */
  width: 800px;            /* set the width you want */
  max-width: 90%;          /* optional: ensures it doesn’t overflow on small screens */
  margin: 0 10px;          /* optional: small space from arrows */
  padding: 20px;
  box-sizing: border-box;
  background: transparent; 
  border: none;
}

/* --- EACH SLIDE --- */
.playlist-slide {
  display: none;
  flex-direction: column;
}

/* --- IMAGE + INFO WRAPPER --- */
.playlist-header {
  display: flex;
  flex-direction: column;
  align-items: center;    /* centers the image and info */
  margin-bottom: 15px;
}

.playlist-image {
  width: 120px;
  height: auto;
  margin-bottom: 10px;
}

.p_info {
  text-align: center;
}

/* --- SCROLLABLE SONG LIST --- */
.song_list {
  width: 800px;               /* fill the window */
  max-height: 350px;         /* scrollable height */
  overflow-y: auto;          /* vertical scroll for many songs */
  overflow-x: auto;          /* horizontal scroll for long titles */
  padding-left: 40px;
  padding-right: none;
  box-sizing: border-box;
}

.song_list ol {
  margin: 0;
  padding-left: 30px;        /* space for numbers */
  width: max-content;        /* makes the list as wide as needed */
}

.song_list li {
  white-space: nowrap;       /* prevent wrapping */
}
/* --- ARROWS --- */
.arrow {
  background: none;
  border: none;
  color: black;
  font-size: 32px;
  cursor: pointer;
  padding: 5px;       /* smaller padding */
}

.arrow:hover {
  color: #fff;
}


.playlist-slide.active {
  display: block;  /* show only the active slide */
}