/* Font Butterfly Kids */
.butterfly-kids-regular {
  font-family: "Butterfly Kids", cursive;
  font-weight: 400;
  font-style: normal;
}

/* Font Bagel */
.bagel-fat-one-regular {
font-family: "Bagel Fat One", system-ui;
font-weight: 400;
font-style: normal;
}

.fuzzy-bubbles-regular {
font-family: "Fuzzy Bubbles", sans-serif;
font-weight: 400;
font-style: normal;
}

:root {
  --page-scale: 1.2;
  --gallery-width: 26.25rem;
  --gallery-height: 57.5rem;
}

body, html {
position:relative;
padding: 0;
font-family: monospace;
background: url('images/bggrid-transp.png') repeat center;
background-color: #ffeef4;
scrollbar-color: #e5aff0 transparent;
zoom: var(--page-scale);
}

.header, .footer {
height: 14.375rem;
width: 100%;
color: transparent;
}
.header { position: relative; top: 0; }
.footer { position: absolute; top: 62.5rem; height: 12.5rem;}


.wrapper {
left: 50%;  
transform: translateX(-50%);
width: 26.25rem; height: 43.125rem;
background: #ebeaea;
box-shadow: 
0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.55),
-0.125rem  -0.125rem 0.0625rem rgba(255, 255, 255, 0.7);
z-index: 0;
position: relative;
scrollbar-color: #00000062 transparent;
scrollbar-width: thin; 
overflow: hidden; 
}

#gallery-posts {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
}

.wrapper.post-open .content {
overflow: hidden;
}


.box {
position: relative;
align-items: center;
justify-content: center;
border-radius: 10px;
overflow: visible;
}

.nav-buttons {
display: flex;
justify-content: left;
align-items: center;
height: 100%;
gap: 0.4375rem;
position: relative; /* create new stacking context */
z-index: 5;         /* above the GIFs */
}

.nav-button {
all: unset;
width: auto;
height: 2.5rem;
background-size: cover;
display: flex;
align-items: center;
justify-content: left;
font-family: sans-serif;
font-size: 0.75rem;
cursor: pointer;
position: relative;
z-index: 6;
}

.nav-button:hover{
font-weight: bold;
}

.navigation-bar{
width: 25.625rem;
padding: 0.3125rem;
}

#title{
display: flex;
flex-direction: row;
height: 1.25rem;
background-color: #fff0f7;
}

#title p{
text-indent: 0.625rem;
margin: 0.3125rem 0 0.3125rem 0;
}

#navigation{
width: 24.6875rem;
margin-left: 0.4375rem;
height: 1.875rem;
border-bottom: solid #9e9c9c;
}

.nav-button u{
margin: 0;
}

.titlebtns{
align-items: center;
text-align: center;
position: absolute;
display: flex;
flex-direction: row;
width: 4.375rem;
right: 0;
height: 1.25rem;
gap: 0.375rem;
cursor: pointer;
}

.titlebtn {
display: flex;
align-items: center;   /* vertical centering */
text-align: center;
margin: 0;
justify-content: center; /* horizontal centering */
background: #ebeaea;
width: 1.0625rem;
height: 1.0625rem;
box-shadow: 
-0.125rem -0.125rem 0.0625rem rgba(0, 0, 0, 0.55) inset,
0.125rem  0.125rem 0.0625rem rgba(255, 255, 255, 0.7) inset;
font-size: 0.625rem;
}

.titlebtn p{
margin: 0;
}

.profile{
font-family: "Roboto Mono";
height: 15.625rem;
width: 25.625rem;
padding: 0.3125rem;
display: grid;
overflow: visible;
grid-template-columns: repeat(8, 3.1875rem);
grid-template-rows: repeat(5, 3.125rem);
}

.profile p{
margin: 0;
font-size: 0.75rem;
}

.usrname{
grid-area: 1 / 2 / 2 / 3;
}

.pfp{
grid-area: 1 / 1 / 3 / 4;
margin: 1.25rem 1.25rem 1.25rem 1.5625rem;
border-radius: 50%;
background: url(images/pfp.jpg);
background-size: contain;
height: 5.625rem;
width: 5.625rem;
}

.followers{
grid-area: 1 / 4 / 3 / 9;
margin: 1.875rem 1.25rem 0.625rem 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1.875rem;
}

.follower-count{
font-size: 0.875rem;
text-align: center;
}

.follower-count p{
margin: 0;

}

.bio{
grid-area: 3 / 1 / 5 / 9;
margin: 1.875rem 0.625rem 0.625rem 0.9375rem;
}

.bio p{
font-size: 0.875rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}

.follow-btns{
grid-area: 5 / 1 / 6 / 9;
display: flex;
flex-direction: row;
gap: 1.25rem;
align-items: center;
justify-content: center;
}

.follow-btn{
width: 11.25rem;
height: 1.875rem;
box-shadow: 
-0.125rem -0.125rem 0.0625rem rgba(0, 0, 0, 0.55) inset,
0.125rem  0.125rem 0.0625rem rgba(255, 255, 255, 0.7) inset;
text-align: center;
justify-content: center;
align-items: center;
cursor: pointer;
}

#following{
background-color: #cccfd3;
}

.follow-btns p{
font-size: 0.875rem;
margin: 0.3125rem 0;
}

.box {
position: relative;
align-items: center;
justify-content: center;
margin: 0.1875rem;
overflow: visible;
}

.content{
margin: 0.625rem 0.625rem 1.25rem 0.625rem;
height: 17.5rem;
display: grid;
scrollbar-color: #c0c0c0 transparent;
scrollbar-width: thin; 
overflow: auto; 
grid-template-columns: repeat(3 , 8.0625rem);
grid-auto-rows: 8.125rem;
}



.music-name,
.artist-name{
height: 1.0625rem;
font-size: 0.75rem;
text-align: center;
text-transform: capitalize;
margin: 0.5rem 0.625rem 0.625rem 0.625rem;
}

.song-slider {
position: relative;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.125rem;
}

.seek-bar {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
overflow: hidden;
height: 0.3125rem;
border-radius: 10px;
background-color: #bebebe;
cursor: pointer;
z-index: 6;
}

.time-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
font-size: 0.625rem;
}

.seek-bar::-webkit-slider-thumb{
-webkit-appearance: none;
width: 0.3125rem;
height: 0.9375rem;
background: #777777;
box-shadow: -25rem 0 0 25rem #3d3d3d;
}

.current-time,
.song-duration {
position: static;
width: auto;
margin: 0;
font-size: 0.625rem;
white-space: nowrap;
flex-shrink: 0;
}

.controls{
width: 4.375rem;
flex-shrink: 0;
display: flex;
align-items: center;
}

.play-button{
position:relative;
width: 1.875rem;
height: 1.875rem;
border-radius: 50%;
background: #ebeaea;
cursor: pointer;
border: none;
}

.play-button span{
position: absolute;
top: 50%;
left: 35%;
transform: translateY(-50%);
width: 0.3125rem;
height: 0.75rem;
border-radius: 1px;
background: #885c44;
transition: .5s;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.play-button span:nth-child(2){
left: 55%;
transform-origin: center;
}

.play-button.pause span:nth-child(2){
transform: translateY(-50%) scaleY(0);
}

.play-button.pause span:nth-child(1){
width: 35%;
height: 45%;
left: 53%;
transform: translate(-50%, -50%);
border-radius: 0;
clip-path: polygon(0 0, 100% 50%, 100% 50%, 0% 100%);
}


.btn{
position: relative;
width: 0.9375rem;
height: 0.9375rem;
display: flex;
justify-content: center;
align-items: center;
border: none;
cursor: pointer;
background-color: #ebeaea;
}

#forwardbutton{
position: absolute;
height: 0.9375rem;
justify-content: center;
align-items: center;
z-index: 9;
}

#backbutton{
position: absolute;
height: 0.9375rem;
justify-content: center;
align-items: center;
z-index: 9;
}

#song-bar{
box-shadow: 
-0.125rem -0.125rem 0.125rem rgba(0, 0, 0, 0.25) inset,
0.125rem  0.125rem 0.125rem rgba(255, 255, 255, 0.45) inset;
margin-left: 0.625rem;
margin-right: 0.625rem;
width: 24.375rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.375rem;
}

.marquee{
overflow: hidden;
position: relative;
left: 0;
width: 7.5rem;
flex-shrink: 0;
}

#marquee-content p{
display: inline;
margin: 0.5rem 0 0.625rem 0 ;
}

.marquee-content {
transform: translateX(70%);
position:relative;
height: 1.875rem;
flex-shrink: 0;
display: flex;
flex-direction: row;
white-space: nowrap;
gap: 1rem;
width: 21.25rem;
animation: marquee-move-text 100s linear infinite;
animation-play-state: paused;
}

.marquee-content.play{
animation-play-state: running;
}

button.backwardbutton,
button.forwardbutton{
z-index: 9;
}

@keyframes marquee-move-text{
from{
transform: translateX(0%);
}
to{
transform: translateX(-1000%);
}
}


.hidden {
display: none;
}

.post {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: #ebeaea;
box-shadow: 
0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.55),
-0.125rem  -0.125rem 0.0625rem rgba(255, 255, 255, 0.7);
z-index: 10;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
overflow: hidden;
}

.post.visible {
opacity: 1;
pointer-events: auto;

}

.post.hidden {
display: none;
opacity: 0;
pointer-events: none;
}

.post-content {
position: relative;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}

.post-title {
position: relative;
display: flex;
flex-direction: row;
height: 1.25rem;
background-color: #fff0f7;
}

.post-title p {
text-indent: 0.625rem;
margin: 0.3125rem 0 0.3125rem 0;
}

.post-scroll {
overflow: hidden;
height: calc(100% - 1.25rem);
}

#post-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 0 0.625rem rgba(0,0,0,0.5);
}

.close-post {
background: none;
border: none;
font-size: 0.9375rem;
cursor: pointer;
color: #444;
}

.gallery-thumb,
.post-img {
background-repeat: no-repeat;
background-size: contain;
border-radius: 0;
}

.post-profile{
align-items: center;
margin-left: 0.4688rem;
height: 3.75rem;
margin-top: 0.625rem;
width: 24.6875rem;
display: flex;
flex-direction: row;
box-shadow: 
0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.55),
-0.125rem  -0.125rem 0.0625rem rgba(255, 255, 255, 0.7);
}

.post-pfp{
margin-right: 0.9375rem;
margin-left: 0.9375rem;
border-radius: 50%;
width: 3.4375rem;
height: 3.4375rem;
background: url("images/pfp.jpg");
background-size: contain;
}

.post-profile p{
font-family: sans-serif;
font-size: medium;
}

.post-profile-btn {
all: unset;
text-align: center;
justify-content: center;
align-items: center;
width: 3.125rem;
height: 1.875rem;
background-color: #ebeaea;
box-shadow: 
0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.55),
-0.125rem -0.125rem 0.0625rem rgba(255, 255, 255, 0.7);
margin-left: auto;
margin-right: 0.625rem;
cursor: pointer;
}

.post-img{
height: 24.375rem;
width: 24.375rem;
margin: 0.9375rem 0.9375rem 0.3125rem 0.9375rem;
box-shadow: 
0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.55),
-0.125rem -0.125rem 0.0625rem rgba(255, 255, 255, 0.7);
}

.post-interact{
display: flex;
flex-direction: row;
width: 100%;
height: 2.5rem;
margin: 0 0.125rem 0 1.25rem;
gap: 0;
}

.interactbtn{
display: flex;
font-size: 1.125rem;
color: #3d3d3d;
font-family: "Roboto Mono";
text-align: center;
justify-content: center;
align-items: center;
width: 4.375rem;
height: 2.1875rem;
box-shadow: 
0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.55),
-0.125rem -0.125rem 0.0625rem rgba(255, 255, 255, 0.7);
}

.interactbtn p{
margin: 0;
line-height: 1;
}

.description p{
margin: 0.125rem;
text-indent: 0.75rem;
font-size: 0.875rem;
}

.descriptiondata{
font-size: 0.6875rem;
color: #444;
}

.post-footer{
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 1.25rem;
width: 92%;
box-shadow: 
0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.55),
-0.125rem -0.125rem 0.0625rem rgba(255, 255, 255, 0.7);
margin: 0.625rem 0.75rem 0 0.75rem;
bottom: 0.625rem;
overflow: hidden;
}

.post-footer p{
font-size: 1rem;
margin: 0;
line-height: 1rem;
white-space: nowrap;
}

@media (max-width: 680px) {
  :root {
    --gallery-edge: 0.5rem;
    /* Scale to fit width; small pink margin on each side */
    --page-scale: calc((100vw - (var(--gallery-edge) * 2)) / var(--gallery-width));
  }

  body, html {
    padding: var(--gallery-edge);
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100dvh;
  }

  .header,
  .footer {
    height: 0;
  }

  .follow-btns{
    margin-top: 2.25rem;   
  }

  .footer {
    top: auto;
    position: relative;
  }

  #song-bar {
    width: calc(100% - 1.25rem);
    min-width: 0;
  }

  .song-slider {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .marquee {
    flex-shrink: 0;
    width: 6rem;
  }
}