/*
#This code is written by Honzys

Copyright (c) 2026 Honzys. All rights reserved.

This source code is the property of Honzys and is protected by copyright law.
Unauthorized copying, modification, distribution, or use of this code,
via any medium, is strictly prohibited without prior written permission
from Honzys.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    padding: 0;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /*background: linear-gradient(50deg, rgb(6, 95, 49), rgb(39, 115, 134), rgb(114, 4, 174));*/
    background: linear-gradient(50deg, #065f31, #277386, #7204ae);
    background-size: 600% 600%;

    -webkit-animation: gradientAnim 10s ease infinite;
    -moz-animation: gradientAnim 10s ease infinite;
    animation: gradientAnim 10s ease infinite;
}

@-webkit-keyframes gradientAnim {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradientAnim {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradientAnim {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.title {
    font-family: "Montserrat", sans-serif;
    font-style: italic;
    font-weight: bold;
    font-size: 3em;
    color: rgb(31, 26, 26);
    margin-bottom: 15px;
    text-align: center;
}

.text {
    font-family: "Montserrat", sans-serif;
    font-style: italic;
    font-size: 1.4em;
    color: rgb(31, 26, 26);
    margin-bottom: 20px;
}

.filesButton, .filesBtnSelector {
    width: 100%;
    background: blue;
    transition: background 5s ease;
    font-family: "Montserrat", sans-serif;
    font-style: italic;
    font-size: 1em;
    color: rgb(31, 26, 26);
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
}

.filesButton:hover {
    width: 100%;
    transition: background 5s ease;
    background: linear-gradient(50deg, #065f31, #277386, #7204ae);
    background-size: 600% 600%;

    -webkit-animation: gradientAnim 3 ease infinite;
    -moz-animation: gradientAnim 3s ease infinite;
    animation: gradientAnim 3s ease infinite;
    cursor: pointer;
}

/*button {
    background: blue;
    transition: background 5s ease;
}

button:hover {
    transition: background 5s ease;
    background: linear-gradient(50deg, #065f31, #277386, #7204ae);
    background-size: 600% 600%;

    -webkit-animation: gradientAnim 3 ease infinite;
    -moz-animation: gradientAnim 3s ease infinite;
    animation: gradientAnim 3s ease infinite;
    cursor: pointer;
}*/

.filesContainerAll {
    display: none;
    position: relative;
    width: 35vw;
    height: 20vh;
    font-family: "Montserrat", sans-serif;
    font-style: italic;
    font-size: 1.4em;
    color: rgb(20, 203, 90);
    border: 5px inset rgb(34, 235, 7);
    background: linear-gradient(180deg, #9c0d0d, #0a29a7);
    border-radius: 20px;    
    -webkit-animation: gradientAnim1 5s ease infinite;
    -moz-animation: gradientAnim1 5s ease infinite;
    animation: gradientAnim1 5s ease infinite;
    background-size: 600% 600%;
    padding: 20px 5px 0px 5px;
    z-index: 399;
}

@-webkit-keyframes gradientAnim1 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradientAnim1 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradientAnim1 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#meText {
    position: absolute;
    bottom: 1%;
    right: 1%;
}

#output {
    display: block;
    text-align: justify;
}

.crossBtns {
    display: inline;
    width: 30px;
    height: 30px;
    padding: 0px;
    margin: 0;
    background: transparent;
    border: none;
    overflow: visible;
    cursor: pointer;
}

#realCross {
    position: absolute;
    left: 1%;
    bottom: 1%;
    opacity: 0.05;
}

#fakeCross {
    position: absolute;
    top: 1%;
    right: 1%;
    opacity: 1;
}

.fakeCrossBtn {
    display: none;
}

.realCrossBtn {
    opacity: 1;
    position: absolute;
    top: 1%;
    right: 1%;
}


#showFilesBtn {
    background: rgba(98, 197, 11, .4);
    border: none;
    margin: 0;
    cursor: pointer;
    border-radius: 10px;
    width: fit-content;
    height: auto;
    padding: 10px;

}

#showFilesBtn:hover {
    transition: background 5s ease;
    background: linear-gradient(50deg, #000000, #1aa461, #7204ae, #000000);
    background-size: 600% 600%;
    border: 3px solid rgb(19, 162, 219);
    -webkit-animation: gradientAnim 3 ease infinite;
    -moz-animation: gradientAnim 3s ease infinite;
    animation: gradientAnim 3s ease infinite;
    cursor: pointer;
}

#listContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    text-align: center;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

a {
    text-decoration: none;
    color: black;
}


.playerBtns {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-color:hsl(120, 100%, 50%);
    border: transparent;
    border-radius: 10px;
    font-family: "Montserrat", sans-serif;
    font-style: italic;
    font-size: 1.4em;
    padding: 10px;
    margin: 30px 10px;
    cursor: pointer;
}

.btnRows {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 80px;
    margin: 0;
    padding: 0;
}

.pfp {
    max-width: 70px;
    max-height: 70px;
    border-radius: 50%;
}

.gobackBtn {
    position: absolute;
    top: 1%;
    right: 1%;
    height: 3em;
    width: auto;
    height: auto;
    background: blue;
    transition: background 5s ease;
    border-radius: 10px;
    padding: 10px;
    border: none;
    font-family: "Montserrat", sans-serif;
    text-align: center;
    align-items: center;
    align-content: center;
    cursor: pointer;
}

.gobackBtn:hover {
    transition: background 5s ease;
    background: linear-gradient(50deg, #065f31, #277386, #7204ae);
    background-size: 600% 600%;

    -webkit-animation: gradientAnim1 3s ease infinite;
    -moz-animation: gradientAnim1 3s ease infinite;
    animation: gradientAnim1 3s ease infinite;
    cursor: pointer;
}

.playerPage {
    max-width: fit-content;
    max-height: fit-content;
}

.formWrapper {
    display: flex;
    position: relative;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
}

#registerPanel, #loginPanel {
    z-index: 500;
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(80, 87, 101, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#LoginRegisterBtns, .panel p {
    overflow: visible;
    display: flex;
}

.LogInandRegisterBtns {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    position: relative;
    display: flex;
    flex: 1;
    padding: 6px 40px;
    transition: all 0.35s ease;
    height: auto;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.LogInandRegisterBtns.active {
    background: linear-gradient(to bottom, #5c6474 50%, #4c5362 50%);
    box-shadow: 0 0 10px 3px rgba(255, 102, 0, 0.9);
    z-index: 500000;
}

.LogInandRegisterBtns:not(.active) {
    background: linear-gradient(to bottom, #505765 50%, #4c5362 50%);
    opacity: 0.85;
}

#loginBtn,
#registerBtn {
    color: rgb(255, 255, 255);
    padding: 10px 107px;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.15s ease;
}

#loginBtn:hover,
#registerBtn:hover {
    background-color: rgb(178, 71, 0);
    transform: translateY(-1px);
}

.menuBtn {
    border: 1px solid rgba(255, 102, 0, 1);
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(255, 102, 0, 1), rgba(255, 140, 60, 1));
    margin: 0;
    padding: 0;
    width: 100%;
    transition: all 0.25s ease;
}

.menuBtn:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 18px rgba(255, 102, 0, 0.4);
}

#usernameLogin,
#usernameRegister,
#emailRegister,
#passwordLogin,
#passwordRegister {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background-color: rgba(77, 77, 77, 0.9);
    margin-bottom: 0;
    transition: all 0.25s ease;
    box-sizing: border-box;
    width: 100%;
}

#passwordLogin,
#passwordRegister {
    margin-top: 10px;
    margin-bottom: 10px;
}

#usernameLogin:focus,
#usernameRegister:focus,
#emailRegister:focus,
#passwordLogin:focus,
#passwordRegister:focus {
    outline: none;
    border-color: rgba(255, 102, 0, 0.9);
    box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.25);
}

.logInFormstyle {
    margin: 10px 0;
    padding: 12px 10px;
    width: 100%;
    border-radius: 8px;
    color: #fff;
}

.loginHelp {
    padding: 2px;
    color: rgba(200, 200, 200, 0.9);
    font-size: 0.75em;
    font-family: Arial, Helvetica, sans-serif;
}

.helpLogin {
    text-decoration: none;
    transition: color 0.2s ease;
}

.helpLogin:hover {
    color: rgba(255, 140, 60, 1);
}

.noAccnt {
    margin: 6px 0;
}

.panel {
    opacity: 0;
    transform: translateX(40px);
    pointer-events: none;
    position: absolute;
    width: 100%;
    transition: all 1s ease;
}

.panel.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

.panelWrapper {
    width: 100%;
    position: relative;
}

.AgmaFilesImg {
    display: block;
    position: absolute;
    top: -330px;
    left: 50%;
    transform: translate(-50%);
    width: 300px;
    height: auto;
    margin: 0;
    background-color: none;
    pointer-events: none;

}


#updateLog {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 300px;
    max-width: 25%;
    background-color: rgba(50, 50, 60, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    z-index: 700;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#updateLog h3 {
    margin-bottom: 10px;
    font-size: 1.4em;
    text-align: center;
    text-shadow: 0 0 5px rgba(255, 102, 0, 0.8);
}

#updateLog ul {
    list-style: none;
    padding-left: 0;
    max-height: fit-content;
    font-size: 0.9em;
    line-height: 1.5em;
}

#updateLog ul li::before {
    content: "• ";
    color: #ff6600;
    font-weight: bold;
}

#updateLog:hover {
    transform: scale(1.05);
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

#importantPanel {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 280px;
    max-width: 25%;
    background-color: rgba(40, 50, 70, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    z-index: 700;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#importantPanel h3 {
    margin-bottom: 10px;
    font-size: 1.4em;
    text-align: center;
    text-shadow: 0 0 5px rgba(0, 200, 255, 0.7);
}

#importantPanel ul {
    list-style: none;
    padding-left: 0;
    max-height: fit-content;
    overflow-y: auto;
    font-size: 0.9em;
    line-height: 1.5em;
}

#importantPanel ul li::before {
    content: "• ";
    color: #1aa4ff;
    font-weight: bold;
}

#importantPanel:hover {
    transform: scale(1.05);
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

.specialThanks {
    background: linear-gradient(270deg, #00ff88, #7b2cff, #00ff88);
    background-size: 200% 100%;
    animation: NightbladeText 2s linear infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.2em;
}

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

.loggedInstyle {
    position: absolute;
    top: 1%;
    left: 1%;
    font-family: "Montserrat", sans-serif;
    font-size: 1.1em;
    width: fit-content;
    height: auto;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 5px;
    border: none;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);

}

#userPfp {
    border-radius: 50%;
    width: 60px;
    height: auto;
    margin-right: 10px;
}

#Icon {
    width: 80px;
    height: auto;
    margin-left: 10px;
}

.listPfp {
    position: relative;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.listPfp:hover {
    transform: scale(5);
    z-index: 10;
}

#image1 {
    position: absolute;
    top: 2%;
    right: 2%;
    width: 300px;
    height: min-content;
}

#image2 {
    position: absolute;
    bottom: 2%;
    left: 2%;
    width: 700px;
    height: auto;
}

#image3 {
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 600px;
    height: auto;
}

#image4 {
    position: absolute;
    bottom: 25%;
    left: 21.5%;
    width: 400px;
    height: auto;
}

#vid1 {
    position: absolute;
    top: 14%;
    left: 2%;
    height: auto;
    width: 250px;
}

#agmaAnthem {
    position: absolute;
    left: 20%;
    bottom: 40%;
    width: 200px;
}

#agmafilesimg1 {
    width: 300px;
    height: auto;
    margin: 0px;
}

.agmaPics:hover {
    scale: 1.1;
}