html, body {
    background-color: rgb(12, 8, 70);
    font-family: "Pixelify Sans", sans-serif;
    color: var(--text-color);
    overflow-x: hidden;
}

/* On large screens, prevent vertical scrolling if desired */
@media (min-width: 992px) {
    html, body {
        overflow-y: hidden;
    }
}


:root {
    --primary-color: rgb(232,114,4);
    --secondary-color: rgb(162,82,11);
    --tertiary-color: rgb(113,57,6);
    --text-color: rgb(255, 123, 0);
}

.bg-color-dark {
    background-color: rgb(8, 6, 48) !important;
}

/* Container that holds the printer layers */
.printer-container {
    position: relative;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 1;        /* keeps it square & responsive */
    margin: auto;
}

/* All printer parts stack on top of each other */
.printer-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Make images fill their assigned layer */
.printer-layer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* You can tweak transforms per element */
.printer-layer.rail img {
    transform: translateY(10%) translateX(-5%);
}

.printer-layer.tool img {
    transform: translateY(10%) translateX(-24%);
}

.info {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    transform: translateY(100%);
}



/* Mobile-friendly terminal box */
.phone {
    background-color: rgb(8, 6, 48);
    border: 5px solid var(--primary-color);
    border-radius: 20px;
    display: flex;
    margin: -1%;
}

/* Buttons */
.rp-btn {
    padding: 4px 10px;
    background-color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    border-radius: 6px;
    color: white;
    font-size: 13px;
}

.rp-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}