:root {
    --background-container: rgba(0, 0, 0, 0.6);
}

* { margin: 0; padding: 0; }
html {
    position: relative;
    overflow-x: hidden;
    background-color: red;
}

body {
    background-color: #0a0e14;
}

h1, h2 { color: rgba(0, 0, 0, 0.7); }
h1 { animation: 3s ease 0s infinite pulse-title; }
h2 { font-size: 1rem; }

.main {
    min-height: 100vh;
    display: grid;
    font-family: sans-serif;
    text-align: center;
    justify-items: center;
    color: #fff;
    grid-template-rows: 1fr auto;
    background: radial-gradient(at 85% 25%, rgba(17,119,238, 0.15) 0%, rgba(17,119,238,0) 100%) no-repeat,
        radial-gradient(at 20% 75%, rgba(255, 0, 255, 0.05) 0%, rgba(255,0,255,0) 100%) no-repeat;
}

.main::before {
    content: '';
    background: url(background.svg) top center no-repeat;
    background-size: cover;
    position: absolute;
    inset: 0;
    opacity: 0.35;
}

.main::after {
    content: '';
    position: absolute;
    inset: 0;
    animation: 10s ease 0s infinite pulse-background;
}

.main > * {
    max-width: 600px;
    padding: 0 20px;
    position: relative;
    z-index: 0;
}

.logo {
    padding: 50px 0 20px;
}

.logo img {
    position: relative;
    z-index: 10;
}

.gradients {
    position: absolute;
    inset: 0;
    overflow: hidden;
    max-width: none;
}

.gradients::before {
    content: '';
    display: block;
    position: absolute;
    width: 750px;
    height: 750px;
    inset: -250px auto auto calc(50% - 540px);
    background: radial-gradient(50% 50% at 50% 50%, #17e, rgba(17, 119, 238, 0));
    offset-path: circle(25px at 50% 50%);
    z-index: 0;
    animation: 23s ease-in-out 0s infinite beat-blue;
}

.gradients::after {
    content: '';
    display: block;
    position: absolute;
    width: 750px;
    height: 750px;
    inset: -110px calc(50% - 500px) auto auto;
    background: radial-gradient(50% 50% at 50% 50%, #f0f, rgba(255, 0, 255, 0));
    offset-path: circle(50px at 50% 50%);
    z-index: 0;
    animation: 20s ease-in-out 0s infinite beat-pink;
}

progress {
    --full-length: 50vh;
    width: 75%;
    margin-top: 15px;
    /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
    height: 7px;
    box-shadow: 0 0 10px #00000052;
}

progress::-webkit-progress-bar { background: var(--background-container); border-radius: 10px; }
progress::-webkit-progress-value { background: linear-gradient(to right, #17e 0, #f0f var(--full-length)); border-radius: 10px;  }

.content {
    z-index: 100;
}

.content p {
    margin: 20px 0;
}

.footer {
    background: var(--background-container);
    padding: 10px 20px;
    justify-self: normal;
    max-width: none;
    color: rgba(255 255 255 / 50%);
}

.languageChooser { list-style: none; position: absolute; inset: 15px 15px auto auto; display: flex; gap: 10px;}
.iconFlag { border-radius: 3px; cursor: pointer; opacity: 0.5 }
.iconFlag:hover, .iconFlag.active { opacity: 1; }

@keyframes pulse-title {
    0%, 50%, 100% {  color: rgba(0, 0, 0, 0.4); }
    30%, 80% { color: rgba(0, 0, 0, 0.6); }
}

@keyframes pulse-background {
    0%, 50%, 100% {  background: rgba(0, 0, 0, 0.1); }
    30%, 80% { background: rgba(0, 0, 0, 0); }
}

@keyframes beat-blue {
    0% { offset-distance: 0%; }
    0%, 65%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.3, 1.3); opacity: 0.5; }
    30% { transform: scale(0.9, 0.9); }
    80% { transform: scale(1.6, 1.6);opacity: 0.75; }
    100% { offset-distance: 100%; }
}

@keyframes beat-pink {
    0% { offset-distance: 0%; }
    0%, 65%, 100% { transform: scale(1, 1); }
    50% { transform: scale(0.8, 0.8); }
    30% { transform: scale(1.2, 1.2); opacity: 0.75; }
    80% { transform: scale(1.5, 1.5); opacity: 0.5; }
    100% { offset-distance: 100%; }
}

.shoutBoxContainer {
    min-height: 300px !important;
    width: auto !important;
    margin-bottom: 20px;
    background: var(--background-container);
    border: 0 none !important;
    border-radius: 20px !important;
}
.shoutBoxContainer .shoutBoxHeader {
    background: rgb(255 255 255 / 5%);
    border: 0 none;
    box-shadow: none;
    padding: 5px;
    border-radius: 15px 15px 5px 5px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.shoutBoxContainer .shoutBoxHeader:hover {
    background: rgb(255 255 255 / 10%);
}
.shoutBoxContainer .shoutBoxAvatar { filter: invert(1); }
.shoutBoxContainer .configPanel { background: transparent; border-radius: 20px; overflow: hidden; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
#shoutBoxUserList {
    margin-top: 10px;
    background: var(--background-container);
    border-radius: 10px;
}
#shoutBoxUserList .shoutBoxUserItem { padding: 5px 10px; }
#shoutBoxUserList .shoutBoxUserItem:hover { background: rgba(255 255 255 / 5%) }
#shoutboxAdminImage, #shoutboxAdminLoginBtn { margin: 4px !important; }
#shoutChat { text-align: left; bottom: 30px; }
#shoutChat .shoutServerText:has(a) { display: none; }
#shoutChat .shoutServerText { background: #1177ee82;
    padding: 9px;
    margin: 3px 0;
    border-radius: 5px; }
#shoutChat .shoutServerText button {
    background: rgba(255 255 255 / 10%);
    color: #fff;
    border: 0 none;
    border-radius: 20px;
    padding: 4px 8px;
}
#shoutChat .shoutServerText button:hover { background: rgba(255 255 255 / 15%) }
#shoutChat .shoutText {
    border: 0 none;
    border-radius: 5px;
    margin-top: 1px;
    background: rgba(255, 255, 255, 0.05);
}
#shoutChat .shoutText:hover { background: rgba(255, 255, 255, 0.05); }
.shoutBoxContainer .shoutInput { border: 0 none; }
#shoutBoxInput { background: rgba(255 255 255 / 20%); border-radius: 5px 5px 15px 15px; padding: 7px 10px; }
#shoutBoxInput:hover, #shoutBoxInput:focus { background: rgba(255 255 255 / 30%); }