:root {
    /*Declare variable values*/
    --jun9: #000500;
    --spacing: 0px;
    --font_main: 'Titillium Web', sans-serif;
    --trackHeight: calc((100vw/3)/3);
    --trackWidth: calc((100vw/3)/3);


}

body {
    background: rgb(0, 0, 0); 
    color: rgba(0,0,0,0.87);
    font-family: var(--font_main);
    justify-content: center;
    margin: 0;
    padding: 0;
}

#headbar-container {
    background: white;
}

#message { 
    background: white; 
    max-width: 20vw; 
    margin: 5vw auto 16px; 
    padding: 1.5vh 1vw; 
    border-radius: 3px; 
}


      
#message h1 { 
    font-size: 22px; 
    font-weight: 277; 
    color: rgba(0,0,0,0.6); 
    margin: 0 0 16px;
    text-align: center;
}

#message h2 { 
    color: #000000; 
    font-weight: bold; 
    font-size: 16px; 
    margin: 0 0 8px;
    text-align: center;
    
}

#message h5 {
    text-align: center;
}
      
#message p { 
    line-height: 140%;
    text-align: center;
    margin: 16px 0 24px; 
    font-size: 14px; 
}
      
#message a {
    display: block;
    text-align: center;
    /* width: 277px; */
    background: #000000;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    padding: 16px;
    border-radius: 4px;
}
      
#message, #message a { 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
}

#share {
    display: block;
    text-align: center;
    /* width: 277px; */
    background: #000000;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    padding: 16px;
    border-radius: 4px;

}


      
#load { 
    color: rgba(0,0,0,0.4); 
    text-align: center; 
    font-size: 13px; 
}

#midbar-container {
    background: rgb(0, 0, 0);
    color: white
}
#love-letter #paradise {
    display: flex;
    justify-content: center;
}
.album {
    width: 20vw;
}

.frame {
    display: flex;
    justify-content: center;
    text-align: center;
}

.theatre {
    display: grid;
    margin: auto;
    height: calc(100vw/3);
    width: calc(100vw/3);
    background: #000500;
    min-height: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    font-family: var(--font_main);
}

.track {
    font-family: var(--font_main);
    text-align: center;
    height: calc(100vw/3/3);
    width: calc(100vw/3/3);
    background: white;
}

.track > canvas {
    height: var(--trackHeight);
    width: var(--trackWidth);
    min-width: 100%;
    max-width: 100%;
}
.track-hovered .track > canvas {
    transform: scale(9);
    z-index: -9;
}

#footbar-container {
    background: rgb(0, 0, 0);
}
.apple-music {
    display: none;
}
#bc {
    width: 33.3vw;
    height: 100vh;
}
@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    .apple-music {
        display: block;
    }
  }
@media (max-width: 600px) {
    body, #message {
        justify-content: center;
        
        margin-top: 0; 
        background: white; 
        box-shadow: none; 
    }
    
    body { 
        border-top: 16px solid #000000; 
    }

    #message {
        max-width: 90vw;
        min-height: 69vh;
    }

    .album {
        width: 90vw;
    }
    #bc {
        width: 90vw;
        height: 100vh;
    }
    .theatre{
        width: 100vw;
        display: grid;
        margin: auto;
        background: #000500;
        height: 57vh;
        min-height: 57%;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        font-family: var(--font_main);
    }
    .theatre > .track {
        width: calc(100vw/3);
        height: calc(100vw/3);
    }
    .track > canvas {
        width: calc(100vw/3);
        height: calc(100vw/3);
        max-width: 100%;
        max-height: 100%;
    }
}