@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

@font-face {
    font-family: calculator;
    src: url(Digital7Mono-Yz9J4.ttf);
}


.full-screen-image {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 25px;
}

.center {
    margin: auto;
    background-position: center;
}

.clickbox {
    display: block;
    position: absolute;
}

    .clickbox img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        overflow: hidden;
    }

    .clickbox:hover {
        display: block;
        position: absolute;
        /*background-image: radial-gradient(rgba(255, 108, 220, 1), rgba(255, 108, 220, 0) 70%);*/
        /*background-image: radial-gradient(rgba(129, 42, 137, 1), rgba(255, 108, 220, 0) 70%);*/
        background-image: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 70%);
        /*background-image: radial-gradient(rgba(0,190,190, 1), rgba(255, 108, 220, 0) 70%);*/
    }

.backbutton {
    text-align:center;
    margin: auto;
    margin-top: 25px;
}


.valve img {
    width: 100px;
    height: 100px;
    left: 25px;
    bottom: 25px;
    overflow: hidden;
    position: absolute;
}

.valve {
    display: block;
    position: absolute;
    height: 150px;
    width: 150px;
}

    .valve:hover {
        display: block;
        position: absolute;
        background-image: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 70%);
    }

a.steampunk-button-2 {
    background: radial-gradient(circle, #654321 20%, #3e2a19 90%); /* Leather-like texture */
    border: 4px double #8b5a2b; /* Ornate double border */
    color: #f1e7c3; /* Warm parchment-like text color */
    font-family: 'Cinzel', serif; /* Historical font style */
    font-size: 20px;
    letter-spacing: 1px;
    padding: 14px 24px;
    border-radius: 50px; /* Rounded, capsule shape */
    text-shadow: 1px 1px 4px #000;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6), inset -2px -2px 4px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s ease-in-out;
}

    a.steampunk-button-2:hover {
        background: radial-gradient(circle, #3e2a19 20%, #654321 90%); /* Reversed gradient on hover */
        transform: scale(1.1);
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8), inset -3px -3px 6px rgba(255, 255, 255, 0.3);
    }

    a.steampunk-button-2:active {
        transform: scale(0.95);
        box-shadow: inset 5px 5px 8px rgba(0, 0, 0, 0.8);
    }