/* Hide Scrollbar */
html {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body {
    background-color: #273142; /* Vertcoin-themed background color */
    font-family: "Press Start 2P", cursive;
    user-select: none; /* Disable text selection */
}

h1 {
    font-weight: 600;
    font-size: 35px;
    text-align: center;
    margin-top: 100px;
    color: #048657; /* Vertcoin-themed text color */
}

h2 {
    text-align: center;
    font-weight: 700;
    font-size: 80px;
    margin-top: 300px;
    color: #048657; /* Vertcoin-themed text color */
}

h3 {
    text-align: center;
    margin-top: 40px;
    font-size: 25px;
    color: #048657; /* Vertcoin-themed text color */
}

.container {
    position: relative;
}

.dino {
    width: 6em;
    height: 4em;
    position: absolute;
    bottom: 0px;
    background-color: #048657; /* Vertcoin-themed color */
    display: flex;
    align-items: center;
    justify-content: center;
}

.dino-text {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff; /* White color for "CUDA" */
    transform: rotate(45deg); /* Rotate the text for a dynamic effect */
    position: relative; /* Add relative positioning to .dino-text for child positioning */
}

.gold-connector {
    width: 3px;
    height: 10px;
    background-color: #ffd700; /* Gold color for connectors */
    margin: 0 3px; /* Adjust spacing between connectors */
    position: absolute; /* Use absolute positioning to place connectors within the .dino-text */
    top: 1px; /* Adjust the distance from the top */
    right: 25px; /* Adjust the distance from the right for the second connector */
}

/* Additional Connectors */
.gold-connector:nth-child(2) {
    right: 7px; /* Adjust the distance from the right for the second connector */
}

.gold-connector:nth-child(3) {
    right: 1px; * Adjust the distance from the right for the second connector */
}

.gold-connector:nth-child(4) {
    right: 5px; * Adjust the distance from the right for the second connector */
}

.gold-connector:nth-child(5) {
    right: 9px; * Adjust the distance from the right for the second connector */
}

.gold-connector:nth-child(6) {
    right: 13px; * Adjust the distance from the right for the second connector */
}

.gold-connector:nth-child(7) {
    right: 17px; /* Adjust the distance from the left for the seventh connector */
}

.gold-connector:nth-child(8) {
    right: 21px; /* Adjust the distance from the left for the eighth connector */
}

/* Blinking Light Styles with RGB Fading Effect */
.blinking-light {
    width: 10px;
    height: 10px;
    background-color: #ff0000; /* Initial color (red) */
    border-radius: 50%;
    animation: fade 3s infinite; /* Fading animation */
}

@keyframes fade {
    0% {
        background-color: #ff0000; /* Red color at the start */
    }
    33% {
        background-color: #00ff00; /* Green color in the middle */
    }
    66% {
        background-color: #0000ff; /* Blue color towards the end */
    }
    100% {
        background-color: #ff0000; /* Back to red at the end */
    }
}

.dino-compute {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px; /* Adjusted font size for better visibility */
}

.obstacle {
    width: 20px;
    height: 75px;
    position: absolute;
    bottom: 0px;
    background-color: #048657; /* Vertcoin-themed color */
}

.reward {
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 160px;
    background-color: #048657; /* Vertcoin-themed color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward::before {
    content: "\2713";
    font-size: 18px;
    font-weight: bold;
    color: #ffffff; /* White color for the checkmark symbol */
}

/* Your p2pool node link styling */
#p2pool-node {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    color: #048657; /* Vertcoin-themed text color */
    user-select: none; /* Disable text selection */
}

#p2pool-node a {
    color: #048657; /* Vertcoin-themed text color */
    text-decoration: none;
}

/* Vertnode graphic (PI representation) styling */
#vertnode {
    position: absolute;
    top: 300px; /* Adjust the top position to align with the rewards */
    right: 10px;
    font-size: 54px; /* Adjust the font size as needed */
    display: flex;
    align-items: center;
}

.pi-art {
    font-family: "Press Start 2P", cursive;
    color: #048657; /* Vertcoin-themed text color */
    margin-left: 5px; /* Add some left margin for spacing */
}