* {
box-sizing: border-box;
}

html, body {
margin: 0;
padding: 0;
overflow: auto;   
/* background-image: url(bg2.jpg); */
background-color: #232323;
margin: auto;  
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;

}

body {
font-family: 'Poppins', sans-serif;
background-color: #232323;
margin: auto;  
}


#banner {
position: relative;
background: url(banner.jpg) no-repeat center center;
background-size: cover;
height: 576px;
width: 100%;
overflow: hidden;
animation: glitch4 0.7s infinite linear; 
border-bottom: 4px solid #71590f;
margin-bottom: 20px;
}

#banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 1px,
transparent 1px,
transparent 3px
);
z-index: 1;
pointer-events: none;

}

.card {  
flex: 1 1 auto;  
min-width: 333px;
max-width: 333px;
margin: 2vh 5vh 10vh; 
perspective: 1000px;
min-height: 900px;
position: relative;
transition: transform 0.5s ease, box-shadow 0.5s ease; 
opacity: 100%;
will-change: transform; 
}

.card::before {
content: '';
position: absolute;
top: -1px; right: -1px; 
bottom: -1px; left: -1px;
z-index: -1;
background: #181818;
border-radius: 10px; 
opacity: 0;
transition: opacity 0.5s ease-in-out, box-shadow 0.5s ease; 
box-shadow: 
0 0 10px #ffc107, 
0 0 20px #ffc107, 
0 0 30px #ffc107,
0 0 40px #ffca2c, 
0 0 50px #ffca2c,
0 0 60px #ffca2c,
0 0 70px #ffca2c;
}
.card::after {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
border-radius: 10px; 
background-color: rgba(0, 0, 0, 0); 
transition: background-color 0.5s ease-in-out; 
pointer-events: none; 
}

.card:hover::after {
background-color: rgba(0, 0, 0, 0.9); 
z-index: -1;
}
.card:hover {
transform: scale(1); 
opacity: 100%; 
}

.card:hover::before {
opacity: 1; 
}

.fa-copy, .fa-check {position: absolute; margin-left: 2px; }

#keyholderCardContent {  
display: flex;
flex-wrap: wrap;     
justify-content: center;  
overflow-y: visible; 
clear: both; 
}

.card-inner {
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
position: relative;
}

.card-inner * {
transform-style: preserve-3d;
}

.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}

.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
height: 900px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 100%, rgba(255, 255, 255, 0) 100%),
linear-gradient(225deg, rgba(0, 0, 0, 0.15) 100%, rgba(255, 255, 255, 0) 100%),
linear-gradient(315deg, rgba(0, 0, 0, 0.15) 100%, rgba(255, 255, 255, 0) 100%),
linear-gradient(45deg, rgba(0, 0, 0, 0.15) 100%, rgba(255, 255, 255, 0) 100%);
background-blend-mode: screen;
border-radius: 10px;
border: 1px solid black;
}

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

.back {
transform: rotateY(180deg);    
min-height: 900px;   
border-radius: 0 0 10px 10px; 
overflow: auto;
color: white;
}

.card img.avatar {
width: 110px;  
height: 110px;  
border-radius: 10%;
border: 3px solid #e6b517; 
margin-top: -80px;  
position: absolute;
left: 80%;
transform: translateX(-50%);
z-index: 2;   
transition: transform 0.5s ease; 
}

.card img.avatar:hover {
transform: translateX(-50%) rotate(720deg); 
}

.user-score {
position: absolute; 
display: flex;
justify-content: center;
align-items: center;
margin: 5px 0 5px 35px;
padding: 10px; 
color: rgb(31, 31, 31);
font-weight: bold;
font-family: 'Roboto', sans-serif;
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;
cursor: pointer;
outline: none;
position: absolute;
top: -38%;
left: -7%;
overflow: hidden;
font-size: 4vh;
width: 180px; 
height: 34px; 
z-index: 1;
}



.user-score .number {  font-size: 2.5vh; color: white;   font-family: 'Orbitron', sans-serif;  }
.user-score .word {display: none;}

.user-score:hover {
background-color: rgb(250, 41, 41); 

color: white;
}

.user-score:active {
transform: scale(0.95); 
}

.claim {
height: 6.5vh;
padding: 0;
margin: auto;
text-align: center;
}

.character {
background: linear-gradient(45deg, #ffd700, #ff8c00, #000000); 
color: white;
padding: 5px 12px;
border: 1px solid #ffd700; 
border-radius: 20px;
font-weight: bold;
width: 70%;
font-size: 14px;
font-family: 'Orbitron', sans-serif;
margin: 10px auto 0;
text-align: center;
box-shadow: 0 0 10px #ffd700, 0 0 20px #ff8c00, 0 0 30px #000000;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
display: block;
}

.character:hover {
background: linear-gradient(45deg, #000000, #ff8c00, #ffd700); 
box-shadow: 0 0 15px #ffd700, 0 0 25px #ff8c00, 0 0 35px #000000; 
transform: scale(1.05);
cursor: pointer; 
color: black;
}

.character:active {
transform: scale(0.95);
}



.username {
position: absolute; top: -78%; left: -4%; font-size: 0.3rem;

margin: 5px 0 5px 0px;  
color: white;
text-align: left; 
font-family: 'Roboto', sans-serif;
z-index: 1; 
padding: 5px 5px 5px 15px;

font-weight: bold;  
border: 2px solid rgb(250, 187, 41);
background-color: rgb(250, 187, 41);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-right: 0;
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;
cursor: pointer;
outline: none;
font-size: 20px;
width: 107.5%;

}

.username .codename {font-size: 12px;}
.username a {color: rgb(6, 6, 6); text-align: left; font-size: 18px; display: block;}

.username:hover {
background-color: rgb(250, 41, 41); 
color: white;
}

.card-header {
color: white;
padding: 10px 10px 0px;
margin-bottom: 0px; 
border-radius: 10px 10px 0 0;   
}

.card-header h3 {
font-size: 1.20em;
margin: 35px auto 10px ;
text-align: left; 
font-family: 'Orbitron', sans-serif;
color: #ffca2c;
border-bottom: 2px solid #ffca2c;
}

.card-header h3 a {
color: #ffca2c;
}

.card-header p {
font-size: 1.5vh;
margin-top: 0;
text-align: center;
}

.card-content {  
color: white;
font-size: 0.6em;
font-family: 'Space Mono', monospace;
padding: 0;
border-radius: 0 0 10px 10px;  
min-height: 25vh; 
border-top: 2px solid #f4d442;
margin: auto 1vh; 
}

.card-content p { 
margin: 0;  
padding: 0.4vh 0vh;
border-bottom: 0.1px solid #f4d442; 
padding: 0.4vh 0.4vh;
margin: 0.2vh 0vh;
background-color: rgba(0, 0, 0, 0.5);
}

.card-content p.twitter { 
font-size: 1.2em;
margin: 1vh 0.2vh;  
padding: 1vh;
border-bottom: none;  
border-radius: 5px;

}

.twitter-description {  
height: 6.3vh; 
}

.label {
font-weight: bold;
color: #f4d442; 
font-family: 'Space Mono', monospace;
font-size: 1.1em; 

letter-spacing: -1px;
}

.value {
font-weight: normal;
color: rgb(255, 255, 255);
}

.is-flipped {
transform: rotateY(180deg);
}

.card-inner.is-flipped {
transform: rotateY(180deg);
}

.flip-icon {
position: absolute;
top: 40px;
right: -10px;
cursor: pointer;
z-index: 100; 
width: 30px;
}



a {
color: #98eefd;  
text-decoration: none;  
transition: color 0.3s ease, text-shadow 0.3s ease;  
}

a:hover,
a:focus {
color: #fafd98;  
text-shadow: 1px 1px 8px rgba(0, 119, 204, 0.5);  
}

a:active {
color: #f45b69; 
text-shadow: none;
}

a.button-link {
display: inline-block;  
padding: 10px 20px;
margin: 10px;
background-color: #0077cc;
color: white;
border-radius: 5px; 
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);  
transition: all 0.3s ease;
}

a.button-link:hover {
background-color: #005fa3;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);  
}

a.button-link:active {
background-color: #f45b69;
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2);  
transform: translateY(1px);  
}

.verified-badge {
width: 20px;  
height: 20px; 
position: absolute;  
left: 10px;  
top: 10vh;  
background-color: white;
border-radius: 5px;
z-index: 10;
}



a {
color: #98eefd;  
text-decoration: none;  
transition: color 0.3s ease, text-shadow 0.3s ease;  
}

#btc {
position: absolute;
top: 25%;
left: 2%;
}

.btclabel {
font-weight: bold;
color: #f4d442; 
font-family: 'Orbitron', 'Space Mono', monospace; 
font-size: 1rem;
}

.btcvalue {
font-weight: normal;
color: rgb(255, 255, 255);
font-family: 'Space Mono', monospace; 
font-size: 1rem; 
}

#header {
background-color: #0a0a0a;
color: #fff;
padding: 30px 20px;
text-align: center;
border-bottom: 1px solid rgb(5, 5, 5);
margin-bottom: 10px;
position: relative;
}

        #searcher {
            width: 100%;
            display: block;
            text-align: center;
            margin: auto;
            position: absolute;
            top: 60%; 
            left: 50%;
            transform: translate(-50%, -50%);
        }

#searchUserInput {
    width: 60%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-bottom: 2px solid #00ff00; 
    background-color: transparent;
    color: #ffffff;
    font-size: 16px;
    outline: none; 
}

#searchUserInput::placeholder {
    color: #6f6f6f; 
}

#searchUserInput:focus::placeholder {
    color: #00ff00; 
}
 

        #clearButton {
            padding: 10px 20px;
            border: 2px solid #00ff00; 
            background-color: transparent;
            color: #ffffff;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }

        #clearButton:hover {
            background-color: #00ff00;
            color: #000000;
        }

#loader-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 9999; 
}

#message-display {
    font-family: 'orbitron', sans-serif;
    white-space: pre-line;
    color: #00FF00;
    padding: 20px;
    border: 1px solid #333;
    max-width: 600px;
    text-align: left;
}



#logo img { width: 200px; 
position: absolute;
top: 10%;
right: 2%;
};
.changes div {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-top: 5px;
border: 2px solid blue;
position: absolute;
top: 100%;
display: none;
}


.changes p:first-child { 
position: absolute;

top: 20px; 
left: 16%;
font-size: x-small;
font-weight: bold;
}

.changes p:last-child { 
position: absolute;
top: 32px; 
left: 16%;
font-size: x-small;
font-weight: bold;
}

.changes p.green { 
color: green; 

}

.changes p.red {  
color: red;
}

.mainline {
margin-bottom: 28px;
}

.chart-container {
max-height: 190px;  
overflow-y:hidden;
}

canvas {
display: block;
margin: 20px auto 0;
max-width: 100%;
height: 190px;
border: 1px solid #3e3e36;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.key-table { 
height: 40vh;
overflow-y: scroll;
margin-top: 5px;
background-color: black;
}

.token-table {
height: 40vh;
overflow-y: scroll;
margin-top: 5px;
background-color: black;
}

table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 0.9em; 
font-family: Arial, Helvetica, sans-serif;
overflow:hidden;
}

th, td {
border-bottom: 1px solid #000000;
padding: 1px;
color: white;
}

.key-table th, .token-table th {
display: none; 
}

th:nth-child(1) { width: 10%; }
th:nth-child(2) { width: 10%; }
th:nth-child(3) { width: 15%; }
th:nth-child(4) { width: 15%; }
th:nth-child(5) { width: 15%; }
th:nth-child(6) { width: 10%; }
th:nth-child(7) { width: 10%; }
th:nth-child(8) { width: 15%; } 

tr:nth-child(even) { }

tr:hover {
background-color: rgb(213, 75, 16, 241 );
}

  .game-card {
      width: 325px;
      resize: both;
      overflow: auto;
      border: 2px solid #000; 
      padding: 10px;
      font-family: 'Press Start 2P';
      font-family: 'Roboto', sans-serif;
      font-family: 'Arial', sans-serif;
      font-family: 'Helvetica', sans-serif;
      font-family: 'Verdana', sans-serif;
      color: silver; 
      z-index: 9999; // Set a higher z-index value
    }

.game-card h3 {margin-top: 15px; margin-bottom: 10px;}

    .game-stats h2, .game-stats h3 {
      color: white;
      text-shadow: 1px 1px 0 #fff;
    }

        .profile {
          display: flex;
          align-items: center;
          flex-direction: row; /* Change flex-direction to row */
        }

        .profile img {
          width: 150px;
          height: 150px;
          image-rendering: pixelated;
          margin-right: 10px; /* Change margin-bottom to margin-right */
        }

        .avatar-link,
        .player-status {
          display: block;
          text-align: right;
          margin-top: 10px; /* Add margin-top to create space between the elements */
        }

        .profile {
          display: flex;
          align-items: flex-start; /* Change align-items to flex-start */
          flex-direction: row; /* Change flex-direction to row */
        }

        .profile img {
          width: 150px;
          height: 150px;
          image-rendering: pixelated;
          margin-right: 10px; /* Change margin-bottom to margin-right */
          margin-bottom: 10px; /* Add margin-bottom to create space between the elements */
        }

        .avatar-link,
        .player-status {
          text-align: right;
          margin-top: 10px; /* Add margin-top to create space between the elements */
        }

    .fas {width: 1.5vh; height: 1.5vh; margin-right: 5px;}

        .profile-info p, .inventory ul li {
          color: silver;
        }

        .stat {
          display: flex;
          align-items: center;
          margin-bottom: 5px;
        }

        .bar {
          height: 15px;
          background-color: grey;
          border: 1px solid #000;
          width: 100%;
          display: flex;
          align-items: center;
          color: black;
        }

        .bar-value {
          background-color: white; 
          height: 100%;
        }

        .hp .bar-value {
          background-color: red; 
          height: 100%;
        }

       .energy .bar-value {
          background-color: green; 
          height: 100%;
        }

        .combat {
        }

        .wit {
        }

        .power {
        }

        .finesse {
        }

        .sanity {
        }


 
 /* Registration Form Styles */
#registration {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(13, 19, 24, 0.6);
    padding: 10px;
    border-bottom-right-radius: 5px;
    text-align: left;
    z-index: 10;
}

#registration form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}

.form-group input[type='text'],
.form-group input[type='password'] {
    font-size: 0.8vw;
    padding: 0.25vw;
    background-color: #181728;
    border: 2px solid #33ccff;
    border-radius: 5px;
    color: #ffffff;
    outline: none;
    opacity: 0.7;
    width: 7vw;
    margin-right: 10px;
}

.form-group button {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8vw;
    padding: 0.25vw 0;
    background: rgba(13, 19, 24, 0.6);
    border: 2px solid #33ccff;
    border-radius: 5px;
    color: #33ccff;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s, color 0.3s;
    width: 7vw;
}

.form-group button:hover { 
    color: #83fff7;
    border: 2px solid #83fff7;
}

#registration .form-group label {
    display: block;
    margin-bottom: 5px;
    color: #666;
font-size: x-small;
}

#passwordGroup {
    display: flex;
    flex-direction: row; /* Ensure this is 'row' */
    align-items: center;
    margin-right: 10px; /* Adjust as needed */
}

#passwordGroup label {
    margin-left: 10px;
    margin-top: 0px;
}

/* Checkbox and Label Container Styles */
/* Eye Icon Container */
#showPasswordContainer {
    display: flex;
    align-items: center; /* Center vertically */
    cursor: pointer;
    color: #eb8a2a; 
}

/* Style for eye icon */
.eye-icon {
    margin-left: 10px;
    font-size: 1.2rem; /* Adjust size as needed */
    vertical-align: middle; /* Center vertically with respect to adjacent text/input */
}

/* Style for disabled button */
.form-group  .disabled-button {
    border: 2px solid grey; /* Greyed out border */
    color: grey; /* Greyed out text color */
    cursor: not-allowed; /* Indicates the button is disabled */
    background: rgba(13, 19, 24, 0.6); /* Maintain the same background */
}

/* Hover effect removed from disabled button */
.form-group .disabled-button:hover {
    border: 2px solid grey;
    color: grey;
    background: rgba(13, 19, 24, 0.6);
}
 


.neon-effect {
    text-shadow: 0 0 5px #33ccff, 0 0 10px #33ccff, 0 0 20px #33ccff, 0 0 30px #33ccff, 0 0 40px #33ccff;
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        text-shadow: 0 0 5px #33ccff, 0 0 10px #33ccff, 0 0 20px #33ccff, 0 0 30px #33ccff, 0 0 40px #33ccff;
    }
    to {
        text-shadow: 0 0 10px #1ab2ff, 0 0 20px #1ab2ff, 0 0 30px #1ab2ff, 0 0 40px #1ab2ff, 0 0 50px #1ab2ff;
    }
}


.close-button {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background: none;
    color: black;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 10px;
font-size: large;
}

/* Optional: Style for hover effect */
.close-button:hover {
    color: #f00;
}

.user-info-content {
    position: relative;
}





#userInfo {
    width: 300px;
    margin: 20px auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#userInfo h2 {
    color: #28a745;
    margin-bottom: 10px;
}

#userInfo p {
    color: #333;
    font-size: 14px;
}

.logged-in-state h3 {
    color: white;
    text-align: left;
    padding: 0px;
font-size: 14px;
font-family: 'VT323', monospace; 
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 30vh;
}