.hero-section {
    position: relative;
    background-color: #101118; /* Dark background */
    height: 100vh; /* Full height */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
}

.text-mask-container {
    position: relative;
    height: 55vh; /* Adjust this height to fit the maximum expected size of text-mask */
}

.text-mask {
    font-size: 7vw; /* Responsive font size */
    font-weight: bold;
    color: transparent;
    background-image: url('../img/hero-image.png'); /* Path to your image */
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    mix-blend-mode: screen; /* This will blend the text with the background */
    text-align: center;
    max-width: 100%; /* Prevent text from spilling out */
    margin: 0 auto; /* Center the text horizontally */
    height: 55vh; /* Adjust based on maximum expected text size */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    line-height: 1.2em;
}

.text-mask::after {
    content: '|';
    opacity: 1; /* Ensure it's visible initially */
    animation: blink 1s step-end infinite;
}

.text-mask.blinking-cursor::after {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.subtext {
    color: #fff; /* Assuming a light text color */
    max-width: 100%; /* Or whatever width suits your design */
    margin-top: 20px; /* Space from the main text */
    font-size: 1.2em; /* Slightly larger than normal text for readability */
    line-height: 1.5; /* For better readability */
    text-align: center; /* To match the alignment of your main text */
    margin-top: 20vh;
}

body {
    background-color: #101118;
}

.logo {
    width:250px;
    height:auto;
}

/* Minimum size */
@media (max-width: 600px) {
    .text-mask {
        font-size: 15vw; /* Minimum font size */
    }
}

/* Maximum size */
@media (min-width: 1200px) {
    .text-mask {
        font-size: 120px; /* Maximum font size */
    }
}

.text-container {
    z-index: 1; /* Ensure text is above images */
    position: relative;
}


/* Styling for the text and button */
h2 {
    color: #fff;
}

h1 {
    color: #fff;
}

.lead {
    color: #fff;
}

.text-secondary {
    color: #aaa;
}

.btn-dark {
    background-color: #000;
    border: none;
}

.btn-dark:hover {
    background-color: #333;
}


.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    align-items: center;
    justify-items: center;
    position: relative;
}

.text-content {
    grid-column: 1 / -1; /* The text content spans all columns */
    position: relative; /* For z-index stacking context */
    z-index: 2; /* Ensures text content is above the images */
}

.floated-img {
    width: 8vw; /* Or the size of your preference */
    height: auto;
    z-index: 1; /* Below the text content */
    transition: all 0.3s ease;
}

/* Position the images around the text */
.img-top-left { grid-row: 1; grid-column: 1; }
.img-top-right { grid-row: 1; grid-column: 3; }
.img-bottom-left { grid-row: 3; grid-column: 1; }
.img-bottom-right { grid-row: 3; grid-column: 3; }
.img-top { grid-row: 1; grid-column: 2; }
.img-bottom { grid-row: 4; grid-column: 2; }

/* Rotate images on the left by -45 degrees */
.img-top-left, .img-bottom-left {
    transform: rotate(-15deg);
}

/* Rotate images on the right by 45 degrees */
.img-top-right, .img-bottom-right {
    transform: rotate(15deg);
}

/* Adjust positioning for rotated images */
.floated-img {
    /* ... other styles ... */
    transition: all 0.3s ease;
    will-change: transform; /* Improves performance for animations */
}

/* Medium screens (e.g., small tablets, large phones) */
@media (max-width: 768px) and (min-width: 601px) {
    .text-mask {
        font-size: 15vw; /* Intermediate font size */
    }
}

@media (max-width: 768px) {
    .text-mask-container {
        height: 50vh; /* Smaller height for smaller screens */
    }


    .subtext {
        margin-top: 10vh; /* Smaller margin for smaller screens */
    }

    .image-grid {
        /* Change to a two-row grid with text content in the middle */
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto;
        gap: 10px;
        padding: 10px; /* Add some padding to the container */
    }

    .floated-img {
        /* Remove the width calculation and let the images take up the full column width */
        width: 90%; /* Each image takes the full width of its column */
        max-width: none; /* Override any max-width set outside of the media query */
        height: auto; /* Maintain aspect ratio */
        transform: none !important; /* Reset transformations */
    }

    /* Position images in the top row */
    .img-top { grid-column: 1; }
    .img-top-left { grid-column: 2; }
    .img-top-right { grid-column: 3; }

    /* Position the text content in the middle row */
    .text-content {
        grid-column: 1 / -1; /* Stretch across all columns */
        grid-row: 2; /* Place in the second row */
    }

    /* Position images in the bottom row */
    .img-bottom-left { grid-column: 1; }
    .img-bottom { grid-row: 3; grid-column: 2; }
    .img-bottom-right { grid-column: 3; }
}


/* Very small screens (e.g., mobile phones) */
@media (max-width: 480px) {
    .text-mask {
        font-size: 10vw; /* Even smaller font size */
    }
}

/* Optionally, for very large screens, you might want to cap the font size */
@media (min-width: 1200px) {
    .text-mask {
        font-size: 5vw; /* Maximum font size */
    }
}

.social-buttons {
    bottom: 20px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%); /* Center the buttons */
    display: flex;
    flex-direction: row; /* Aligns the buttons in a row */
    gap: 10px; /* Space between buttons */
}

.social-button {
    display: inline-block;
    width: 50px; /* Size of the button */
    height: 50px; /* Size of the button */
    border-radius: 50%; /* Make it round */
    overflow: hidden;
    text-decoration: none;
    color: white;
    background-color: #1DA1F2; /* Default background, could be transparent or any color */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
    z-index:9999;
}

.social-button img {
    width: 60%; /* Adjust the size of the logo */
    height: auto;
    display: block; /* Remove extra space under the image */
    z-index:9999;
}

.twitter:hover {
    background-color: #0d8ddb; /* Darker shade for hover */
    z-index:9999;
}

.discord {
    background-color: #7289DA; /* Discord color */
    z-index:9999;
}

.discord:hover {
    background-color: #5b6eae; /* Darker shade for hover */
    z-index:9999;
}

footer {
    position: fixed; /* Fixed position relative to the viewport */
    right: 0; /* Align to the far right */
    bottom: 0; /* Align to the bottom */
    margin: 10px; /* Optional: Adds some space around the footer */
    z-index:9999;
}