@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Jersey+10&display=swap');

* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 40px;
font-family: Arial, "IBM Plex Mono";
background: white;
color: black;
}

h1 {
text-align: center;
margin: 0;
font-size: 52px;
}

h3 {
text-align: center;
font-size: 32px;
}

.links {
display: flex;
flex-direction: row;
gap: 20px;
position: static;
transform: none;
text-align: left;
}

a {
color: black;
text-decoration: underlind;
font-size: 20px;
}

a:hover {
background: #5f803d;
color: white;
}

#musicButton {
width: 150px;
cursor: pointer;
position: fixed;
top: 15px;
left: 35px;
}

#musicButton.playing {
animation: spin 5s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.music-player {
width: fit-content;
margin-right: auto;
text-align: left;
}

#songTitle {
font-weight: bold;
font-size: 20px;
}

#songDescription {
font-family: "IBM Plex Mono", monospace;
font-size: 13px;
}

#message {
font-family: "IBM Plex Mono", monospace;
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
min-height: 1.5em;
}

summary {
list-style: none;
cursor: default;
}
summary::-webkit-details-marker {
display: none;
}
details {
position: fixed;
top: 20px;
right: 35px;
}

.gifs {
padding: 10px;
position: fixed;
right: 15px;
top: 200px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
border: 1px solid black;
}

.gifs img {
width: 150px;
}