/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */

body {
    background-image: url("ftbsbg.png");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: Verdana;
}
/* Button stays the same */
#menuButton {
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin: 10px;
    
    position: absolute;
    top: 0px;
    right: 0px;
}

/* Dropdown menu (scrollframe style) */
#menu {
    position: absolute;
    top: 50px; /* below button */
    right: 0px;

    width: 130px;
    max-height: 250px; /* limits height */
    
    background: #222;
    border: 2px solid black;

    overflow-y: auto;   /* vertical scroll */
    overflow-x: hidden;

    display: none; /* hidden by default */
}

/* Show when open */
#menu.open {
    display: block;
}

/* Links stacked vertically */
#menu a {
    display: block;
    color: white;
    padding: 10px;
    text-decoration: none;
}

#menu a:hover {
    background: #444;
}
.spin-slow {
    /* Use the standard transform (vendor prefixes optional for modern browsers) */
    transform-origin: center; /* rotate around the center */
    animation: spin 60s linear infinite; /* 60 seconds for one full rotation */
}

.textbox {
    background: white;
    padding: 20px;
    margin: 40px auto;

    width: 80%;
    max-width: 99900600px;

    
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.textbox img {
    max-width: 100%;  /* images shrink to fit the textbox width */
    height: auto;     /* keeps aspect ratio */
    display: block;   /* removes inline spacing issues */
    margin: 10px 0;   /* optional spacing between images */
}

.spin-fast {
    transform-origin: center; 
    animation: spin 10s linear infinite; 
}

/* Keyframes for full 360° rotation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}