*{box-sizing: border-box;}
:root{
	--c_dark_0:#121212;	--c_dark_1:#484848;
	--c_light_0:hsl(0, 0%, 95%); --c_light_1:#c4c4c4;
	--c_red_0:#ff0000; --c_red_1:#5f0505;
	--c_blue_0:#0000ff; --c_blue_1:#05055f;
	--c_green_0:#00ff00; --c_green_1:#055f05;
	--c_magneta_0:#ff00ff; --c_magneta_1:#804080;
	--c_yellow_0:#ffff00; --c_yellow_1:#808040;
	--c_cyan_0:#00ffff; --c_cyan_1:#408080;
}

body {background-color: var(--c_dark_0); color: white;}

.container{max-width:800px;}
.ucshowtext{font-size:9pt;}

.divcont{display: flex;  justify-content: center;   align-items: center; background-color: var(--c_dark_0); user-select: none;}
.txt_h {font-size: 20px; font-weight: bold;} .txt_s{font-size: 16px; text-decoration: underline;} .txt_d{font-size: 16px;}

.front {transform: translateZ(100px); color: var(--c_red_0);}
.bottom {transform: rotateX(270deg) translateY(100px); transform-origin: bottom center; color: var(--c_magneta_0);}
.top {transform: rotateX(-270deg) translateY(-100px); transform-origin: top center; color: var(--c_cyan_0);}
.left {transform: rotateY(270deg) translateX(-100px); transform-origin: center left; color: var(--c_blue_0);}
.right {transform: rotateY(-270deg) translateX(100px); transform-origin: top right; color: var(--c_yellow_0);}
/*back ispravi*/
.back {transform: translateZ(-100px) rotateY(180deg);}

#dialog_ph_go, .btn_ph_close {background-color: var(--c_dark_0); text-align: center; color: white;}
#dialog_ph_go{opacity: 0.7;}
.dialfirst{font-size: 24px;}
.dialsecond{font-size: 16px;}
.dialthird{font-size: 16px; color: var(--c_light_1);}


/* Open state of the dialog  */
dialog:open {opacity: 1; transform: scaleY(1);}

/* Closed state of the dialog   */
dialog { opacity: 0; transform: scaleY(0);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out,
    overlay 0.5s ease-out allow-discrete,
    display 0.5s ease-out allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

/* Before open state  */
/* Needs to be after the previous dialog:open rule to take effect,
    as the specificity is the same */
@starting-style { dialog:open { opacity: 0;   transform: scaleY(0);  }}

/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
  background-color: transparent;
  transition:
    display 0.5s allow-discrete,
    overlay 0.5s allow-discrete,
    background-color 0.5s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

dialog:open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* This starting-style rule cannot be nested inside the above selector
because the nesting selector cannot represent pseudo-elements. */

@starting-style {
  dialog:open::backdrop {
    background-color: transparent;
  }
}




















    .wrap {margin-top: 120px;margin-bottom: 120px; perspective: 1000px;
        perspective-origin: 50% 50%;
        background-image: linear-gradient(135deg,var(--c_dark_0) 25%,var(--c_dark_1) 25%,var(--c_dark_1) 50%, var(--c_dark_0) 50%,
         var(--c_dark_0) 75%,var(--c_dark_1) 75%,var(--c_dark_1) 100%);
        background-size: 80px 80px; border-top: solid 3px var(--c_dark_1); border-bottom: solid 3px var(--c_dark_1);
        /* Background stripes animation */
        animation: bganim 3s linear 2s infinite;}

    @keyframes bganim {
        from {background-position: 0px;}
        to {background-position: 80px;}
    }

    .cube {margin: auto; position: relative; height: 200px; width: 200px; transform-style: preserve-3d;}
    .cube div {position: absolute; padding: 10px; box-sizing: border-box; height: 100%; width: 100%; opacity: 0.9;
         border: solid 1px var(--c_dark_1); font: 10px arial; transition: transform 0.2s ease-in;}

    @keyframes rotate {
        from {transform: rotateX(0deg) rotateY(0deg);}
        to {transform: rotateX(360deg) rotateY(360deg);}
    }

    .cube {animation: rotate 20s infinite linear;}
    .wrap:hover .front {transform: translateZ(200px);}
    .wrap:hover .back {transform: translateZ(-200px) rotateY(180deg);}
    .wrap:hover .right {transform: rotateY(-270deg) translateZ(100px) translateX(100px);}
    .wrap:hover .left {transform: rotateY(270deg) translateZ(100px) translateX(-100px);}
    .wrap:hover .top {transform: rotateX(-270deg) translateZ(100px) translateY(-100px);}
    .wrap:hover .bottom {transform: rotateX(270deg) translateZ(100px) translateY(100px); }