/* #PanBackorGUI{
position: relative;
right: -54vw;
bottom: -55%;
height: 15%;
width: 20vw;
background-color: black;
transition: right 1.5s;
display: flex;
justify-content: center;
align-items: center;
} */

#PanBackorGUI img {
    height: 100%;
}

#PanBackorGUI div.text {
    position: absolute;
    display: block;
    padding: 2% 2% 2% 24%;
    min-height: 100%;
    background-color: transparent !important;
    /* min-width: 85%; */
    text-align: left;
    font-size: 1.8vh;
    transition: background 2s;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-shadow:#863027 .01em .01em 0, #863027 .02em .02em 0, #863027 .03em .03em 0, #863027 .04em .04em 0, #863027 .05em .05em 0, #863027 .06em .06em 0, #863027 .07em .07em 0, #863027 .08em .08em 0, #863027 .09em .09em 0, #863027 .1em .1em 0 */
}

#PanBackorGUI a {
    color: white;
}

#PanBackorGUI .canChangeDialog {
    /* add white bottom border that changes color infinitely from black to white and back */
    border-right: 1px solid black;
    animation: 2s infinite linear canChangeDialog;
}
@keyframes canChangeDialog {
    0% {
        border-right: 1px solid black;
    }
    50% {
        border-right: 1px solid white;
    }
    100% {
        border-right: 1px solid black;
    }
}

#PanBackorGUI .eye:after {
    /*pupil*/
    position: absolute;
    bottom: 55%;
    right: 29%;
    width: 40%;
    aspect-ratio: 1;
    background: black;
    border-radius: 50%;
    content: " ";
}

#PanBackorGUI {

    position: relative;
    right: -90vw;
    bottom: -55%;
    height: 15%;
    width: 20vw;
    transition: right 1.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: background 2s, right 1.5s;

}

.Backor {
    position: absolute;
    left: -3vw;
    height: 160%;
    user-select: none;
    z-index: 1;
}

#PanBackorGUI .eye {

    position: absolute;
    display: inline-block;
    border-radius: 50%;
    height: 22%;
    aspect-ratio: 1;
    background: white;
    top: 16%;
    left: 11%;
    scale: 0.8;
    /* animation: 10s infinite linear delejMrkni; */

}

#eye2 {

    top: 23% !important;
    left: 39% !important;

}

#PanBackorGUI .eyeLid {
    /*eye lid*/
    position: absolute;
    display: inline-block;
    border-radius: 50%;
    height: 22%;
    aspect-ratio: 1;
    background: transparent;
    top: 16%;
    left: 11%;
    scale: 0.8;
    animation: 10s infinite linear delejMrkni;
    z-index: 1;
}
#PanBackorGUI .eyeLid.eyesClosed{
    background: rgba(75, 82, 92, 1);    
}

#eyeLid2 {
    top: 23% !important;
    left: 39% !important;
}

@keyframes delejMrkni {
    0% {
        background: transparent;
    }

    84.99% {
        background: transparent;
    }

    85% {
        background: linear-gradient(180deg, rgba(75, 82, 92, 1) 0%, rgba(75, 82, 92, 1) 1%, transparent 2%, transparent 100%);
    }

    87% {
        background: linear-gradient(180deg, rgba(75, 82, 92, 1) 0%, rgba(75, 82, 92, 1) 20%, transparent 21%, transparent 100%);
    }

    89% {
        background: linear-gradient(180deg, rgba(75, 82, 92, 1) 0%, rgba(75, 82, 92, 1) 40%, transparent 41%, transparent 100%);
    }

    90% {
        background: linear-gradient(180deg, rgba(75, 82, 92, 1) 0%, rgba(75, 82, 92, 1) 70%, transparent 71%, transparent 100%);
    }

    92% {
        background: linear-gradient(180deg, rgba(75, 82, 92, 1) 0%, rgba(75, 82, 92, 1) 85%, transparent 86%, transparent 100%);
    }

    93% {
        background: linear-gradient(180deg, rgba(75, 82, 92, 1) 0%, rgba(75, 82, 92, 1) 98%, transparent 99%, transparent 100%);
    }

    95% {
        background: linear-gradient(180deg, rgba(75, 82, 92, 1) 0%, rgba(75, 82, 92, 1) 85%, transparent 86%, transparent 100%);
    }

    97% {
        background: linear-gradient(180deg, rgba(75, 82, 92, 1) 0%, rgba(75, 82, 92, 1) 70%, transparent 71%, transparent 100%);
    }

    99% {
        background: linear-gradient(180deg, rgba(75, 82, 92, 1) 0%, rgba(75, 82, 92, 1) 40%, transparent 41%, transparent 100%);
    }

    100% {
        background: linear-gradient(180deg, rgba(75, 82, 92, 1) 0%, rgba(75, 82, 92, 1) 1%, transparent 2%, transparent 100%);
    }
}
/* add media query for less then 500x500 */
@media only screen and (max-width: 800px) and (orientation: portrait),
(max-height: 620px) and (orientation: landscape),
(max-width: 620px) and (max-height: 800px) and (orientation: portrait),
(max-width: 800px) and (max-height: 620px) and (orientation: landscape),
(hover: none) and (-moz-touch-enabled: 1) {
    body *:not(#gradient-canvas, .monitor){
        display: none;
    }
    .monitor::after{
        content: "Nepodporované zařízení nebo jeho velikost displaye.";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 2em;
        font-weight: bold;
    }
}

#theend {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    display: none;
}