:root {
    /* orange */
    --color-orange: #ff6d4d;
    /* green */
    --color-green: #7ed957;
    /* plumb */
    --color-plumb: #851e6c;
}



    a {
        color: var(--color-plumb) !important;
        font-weight: bold !important;
    }



    .SemiContainer {
        color: white;
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
    }


        .SemiContainer a {
            color: yellow !important;
        }

        .SemiContainer h1 {
            color: yellow !important;
            font-size: 2.5rem;
        }

    .SemiContainer .btn {
        color: white !important;
    }


    .SemiContainer .btn-info {
        color: black !important;
    }

    .SemiContainer strong, .SemiContainer b {
        color: yellow;
        font-weight: 600;
    }



    /* background body */

.BodyWithBackground {
    margin: 0;
    padding: 0;
    background-image: url('../data/bkg-orloj-long-blur.jpg'); /* Odkaz na obrázek */
    background-size: cover; /* cover Pokryje celou šířku */
    background-position: top center; /* Drží se horního okraje */
    background-repeat: no-repeat; /* Neopakovat */
    xbackground-color: black;
    xbackdrop-filter: blur(5px);
}



.Mask {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(6, 8, 68, 0.25);
    background-color: red;
    backdrop-filter: blur(5px);
}


.Radius
{
    border-radius: 15px;
}



    #StepIndicator {
        position: fixed;
        top: 10px;
        right: 10px;
        width: 100px;
        height: 25px;
        color: white;
        z-index: 100;
        text-align: right;
    }


    /* fonts */

/*

// <weight>: Use a value from 100 to 900
// <width>: Use a value from 62 to 125
// <uniquifier>: Use a unique and descriptive class name

.archivo-<uniquifier> {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" <width>;
}

*/

.font-normal {
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.font-title {
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-style: normal;
}





    .font-new-rocker-regular {
        font-family: "New Rocker", system-ui;
        font-weight: 400;
        font-style: normal;
    }


    .font-antiqua-regular {
        font-family: "Modern Antiqua", serif;
        font-weight: 400;
        font-style: normal;
    }



    .grenze-gotisch-<uniquifier > {
        font-family: "Grenze Gotisch", serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal;
    }


.grenze-gotisch-regular {
    font-family: "Grenze Gotisch", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


    /* Styl pro overlay portrait landscape */
    #PortraitLandscapeOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        z-index: 9999;
        display: none; /* Defaultně skryté */
    }

    #PortraitLandscapeOverlay img {
        width: 100px;
        height: auto;
        animation: rotate 2s infinite linear;
    }



    /* Animace rotace ikonky */
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }