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

           body {
               background: linear-gradient(90deg,
                                           red, orange, yellow, green, blue, indigo, violet);
               background-size: 400% 400%;
               animation: rainbow 5s linear infinite;
           }

h1 {
    color: #ffffff;
    font-size: 100px;
    font-family: 'Dragon', sans-serif;
}

h2 {
    color: #03331e;
    font-size: 100px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

@font-face {
    font-family: 'Dragon';
    src: url('DoergonShift.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.opening {
    font-size: 30px;
    font-family: "DynaPuff", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.introbox {
display: block; /* Makes it only as wide as its content */
padding: 10px; /* Adds some spacing around the text */
background-color: rgba(170, 170, 170, 0.7); /* Light gray with 70% opacity */
border-radius: 20px; /* (Optional) Adds rounded corners for a smoother look */
border: 10px solid black;
margin-bottom: 30px;
}

button {
    font-size: 30px;
    margin-bottom: 20px;
}
.hidden { display: none; }
.toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}