body, #canvas {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
}

.animated-background {
    background: linear-gradient(69deg, rgba(3,29,90,1) 23%, rgba(58,81,135,1) 65%, rgba(148,130,125,1) 100%);
    background-size: 180% 180%;
    animation: gradient-animation 18s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.center {
    margin: 1rem;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
}

.logo {
    width: 100%;
}

.listen {
    border: solid;
    border-color: #fd8666;
    color: #1b356e;
    background-color: #e3b181; 
    border-radius: 12px;
    width: 50%;
}

#safari-alert {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    border: solid;
    border-color: #fd8666;
    z-index: 100;
    max-width: 300px;
    margin-top: 1rem;
    background-color: #e3b181;
}

.safari-text {
    width: 100%;
    text-align: center;
    margin: 0;
    color: #1b356e;
    margin-bottom: 0.5rem;
}

#safari-button {
    border-radius: 8px;
    width: 100%;
}