body {
  font-family: "Montserrat", sans-serif;
  color: #ccc;
  background-color: rgb(21, 32, 43); /*#023;*/
  height: 100%; /* Ensure body fills viewport */
  /* position: relative; Establish positioning context */
  font-size: 16px;
  /*word-break: break-all;*/
  margin: 0;
}
header {
    color: antiquewhite;
    font-size: 1.5rem;
    font-weight: bold;
    padding: .4rem .7rem .7rem .3rem;
    background: url(../img/title_bg.jpg);
    background-size: cover;
}
header a {
    font-size:2rem;
}
earthrise {
    position: fixed;
    top: 5px;
    right: 0;
}
earthrise img {
    width: 80%;
}
p {
  text-align: left;
  width:98vw;
  max-width:560px;
}
hr {
  width:98vw;
  max-width:560px;
}
.title {
    font-weight: bold;
}
.title:hover {
  cursor: pointer;
  color: lightyellow;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
}
.credits, .info {
  font-size: .90rem;
  display: inline-block;
  color: #999;
}
.credits {
  position: relative;
  top: -.15rem;
  left: 1em;
}
#songs li {
  margin-top: 1rem;
  max-width: 560px;
}
#songs li::marker {
    font-weight:normal;
}
#songs li.audio::marker {
  color: antiquewhite;
  font-size: 1.25rem;
  content: "🎤  ";
}
#songs li.video::marker {
  color: antiquewhite;
  font-size: 1.25rem;
  content: "📽  ";
}
#songs li.blog::marker {
  color: antiquewhite;
  font-size: 1.25rem;
  content: "🗎  ";
}
#songs li.arrowhead::marker {
  color: fuchsia;
  font-size: 1.25rem;
  content: '🕪  ';
}

.iframe-container {
    height: calc(100vh - 60px);
    width: calc(100vw - 30px);
}
iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
#player {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3em;
  width: 100%;
  background-color: rgb(21, 32, 43); /*#023
  color: #fff; */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
}
#player audio {
  height: 2rem;
  width: 15rem;
  max-width: 50vw;
  padding-top: .1em;
}
a {
  text-decoration: none;
  color: inherit;
}

.info a {
  text-decoration: none;
  color: lightsteelblue;
}

.info a:hover {
  text-decoration: underline;
}

/*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
*/
/* Track (background) of the scrollbar */
::-webkit-scrollbar-track {
    background: rgb(10, 21, 32); /* Color of the track */
}

/* Handle (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
    background: rgb(31, 42, 53); /* Color of the handle */
    border-radius: 6px; /* Rounded corners */
}
@media (max-width: 576px) {
    body {
      scrollbar-width: none;
    }
    header {
        font-size:110%;
    }
    earthrise {
        top:0;
    }
    header a {
        font-size:1.25rem;
    }
    #player {
        height: 50px;
        font-size: .8rem;
    }
    .iframe-container {
        height: calc(100vh - 105px);
    }
}
@media (min-width: 577px) and (max-width: 768px) {
    #player {
        height: 55px;
        font-size: .8rem;
    }
    .iframe-container {
        height: calc(100vh - 187px);
    }
    ::-webkit-scrollbar {
        width: 10px; /* Adjust width as needed */
        height: 10px; /* For horizontal scrollbar */
    }

    /* Track (background) of the scrollbar */
    ::-webkit-scrollbar-track {
        background: rgb(10, 21, 32); /* Color of the track */
    }

    /* Handle (the draggable part of the scrollbar) */
    ::-webkit-scrollbar-thumb {
        background: rgb(31, 42, 53); /* Color of the handle */
        border-radius: 6px; /* Rounded corners */
    }
}
@media (min-width: 769px) {
    #player {
        height: 60px;
        font-size: 2rem;
    }
/*    .iframe-container {
        height: calc(100vh - 190px);
    }*/
    ::-webkit-scrollbar {
        width: 12px; /* Adjust width as needed */
        height: 12px; /* For horizontal scrollbar */
    }

    /* Track (background) of the scrollbar */
    ::-webkit-scrollbar-track {
        background: rgb(10, 21, 32); /* Color of the track */
    }

    /* Handle (the draggable part of the scrollbar) */
    ::-webkit-scrollbar-thumb {
        background: rgb(31, 42, 53); /* Color of the handle */
        border-radius: 6px; /* Rounded corners */
    }
}
@media (orientation: portrait) {
    #goHome {
        top: 20px;
    }
}