/* Center the card on the screen */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
    margin: 0;
    font-family: 'Orbitron', sans-serif;
}

/* Style the card */
.card {
    width: 700px;
    padding: 20px;
    background-color: #333;
    color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 30px yellow;
    text-align: center;
    position: relative;
    border: 3px solid yellow;
}

/* Style the header section */
.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: #444;
    padding: 10px;
    border-radius: 5px;
}

/* Style the profile picture */
.logo {
    width: 100px;
    height: auto;
    margin-right: 20px;
}

/* Style the profile information */
.profile-info {
    text-align: left;
}

/* Style the name */
.name {
    margin: 0;
    font-size: 1.8em;
}

/* Style the white part of the name */
.name .white {
    color: #fff;
}

/* Style the red part of the name */
.name .red {
    color: yellow;
}

/* Style the occupation */
.occupation {
    margin: 0;
    font-size: 1.2em;
    color: #ddd;
}

/* Style the small buttons container */
.small-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

/* Style the small buttons */
.small-button {
    display: flex;
    align-items: center;
    background-color: transparent;
    color: #999;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    cursor: pointer;
    border: 3px solid;
    transition: color 0.3s, border-color 0.3s;
}

/* Style the images inside small buttons */
.small-button img {
    width: 20px;
    height: 20px;
    margin-bottom: 5px;
}

/* Add hover effects to small buttons */
.small-button:hover {
    color: #fff;
    animation: border-flicker 2s linear forwards;
}

/* Add hover effects to images inside small buttons */
.small-button:hover img {
    animation: letter-flicker 3s linear 1;
}

/* Style the description */
.description {
    font-size: 1em;
    margin: 20px 0;
    background-color: #444;
    padding: 10px;
    border-radius: 5px;
}

/* Style the buttons container */
.buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* Style the buttons */
.button {
    display: flex;
    align-items: center;
    background-color: transparent;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
}

/* Add hover effects to buttons */
.button:hover {
    background-color: transparent;
    color: #00c0ff;
    border-color: #00c0ff;
    color: #00c0ff;
    box-shadow: 0 0 10px #00c0ff;
    animation: border-flicker-blue 2s linear forwards;
    animation: border-flicker 2s linear forwards;
}

/* Style the icons inside buttons */
.button i {
    margin-right: 10px;
}

/* Add hover effects to icons inside buttons */
.button:hover i {
    animation: letter-flicker 3s linear 1;
}

/* Custom flicker animations for each button */

/* Style for SnowBits button */
.snowbits {
    border-color: #4c0000; /* dimmed red */
}
.snowbits:hover {
    border-color: red;
    color: red;
    box-shadow: 0 0 10px red;
    animation: border-flicker-red 2s linear forwards;
}

/* Style for Avvy Domains button */
.avvy {
    border-color: #666666; /* dimmed white */
}
.avvy:hover {
    border-color: white;
    color: white;
    box-shadow: 0 0 10px white;
    animation: border-flicker-white 2s linear forwards;
}

/* Style for Intelligence On Chain button */
.ioc {
    border-color: #1c1c1c; /* dimmed black */
}
.ioc:hover {
    border-color: black;
    color: black;
    box-shadow: 0 0 10px black;
    animation: border-flicker-black 2s linear forwards;
}

/* Style for Wallet Guard button */
.wallet-guard {
    border-color: #003300; /* dimmed green */
}
.wallet-guard:hover {
    border-color: #00fe00;
    color: #00fe00;
    box-shadow: 0 0 10px #00fe00;
    animation: border-flicker-green 2s linear forwards;
}

/* Style for Revoke Cash button */
.revoke-cash {
    border-color: #666600; /* dimmed yellow */
}
.revoke-cash:hover {
    border-color: yellow;
    color: #fefe01;
    box-shadow: 0 0 10px yellow;
    animation: border-flicker-yellow 2s linear forwards;
}

/* Style for 3NUM Shield button */
.three-num {
    border-color: #5d0299; /* dimmed purple */
}
.three-num:hover {
    border-color: purple;
    color: #da00ff;
    box-shadow: 0 0 10px purple;
    animation: border-flicker-purple 2s linear forwards;
}

/* Keyframes for border flicker with custom colors */
@keyframes border-flicker-blue {
  2% {
        border: 3px solid #00ffff; /* neon-blue */
        box-shadow: 0 0 15px -1px #00ffff, 
        0 0 12px -1px #00ffff inset;
    }
  3% {
        border: 3px solid #008aff;
        box-shadow: none;
    }
}


@keyframes border-flicker-red {
  2% {
        border: 3px solid #ff0000; /* neon-red */
        box-shadow: 0 0 15px -1px #ff0000, 
        0 0 12px -1px #ff0000 inset;
    }
  3% {
        border: 3px solid #800000;
        box-shadow: none;
    }
5% {
        border: 3px solid #ff0000; 
        box-shadow: 0 0 15px -1px #ff0000, 
        0 0 12px -1px #ff0000 inset;
    }
  6% {
        border: 3px solid #800000;
        box-shadow: none;
    }
  7% {
        border: 3px solid #ff0000;
        box-shadow: 0 0 15px -1px #ff0000, 
        0 0 12px -1px #ff0000 inset;
    }
  9% {
        border: 3px solid #800000;
        box-shadow: none;
    }
  13% {
        border: 3px solid #ff0000;
        box-shadow: 0 0 15px -1px #ff0000, 
        0 0 12px -1px #ff0000 inset;
    }
  16% {
        border: 3px solid #800000;
        box-shadow: none;
    }
  18% {
        border: 3px solid #ff0000;
        box-shadow: 0 0 15px -1px #ff0000, 
        0 0 12px -1px #ff0000 inset;
    }
  22% {
        border: 3px solid #800000;
        box-shadow: none;
    }
  34% {
        border: 3px solid #ff0000;
        box-shadow: 0 0 15px -1px #ff0000, 
        0 0 12px -1px #ff0000 inset;
    }
  36% {
        border: 3px solid #800000;
        box-shadow: none;
    }
  54% {
        border: 3px solid #ff0000;
        box-shadow: 0 0 15px -1px #ff0000, 
        0 0 12px -1px #ff0000 inset;
    }
  100% {
        border: 3px solid #ff0000;
        box-shadow: 0 0 15px -1px #ff0000, 
        0 0 12px -1px #ff0000 inset;
    }
}

@keyframes border-flicker-white {
  2% {
        border: 3px solid #ffffff; /* white */
        box-shadow: 0 0 15px -1px #ffffff, 
        0 0 12px -1px #ffffff inset;
    }
  3% {
        border: 3px solid #888888;
        box-shadow: none;
    }
5% {
        border: 3px solid #ffffff; 
        box-shadow: 0 0 15px -1px #ffffff, 
        0 0 12px -1px #ffffff inset;
    }
  6% {
        border: 3px solid #888888;
        box-shadow: none;
    }
  7% {
        border: 3px solid #ffffff;
        box-shadow: 0 0 15px -1px #ffffff, 
        0 0 12px -1px #ffffff inset;
    }
  9% {
        border: 3px solid #888888;
        box-shadow: none;
    }
  13% {
        border: 3px solid #ffffff;
        box-shadow: 0 0 15px -1px #ffffff, 
        0 0 12px -1px #ffffff inset;
    }
  16% {
        border: 3px solid #888888;
        box-shadow: none;
    }
  18% {
        border: 3px solid #ffffff;
        box-shadow: 0 0 15px -1px #ffffff, 
        0 0 12px -1px #ffffff inset;
    }
  22% {
        border: 3px solid #888888;
        box-shadow: none;
    }
  34% {
        border: 3px solid #ffffff;
        box-shadow: 0 0 15px -1px #ffffff, 
        0 0 12px -1px #ffffff inset;
    }
  36% {
        border: 3px solid #888888;
        box-shadow: none;
    }
  54% {
        border: 3px solid #ffffff;
        box-shadow: 0 0 15px -1px #ffffff, 
        0 0 12px -1px #ffffff inset;
    }
  100% {
        border: 3px solid #ffffff;
        box-shadow: 0 0 15px -1px #ffffff, 
        0 0 12px -1px #ffffff inset;
    }
}

@keyframes border-flicker-black {
  2% {
        border: 3px solid #000000; /* black */
        box-shadow: 0 0 15px -1px #000000, 
        0 0 12px -1px #000000 inset;
    }
  3% {
        border: 3px solid #333333;
        box-shadow: none;
    }
5% {
        border: 3px solid #000000; 
        box-shadow: 0 0 15px -1px #000000, 
        0 0 12px -1px #000000 inset;
    }
  6% {
        border: 3px solid #333333;
        box-shadow: none;
    }
  7% {
        border: 3px solid #000000;
        box-shadow: 0 0 15px -1px #000000, 
        0 0 12px -1px #000000 inset;
    }
  9% {
        border: 3px solid #333333;
        box-shadow: none;
    }
  13% {
        border: 3px solid #000000;
        box-shadow: 0 0 15px -1px #000000, 
        0 0 12px -1px #000000 inset;
    }
  16% {
        border: 3px solid #333333;
        box-shadow: none;
    }
  18% {
        border: 3px solid #000000;
        box-shadow: 0 0 15px -1px #000000, 
        0 0 12px -1px #000000 inset;
    }
  22% {
        border: 3px solid #333333;
        box-shadow: none;
    }
  34% {
        border: 3px solid #000000;
        box-shadow: 0 0 15px -1px #000000, 
        0 0 12px -1px #000000 inset;
    }
  36% {
        border: 3px solid #333333;
        box-shadow: none;
    }
  54% {
        border: 3px solid #000000;
        box-shadow: 0 0 15px -1px #000000, 
        0 0 12px -1px #000000 inset;
    }
  100% {
        border: 3px solid #000000;
        box-shadow: 0 0 15px -1px #000000, 
        0 0 12px -1px #000000 inset;
    }
}

@keyframes border-flicker-green {
  2% {
        border: 3px solid #00fe00; /* neon green */
        box-shadow: 0 0 15px -1px #00fe00, 
        0 0 12px -1px #00fe00 inset;
    }
  3% {
        border: 3px solid #008c00;
        box-shadow: none;
    }
  5% {
        border: 3px solid #00fe00; 
        box-shadow: 0 0 15px -1px #00fe00, 
        0 0 12px -1px #00fe00 inset;
    }
  6% {
        border: 3px solid #008c00;
        box-shadow: none;
    }
  7% {
        border: 3px solid #00fe00;
        box-shadow: 0 0 15px -1px #00fe00, 
        0 0 12px -1px #00fe00 inset;
    }
  9% {
        border: 3px solid #008c00;
        box-shadow: none;
    }
  13% {
        border: 3px solid #00fe00;
        box-shadow: 0 0 15px -1px #00fe00, 
        0 0 12px -1px #00fe00 inset;
    }
  16% {
        border: 3px solid #008c00;
        box-shadow: none;
    }
  18% {
        border: 3px solid #00fe00;
        box-shadow: 0 0 15px -1px #00fe00, 
        0 0 12px -1px #00fe00 inset;
    }
  22% {
        border: 3px solid #008c00;
        box-shadow: none;
    }
  34% {
        border: 3px solid #00fe00;
        box-shadow: 0 0 15px -1px #00fe00, 
        0 0 12px -1px #fefe01 inset;
    }
  36% {
        border: 3px solid #008c00;
        box-shadow: none;
    }
  54% {
        border: 3px solid #00fe00;
        box-shadow: 0 0 15px -1px #00fe00, 
        0 0 12px -1px #00fe00 inset;
    }
  100% {
        border: 3px solid #00fe00;
        box-shadow: 0 0 15px -1px #00fe00, 
        0 0 12px -1px #00fe00 inset;
    }
}

@keyframes border-flicker-yellow {
  2% {
        border: 3px solid #fefe01; /* neon yellow */
        box-shadow: 0 0 15px -1px #fefe01, 
        0 0 12px -1px #fefe01 inset;
    }
  3% {
        border: 3px solid #aaaa00;
        box-shadow: none;
    }
  5% {
        border: 3px solid #fefe01; 
        box-shadow: 0 0 15px -1px #fefe01, 
        0 0 12px -1px #fefe01 inset;
    }
  6% {
        border: 3px solid #aaaa00;
        box-shadow: none;
    }
  7% {
        border: 3px solid #fefe01;
        box-shadow: 0 0 15px -1px #fefe01, 
        0 0 12px -1px #fefe01 inset;
    }
  9% {
        border: 3px solid #aaaa00;
        box-shadow: none;
    }
  13% {
        border: 3px solid #fefe01;
        box-shadow: 0 0 15px -1px #fefe01, 
        0 0 12px -1px #fefe01 inset;
    }
  16% {
        border: 3px solid #aaaa00;
        box-shadow: none;
    }
  18% {
        border: 3px solid #fefe01;
        box-shadow: 0 0 15px -1px #fefe01, 
        0 0 12px -1px #fefe01 inset;
    }
  22% {
        border: 3px solid #aaaa00;
        box-shadow: none;
    }
  34% {
        border: 3px solid #fefe01;
        box-shadow: 0 0 15px -1px #fefe01, 
        0 0 12px -1px #fefe01 inset;
    }
  36% {
        border: 3px solid #aaaa00;
        box-shadow: none;
    }
  54% {
        border: 3px solid #fefe01;
        box-shadow: 0 0 15px -1px #fefe01, 
        0 0 12px -1px #fefe01 inset;
    }
  100% {
        border: 3px solid #fefe01;
        box-shadow: 0 0 15px -1px #fefe01, 
        0 0 12px -1px #fefe01 inset;
    }
}

@keyframes border-flicker-purple {
    2% {
        border: 3px solid #da00ff; /* neon purple */
        box-shadow: 0 0 15px -1px #da00ff, 
        0 0 12px -1px #da00ff inset;
    }
    3% {
        border: 3px solid #6f00b5;
        box-shadow: none;
    }
    5% {
        border: 3px solid #da00ff; 
        box-shadow: 0 0 15px -1px #da00ff, 
        0 0 12px -1px #da00ff inset;
    }
    6% {
        border: 3px solid #6f00b5;
        box-shadow: none;
    }
    7% {
        border: 3px solid #da00ff;
        box-shadow: 0 0 15px -1px #da00ff, 
        0 0 12px -1px #da00ff inset;
    }
    9% {
        border: 3px solid #6f00b5;
        box-shadow: none;
    }
    13% {
        border: 3px solid #da00ff;
        box-shadow: 0 0 15px -1px #da00ff, 
        0 0 12px -1px #da00ff inset;
    }
    16% {
        border: 3px solid #6f00b5;
        box-shadow: none;
    }
    18% {
        border: 3px solid #da00ff;
        box-shadow: 0 0 15px -1px #da00ff, 
        0 0 12px -1px #da00ff inset;
    }
    22% {
        border: 3px solid #6f00b5;
        box-shadow: none;
    }
    34% {
        border: 3px solid #da00ff;
        box-shadow: 0 0 15px -1px #da00ff, 
        0 0 12px -1px #da00ff inset;
    }
    36% {
        border: 3px solid #6f00b5;
        box-shadow: none;
    }
    54% {
        border: 3px solid #da00ff;
        box-shadow: 0 0 15px -1px #da00ff, 
        0 0 12px -1px #da00ff inset;
    }
    100% {
        border: 3px solid #da00ff;
        box-shadow: 0 0 15px -1px #da00ff, 
        0 0 12px -1px #da00ff inset;
    }
}

/* Keyframes for letter flicker */
@keyframes letter-flicker {
    2% { 
        color: rgb(230, 0, 120);
        text-shadow: 0 0 15px rgb(230, 0, 120);
    }
    3% {
        color: rgba(120, 0, 50, 0.8);
        text-shadow: none;
    }
    6% {
        color: red;
        text-shadow: none;
    }
    7% {
        color: rgb(230, 0, 120);
        text-shadow: 0 0 15px rgb(230, 0, 120);
    }
    8% {
        color: rgba(120, 0, 50, 0.8);
        text-shadow: none;
    }
    9% {
        color: red;
        text-shadow: none;
    }
    11% {
        color: rgb(230, 0, 120);
        text-shadow: 0 0 15px rgb(230, 0, 120);
    }
    14% {
        color: rgba(120, 0, 50, 0.8);
        text-shadow: none;
    }
    15% {
        color: red;
        text-shadow: none;
    }
    16% {
        color: rgb(230, 0, 120);
        text-shadow: 0 0 15px rgb(230, 0, 120);
    }
    17% {
        color: rgba(120, 0, 50, 0.8);
        text-shadow: none;
    }
    18% {
        color: red;
        text-shadow: none;
    }
    19% {
        color: rgb(230, 0, 120);
        text-shadow: 0 0 15px rgb(230, 0, 120);
    }
    21% {
        color: rgba(120, 0, 50, 0.8);
        text-shadow: none;
    }
    22% {
        color: red;
        text-shadow: none;
    }
    23% {
        color: rgb(230, 0, 120);
        text-shadow: 0 0 15px rgb(230, 0, 120);
    }
    25% {
        color: rgba(120, 0, 50, 0.8);
        text-shadow: none;
    }
    26% {
        color: red;
        text-shadow: none;
    }
    28% {
        color: rgb(230, 0, 120);
        text-shadow: 0 0 15px rgb(230, 0, 120);
    }
    29% {
        color: rgba(120, 0, 50, 0.8);
        text-shadow: none;
    }
    30% {
        color: red;
        text-shadow: none;
    }
    80% {
        color: red;
        text-shadow: none;
    }
    100% {
        color: red;
        text-shadow: none;
    }
}