body {
    margin: 0;
    padding: 0;
    background-color: #3d3c48;
    font-family: sans-serif;
}

.full-width-image {
    display: block;
    width: 100%;
    height: auto;
}

.button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* 30px space between images */
    margin-top: 20px; /* spacing above the buttons, adjust as needed */
}

.button-image {
    display: block;
    width: 250px; /* Adjust size if needed */
    height: auto;
    cursor: pointer;
}

.gif-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px; /* spacing above the GIF */
}

.gif-container img {
    width: auto;
    max-width: 100%; /* so it doesn't overflow on small screens */
    height: auto;
}

.chars-section {
    margin-top: 40px; /* spacing above the chars section */
    text-align: center;
}

.chars-image {
    display: block;
    width: 100%; /* Make it fit the whole width */
    height: auto; /* Keep aspect ratio */
    margin: 0 auto; /* Centering (safe even if width is 100%) */
}

.gifs-column {
    display: flex;
    flex-direction: column; /* Stack vertically */
    align-items: center; /* Center horizontally */
    gap: 280px; /* Space between GIFs */
    margin-top: 280px;
}

.gifs-column img {
    display: block;
}

.order-button {
    text-align: center;
    margin-top: 95px; /* spacing above the button */
}

.order-button img {
    display: inline-block;
    cursor: pointer; /* makes it look clickable */
    transition: transform 0.2s ease; /* optional: smooth hover effect */
}

/* Optional hover effect */
.order-button img:hover {
    transform: scale(1.05);
}

.portraits-section {
    margin-top: 60px; /* spacing above the portraits section */
    text-align: center;
}

.portraits-image {
    display: block;
    width: 100%; /* full width */
    height: auto; /* keep aspect ratio */
    margin: 0 auto;
}

.backgrounds-section {
    margin-top: 60px; /* spacing above the backgrounds section */
    text-align: center;
}

.backgrounds-image {
    display: block;
    width: 100%; /* full width */
    height: auto; /* keep aspect ratio */
    margin: 0 auto;
}

.tiles-section {
    margin-top: 60px; /* spacing above the tiles section */
    text-align: center;
}

.tiles-image {
    display: block;
    width: 100%; /* full width */
    height: auto; /* keep aspect ratio */
    margin: 0 auto;
}
.ui-section {
    margin-top: 60px; /* spacing above the UI section */
    text-align: center;
}

.ui-image {
    display: block;
    width: 100%; /* full width */
    height: auto; /* keep aspect ratio */
    margin: 0 auto;
}

html {
    scroll-behavior: smooth;
}

.contact-section {
    margin-top: 392px;
    text-align: center;
}

.contact-section img {
    display: block;
    margin: 0 auto 20px auto;
}

/* Copy buttons container */
.copy-button {
    position: relative;
    display: block;
    cursor: pointer;
    margin-bottom: 20px;
}

/* Tooltip text styling */
.copy-button .tooltip {
    visibility: hidden;
    opacity: 0;
    width: max-content;
    background-color: #222;
    color: #fff;
    text-align: center;
    padding: 6px 10px;
    border-radius: 4px;
    position: absolute;
    bottom: 120%; /* place above image */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s;
    font-size: 14px;
    white-space: nowrap;
}

/* Show tooltip on hover */
.copy-button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.googleform-button {
    margin-top: 60px;
    text-align: center;
}

.googleform-button img {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Optional hover effect */
.googleform-button img:hover {
    transform: scale(1.05);
}

.footer-section {
    margin-top: 604px;
    text-align: center;
}

.footer-image {
    display: block;
    width: 100%; /* makes it fit the page width */
    height: auto; /* keeps aspect ratio */
    margin: 0 auto;
}

@media (max-width: 768px) {
    /* Stack the main buttons vertically */
    .button-row {
        flex-direction: column;
        gap: 20px; /* space between buttons when stacked */
    }

    .button-row a {
        display: block;
    }

    /* Make order buttons smaller */
    .order-button img {
        width: 70%; /* shrink to 70% of container */
        height: auto;
    }

    /* Make contact image smaller */
    .contact-image {
        width: 80%;
        height: auto;
    }

    /* Make contact buttons (email, telegram, discord) smaller */
    .copy-button img {
        width: 60%;
        height: auto;
    }

    /* Make googleform button smaller */
    .googleform-button img {
        width: 70%;
        height: auto;
    }
}