body {
    background: linear-gradient(210deg, rgba(17,75,95,1) 10%, rgba(244,91,105,1) 100%);
    background-size: 400% 400%;
    height: 100vh;
    margin: 0px;
    overflow: hidden;
}

#title {
    color: #E4FDE1;
    margin: auto 0 auto 0;
    font-size: large;
    font-family: Optima, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#info {
    background-color: #456990;
    width: 24rem;
    position: absolute;
    z-index: 1000;
    padding: 1rem;
    margin: 1rem;
    border-style: solid;
    border-width: 8px;
    border-color: #E4FDE1;
}

.img {
    position: absolute;
	transform: translate(-50%, -50%);
}

.img[data-status="inactive"] {
    display: none;
}

.img[data-status="active"] {
    width: 72vmin;
    display: block;
}

.img[data-status="current"] {
    width: 80vmin;
    display: block;
    border-style: solid;
    border-width: 8px;
    border-top-width: 56px;
    border-color: #E4FDE1;
    box-shadow:
    0 0 60px 30px #ffffff20,  /* inner white */
    0 0 100px 60px #f0ffff20, /* middle magenta */
    0 0 140px 90px #0fffff20; /* outer cyan */
}

a {
    display: block;
    width: 100%;
    color: #E4FDE1;
}

#title {
    position: fixed;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 1.2em;
    font-weight: bold;
    z-index: 1000;
}

#floating-title {
    position: fixed;
    transform: translateX(-50%);
    pointer-events: none;
    color: #007bff;
    text-shadow: 2px 2px 4px rgba(255, 0, 155, 0.8);
    font-size: 2em;
    font-weight: bold;
    z-index: 100;
    font-family: Optima, Cochin, Georgia, Times, 'Times New Roman', serif;
    white-space: nowrap;
}

@media (max-width: 768px) {
    body {
        background: #456990;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    #info {
        width: 100%;
        margin: 0;
        padding: 1rem;
        position: relative;
        min-height: 100vh;
        box-sizing: border-box;
    }

    .img,
    #floating-title {
        display: none !important;
    }

    a {
        padding: 1rem 0;
        margin: 0.5rem 0;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        text-decoration: none;
        transition: background-color 0.3s ease;
        text-indent: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    a:active {
        background: rgba(255, 255, 255, 0.2);
    }
}