@font-face {
    font-family: "Sant Joan Despi Regular";
    src: url('https://dollicia.neocities.org/fonts/SantJoanDespiRegular.ttf') format("truetype");
}
@font-face {
    font-family: "Cloister Black";
    src: url(https://dollicia.neocities.org/fonts/CLOISTERBLACK.TTF) format("truetype");
}
@font-face {
    font-family: "Monsieur La Doulaise";
    src: url(https://dollicia.neocities.org/fonts/MonsieurLaDoulaise-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "MeaCulpa";
    src: url(https://dollicia.neocities.org/fonts/MeaCulpa-Regular.ttf) format("truetype");
}

body {
    padding: 50px;
    transition: background 0.6s ease;
}


.box {
    background-image: url(https://dollicia.neocities.org/Moodboard/_%20-%202026-03-10T155925.229.jpeg);
    width: 800px;
    height: 900px;
    margin: 0 auto;
    align-items: center;
    border: ridge 10px #F4D5F6;
    border-radius: 100px 100px 0px 0px;
    padding: 9px;
}

.border {
    background-image: url(https://dollicia.neocities.org/Moodboard/c6e69be38f39cb6660d44ad28f778065.jpg);
    background-size: 90%;
    height: 870px;
    border-radius: 100px 100px 0px 0px;
    border: ridge 10px white;
    
}

.header {
    background-image: url(https://dollicia.neocities.org/Moodboard/Ethereal%20pink%20banner%20%E2%9D%A4%EF%B8%8F.jpeg);
    border-radius: 91px 91px 0px 0px;
    height: 110px;
    display: flex;
    border: ridge 8px #F4D5F6;
    align-items: center;
    justify-content: center;
    font-size: 50px;
     white-space: pre-wrap;
     color: #A79CA8;
}

a {
    text-decoration: none;
    color: #C6A0C9;
    white-space: pre-wrap;
    padding: 20px;
    font-size: 30px;
}

.buttonheader {
    background-image: url(https://dollicia.neocities.org/Moodboard/_%20-%202026-03-10T155925.229.jpeg);
    height: 50px;
    font-family: Sant Joan Despi Regular;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: ridge 4px #F4D5F6;
    border-top: none;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  font-family: Sant Joan Despi Regular;
  transition: opacity 0.5s ease;
}

.page:target {
  opacity: 1;
  visibility: visible;
}

.content img {
    width: 150px;
    position: absolute;
    

}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-corner {
    background: #E2BED8;
}

::-webkit-scrollbar-thumb {
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: #EEBAE0;
  background-size: 7px;
  border: 1px solid #fff;
  border-radius: 2px;
  box-shadow: inset -3px 0 #BC94B1, inset 1px 1px white
}

.content {
    flex: 1;
  position: relative;
  width: 100%;
  height: 700px; /* adjust depending on how tall your board is */
  overflow-x: hidden;
  overflow-y: scroll;
}

body:has(#Lolita:target) {
  background: url("https://file.garden/aZ3MxO6aIVfqStzs/pngs/moodboard%20stuff/_%20-%202026-03-11T002858.395.jpeg");
  background-size: 30%;
  background-attachment: fixed;
}

body:has(#Gothia:target) {
  background: url("https://file.garden/aZ3MxO6aIVfqStzs/pngs/moodboard%20stuff/_%20-%202026-03-11T002911.562.jpeg");
  background-size: cover;
  background-attachment: fixed;
}

body:has(#Cutegore:target) {
  background: url("https://file.garden/aZ3MxO6aIVfqStzs/pngs/moodboard%20stuff/_%20-%202026-03-11T002903.783.jpeg");
  background-size: cover;
  background-attachment: fixed;
}

body:has(#Grotesque:target) {
  background: url("https://file.garden/aZ3MxO6aIVfqStzs/pngs/moodboard%20stuff/_%20-%202026-03-11T002924.063.jpeg");
  background-size: cover;
  background-attachment: fixed;
}

body:has(#Media:target) {
  background: url("https://file.garden/aZ3MxO6aIVfqStzs/pngs/moodboard%20stuff/_%20-%202026-03-11T002858.395.jpeg");
  background-size: 30%;
  background-attachment: fixed;
}

.audiostuff {
    background-image: url(https://dollicia.neocities.org/Moodboard/_%20-%202026-03-10T155925.229.jpeg);
    width: 200px;
    height: 0.1px;
    margin-left: 20px;
    border: ridge 4px #F4D5F6;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px; /* space between moodboard and audio box */
}

.controls   {
    margin-top: -10px;
}

#playpause-btn {
    transition: transform 0.3s ease;
}

#playpause-btn:not(.playing) {
    transform: scale(1);  /* bigger when paused */
}

#playpause-btn.playing {
    transform: scale(1.3);    /* normal size when playing */
}