@font-face {
    font-family: "Handjet";
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
      "ELGR" 1,
      "ELSH" 2;
    font-display: swap;
    src: url(./Handjet/Handjet.ttf) format('truetype');
}

html, body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevents scrolling */
}

body {
    position: relative; /* Ensures the positioning context for absolute elements */
}

.center-container {
    display: grid;
    place-items: center;
    height: auto;
    text-align: center;
}

#nowPlaying{
    position: absolute;
    top: 10px; 
    right: 10px; 
    font-family: "Handjet";
}

#hash{
    position: absolute; 
    bottom: 5px; 
    left: 10px; 
    color: black; 
    word-wrap: break-word; /* Breaks the words at the end of the line to the next line */
    font-family: "Handjet";
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* This will center the content vertically */
    z-index: 10;
    width: 80%;
    height: 80%;
    background-color: rgba(255, 255, 255, 0.5);
}

#content {
    display: flex; /* Change this from none to flex when you want it to appear */
    flex-direction: column;
    justify-content: center; /* Center content vertically within itself */
    align-items: center; /* Center content horizontally within itself */
    color: black;
    text-align: center;
    font-family: "Handjet";
    width: 100%; /* Ensure it takes the full width of the container */
}