html{
    overflow: hidden;
}

body{
    background-image: url("nightsky.png");
    background-size: cover;
}

button{
    background: none;
    border: none;
    cursor: pointer;
}

#the{
    font-family:'Courier New', Courier, monospace;
    position: absolute;
    color: white;
    top: 300px;
    left: 1100px;
    font-size: 30px;
}

#medium{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    position: absolute;
    color: white;
    top: 300px;
    left: 400px;
    font-size: 140px;
}

#isthe{
    font-family:'Courier New', Courier, monospace;
    position: absolute;
    color: white;
    top: 200px;
    left: 800px;
    white-space: nowrap;
    font-size: 30px;
}

#message{
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    position: absolute;
    color: white;
    top: 100px;
    left: 90px;
    font-size:40px;

}

img{
    position: absolute;
    max-width: 100%;
    height: 80%;
    top: 330px;
    left: 1100px;
}

:root{
    cursor: none;
    --cursorX: 50vw;
    --cursorY: 50vh;
}
:root:before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    pointer-events: none;
    background: radial-gradient(
      circle 10vmax at var(--cursorX) var(--cursorY),
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.5) 80%,
      rgba(0,0,0,.95) 100%
    );
    z-index: 11;
}

audio::-webkit-media-controls-panel{
    background-color: rgb(221, 208, 131);
}
audio::-webkit-media-controls-play-button{
    background-color: rgb(236, 223, 151);
    border-radius: 50%;
}
audio::-webkit-media-controls-play-button:hover{
    background-color: rgb(255, 246, 196);
}