/* 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: 'dreamwish'; /* Choose a descriptive name */
  src: url(/fonts/dreamwish.ttf);
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking of content */
}
@font-face {
  font-family: 'nimbusreg'; /* Choose a descriptive name */
  src: url(/fonts/NimbusSanL-Reg.otf);
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking of content */
}
@font-face {
  font-family: 'nimbusreg'; /* Choose a descriptive name */
  src: url(/fonts/NimbusSanL-Bol.otf);
  font-weight:bold;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking of content */
}
@font-face {
  font-family: 'nimbusreg'; /* Choose a descriptive name */
  src: url(/fonts/NimbusSanL-RegIta.otf);
  font-weight: normal;
  font-style: italic;
  font-display: swap; /* Helps prevent render-blocking of content */
}
@font-face {
  font-family: 'manrope'; 
  src: url(/fonts/manrope-regular.otf);
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}
@font-face {
  font-family: 'manropebold'; 
  src: url(/fonts/manrope-extrabold.otf);
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}
@font-face {
  font-family: 'hooey'; /* Choose a descriptive name */
  src: url(/fonts/HooeyDEMO-Regular.otf);
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking of content */
}
/* Apply the custom cursor to the entire webpage */

/* Optional: Apply a different cursor when hovering over links */

h1 {
    font-family: 'dreamwish';
    text-align: center;
    font-size: 70px;
}
h2 {
    font-family:'manropebold';
    text-align:center;
    text-decoration: underline;
    font-size: 30px;
}
h3 {
    font-family: 'manropebold';
    text-align: center;
}

header {
    color: white;
}
.collapsible {
  font-family: 'manropebold';
    background-color: #7DA5C5;
  color:#552f61;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 25px;
  cursor: url(/photos/starcursorgreen.png), auto;
}
body {
    background-color: #7DA5C5;
    background-image: url(photos/starborder.png);
    background-repeat: repeat-y;
    background-size: contain;
    cursor: url(/photos/starcursor.png), auto;
}
@media (max-width: 768px) {
    body {
        background-image: url(/photos/starbordermobile.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
}
.active, .collapsible:hover {
  background-color: #552f61;
  color:aliceblue
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #7DA5C5;
  color: #2B0E34;
  font-family:monospace;
  font-size: 20px;
}
.content.is-expanded{
    max-height:3000px;
    padding: 10px 18px;
}
html{
    scroll-behavior: smooth;
}
 a {
    color:#2B0E34;
}
 a:hover {
    color:#114d7f;
 cursor: url(/photos/starcursorgreen.png), pointer;
}
.dropdowns{
    margin-left: 17vw;
    margin-right: 17vw;
}
@media (max-width: 768px) {
.dropdowns{
    margin-left: 3vw;
    margin-right: 3vw;
}

}
hr {
    background-color:rgb(70, 35, 112);
    border:none;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-right: 17vw;
    margin-left: 17vw;
    height: 4px;
}
.shows {
    text-align: center;
    font-family:monospace;
    font-size: larger;
    padding-top: 5px;
    padding-bottom:15px;
    color:#49331D;
    margin-left: 19vw;
    margin-right: 19vw;
    margin-bottom: 20px;
    background-color: #c8c874;
    border: 6px dotted;
    border-radius: 5px;
    border-color:#49331D;
}
@media (max-width: 768px) {
    .shows {
          margin-left: 3vw;
         margin-right: 3vw;
    }
}
.socials {
    text-align: center;
    font-size:23px;
    font-family: 'manrope';
}
.album {
    font-family: monospace;
    text-align: center;
    color: #552f61;
    font-size: 20px;
}
.links {
display: flex; 
  flex-direction: column; 
  gap: 10px; 
  align-items: center; 
  color:#552f61;
  font-size: 20px;
}

.funstuff {
    border: 3px solid;
    border-color:#c8c874;
    background-color:#c8c874;
    border-radius: 5px;
    font-family: 'hooey';
    font-size: 35px;
    color: #49331D;
}
.funstuff:hover{
background-color:#49331D;
color:#c8c874;
cursor: url(/photos/starcursorgreen.png), auto;
}
.updates {
font-family: monospace;
color:#2B0E34;
display: block;
margin-left: 17vw;
margin-right:17vw;
height: 100px;
width: auto;
overflow: scroll;
padding-right: 1px;
}
/* For Webkit browsers (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 10px; /* or other desired width/height */
  /* setting a width or height helps force visibility on some systems */
}

::-webkit-scrollbar-thumb {
  background-color:#c8c874; /* color of the draggable part */
  border-radius: 5px;
}

::-webkit-scrollbar-track {
  background-color:#7DA5C5 /* color of the scrollbar track */
}