body.dark{
    background:#1a1a1a;
    display: none;
}
body.dark:before,
body.dark:after{
    content:"";
    position: fixed;
    top:calc(50% - 300px);
    left:calc(50% - 250px);
    width:500px;
    height:500px;
    /*background-image:url("images/logo1.svg?c=ea612c");*/
    background-image:url("images/logo1.svg?c=ea612c");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: -2;
    opacity:0.25;
}
@media only screen and (max-width: 600px){
    body.dark:before,
    body.dark:after{
        top:calc(50% - 250px);
        left:calc(50% - 200px);
        width:400px;
        height:400px;
    }
}



body[m="random"]:not([data-done='true']).dark:before{
    background-image:url("images/logo1.svg?c=3faaac");
}

body.dark:after{
    opacity:var(--before-opacity2, 0.25);
    background-image:url("images/logo1.svg");
}
body.dark.bganimate:before{
    opacity:var(--before-opacity, 0.25);
    transition: opacity 0.3s ease;
}
body.dark.intro:before{

    opacity:0;
    animation: bgFadeIn 1500ms ease-in-out infinite;
    /*animation-delay: 2s;*/
}
body.dark.intro.finish:before{
    animation: bgFadeOut 500ms ease-in-out forwards;
}



/*
.letter div{
    background:#6d6d6d;
}
.letter.vowel div{
    background:#4b4b4b;
}
*/
/*
.letter.green div{
    background:#236723;    
}
.letter.green.vowel div{
    background:#154315;
}
.letter.red.vowel div {
    background: #891c1c;
}
*/
#cont2{
	background:#1a1a1a;
    
}
#cont2:after{
    content:"";
    top:0;
    left:0;
    position:absolute;
    width:100%;
    height: 100%;
    opacity: 0.5;
    background-image: url(images/noise-bg1.png);
}
#qrcode.active {

    box-shadow: 0 0 100px #000 !important;
}
#qrcode:after {
    background: rgba(0,0,0,0.75);
}


#cont2.screenshot{
    /*background:rgba(0,0,0,0.5);*/
    /*
    left:70px;
    top:70px;
    */
}
body[data-done='true'] #cont2.screenshot{
    background:#cb3900;
}
    #cont2.screenshot:after{
        /*background:none;*/
        background-size: 400px;
    }

#cont2.screenshot > div:nth-child(1){
    
}
#cont2.screenshot .letter{
    opacity:1;
}
#cont2.screenshot .letter div:after{
    visibility: hidden;
    /*
    background-image:none;
    background-color:#ea612c;
    border-top:5px solid red;
    border-left:5px solid blue;
    border-bottom:5px solid green;
    border-right:5px solid yellow;
    */
}

#cont2.screenshot .letter:not(.done).green div:after{
    visibility: visible;
    left: -20px !important;
    top: -24px !important;
    transform: rotate(340deg) !important;
    /*
    background-image:none;
    background-color:#ea612c;
    border-top:5px solid red;
    border-left:5px solid blue;
    border-bottom:5px solid green;
    border-right:5px solid yellow;
    */
}
#cont2.screenshot .letter:not(.done).green.red div:after{
    top: -30px !important;
    left: -60px !important;
    transform: rotate(-25deg) scale(0.9) !important;
}



@keyframes bgFadeIn {
  0% {
    opacity: 0.6;
    /*transform: translateY(-20px);*/
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes bgFadeOut {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0.6;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0.4;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0.2;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.25;
  }
}