body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    overflow: hidden; /* Prevent scrolling */
}

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.section, .buttons {
    padding-top: 100px; /* Remove padding */
}

button:active {
    transform: translateY(2px);
}

.is-hidden {
    display: none;
}

svg {
    width: 100%;
    height: 100%;
}

@keyframes grow-shrink {
    0%, 100% {
        r: 10;
    }
    50% {
        r: 70;
    }
}

@keyframes color-change {
    0%, 100% {
        stroke: #363636;
    }
    12.5% {
        stroke: #D81B60;
    }
    25% {
        stroke: #E53935;
    }
    37.5% {
        stroke: #FFB300;
    }
    50% {
        stroke: #FB8C00;
    }
    62.5% {
        stroke: #7CB342;
    }
    75% {
        stroke: #26A69A;
    }
    87.5% {
        stroke: #26C6DA;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

circle {
    stroke-width: 4; /* Thicker line */
    animation: grow-shrink 10s ease-in-out infinite, color-change 10s linear infinite;
}

svg {
    animation: rotate 60s linear infinite;
}

/* unvisited link */
a:link, a:visited {
    color: #26A69A;
}

/* mouse over link */
a:hover, a:active {
color: #D81B60;
}