/*dizzyzane.github.io/lightbox*/
/*Resetti*/
[lightbox],[lightbox] *,[lightbox] *:before,[lightbox] *:after{
    all:initial;color:snow;background:rgba(0,0,0,0)
}

[lightbox] p,[lightbox] div,[lightbox] h1,[lightbox] h2,[lightbox] h3,[lightbox] h4,[lightbox] h5,[lightbox] h6,[lightbox] iframe{
    display:block;
}
/*Basic defs*/
[lightbox]:not([lightbox*="inline"]),[lightbox*="inline"]:target,input:checked+[lightbox*="inline"]{
    position:fixed;
    left:100%;
    left:100vw;
    width:100%;
    width:100vw;
    background:rgba(0,0,0,0);
    height:100%;
    height:100vh;
    z-index:999999999;
    top:0;
    padding:0!important;
    margin:0!important;
    -o-transition:transition: .6s ease-out 0s,background .2s linear .6s;
    -webkit-transition: .6s ease-out 0s,background .6s linear 0s;
    transition: .6s ease-out 0s,background .2s linear .6s;
}

[lightbox*="inline"]{
    position:relative;
    left:0!important;
    top:0!important;
}

[lightbox*="inline"][id]:not(:target)>:not(label),input:not(:checked)+[lightbox*="inline"]:not(:target)>:not(label){
    display:none;
}

input:checked+[lightbox],[lightbox]:target {
    background: rgba(62, 116, 163, 0.75);
    left: 0%!important;
    z-index: 9999999999;
    top:0!important;
}

[lightbox] >label[for] > img[src],[lightbox] > article,[lightbox] > section,[lightbox] > iframe,[lightbox] > video,[lightbox] > canvas,[lightbox] > img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid snow;
    border-radius:3px;
    max-width:80vw;
    max-height:80vh;

}

[lightbox] > article,[lightbox] > section{
    width:100%;
    height:100%;
    color:snow;
    overflow-y:auto;
    padding:1em;
    white-space:pre-wrap;
    display:block;
    background:rgba(62, 116, 163, 0.75);    
    display: flex;
  flex-direction: column;
 }

[lightbox] > article>iframe,[lightbox] > section>iframe{
    margin:10px -5px 5px;
    width:calc(100% + 10px);
    background:#fff;
}

[lightbox] > iframe{
    padding:0;
    overflow-y:auto;
    background:rgba(62, 116, 163, 0.75);
    color:snow;
    width: 80vw;
    height: 80vh;
}

[lightbox] > article>img, [lightbox] > article>p {
    align-self: center;
    padding-bottom: 1em;
}


[lightbox] > article *,[lightbox] > section *,[lightbox] > article,[lightbox] > section{
    font:19px/22px helvetica,arial,freesans,clean,sans-serif;
}

[lightbox] h1,[lightbox] h2,[lightbox] h3,[lightbox] h4,[lightbox] h5,[lightbox] h6{
    font-weight:bold;
    text-align:center;
}

[lightbox] h1{font-size:2em;margin:.67em 0}
[lightbox] h2{font-size:1.5em;margin:.83em 0}
[lightbox] h3{font-size:1.17em;margin:1em 0}
[lightbox] h4{font-size:1em;margin:1.33em 0}
[lightbox] h5{font-size:.83em;margin:1.67em 0}
[lightbox] h6{font-size:.67em;margin:2em 0}

[lightbox] > article p,[lightbox] > section p{
    margin-bottom:1em;
    max-width: 750px;
}

[lightbox] > article p.intro {
    background-color: rgb(177, 220, 244);
    background-image: url(creator.png);
    background-repeat: no-repeat;
    background-position: 1em;
    color: rgb(62, 116, 163);
    font-style: italic;
    font-size: 0.8em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.678);
    padding: 1em 1em 1em 5em;
}

[lightbox] > article p::first-letter,[lightbox] > section p::first-letter,[lightbox] > article::first-letter,[lightbox] > section::first-letter{
    margin-left:.4em;
    font-size:20px;
    font-weight:bold;
}

[lightbox] > article code,[lightbox] > section code{
    color:red;
    font:bold 16px Monaco,Andale Mono,Courier New,monospace;
}

[lightbox] > article label,[lightbox] > section label{
    background:#333;
    color:lime;
}
[lightbox] > article a,[lightbox] > section a{
    background:#333;
    color:aqua;
}

[lightbox] > article a:hover,[lightbox] > section a:hover{
    text-decoration:underline;
}

/*Directional buttons*/
[lightbox] button{
    cursor:pointer;
    text-align:center;
    font:4em helvetica,arial,freesans,clean,sans-serif;
    color:snow;
    border:1px solid snow;
    background:rgba(62, 116, 163, 0.322);
    height:70%;
    width:10%;
    position:absolute;
    top:15%;
}

[lightbox] button[lbleft]{left:5%}
[lightbox] button[lbright]{right:5%}
[lightbox] button[lbup]{top:5%;height:10%;width:70%}
[lightbox] button[lbdown]{bottom:5%;height:10%;width:70%}

[lightbox] button[lbleft]:before{content:"\002039"}
[lightbox] button[lbright]:before{content:"\00203A"}
[lightbox] button[lbup]:before{content:"\00290A"}
[lightbox] button[lbdown]:before{content:"\00290B"}

/*Titles.*/
[lightbox] > h1,[lightbox] > h2,[lightbox] > h3{
    position:absolute;
    left:15%;
    right:15%;
    top:-5px;
    color:snow;
    text-shadow: -2px -2px #000, 2px 2px #000, 2px -2px #000, -2px 2px #000, -1px -1px #000;
    font:29px 'Product Sans',Roboto,roboto,Helvetica,helvetica,arial,freesans,clean,sans-serif;
}

/*Use your GPU mate*/
[lightbox],[lightbox] *{
    -webkit-transform:translate3D(0,0,0);
    -ms-transform:translate3D(0,0,0);
    transform:translate3D(0,0,0);
}

/*Closing and screenarea*/
label[for]{cursor:pointer}

input+[lightbox]>label[for="remove_lightbox"],[lightbox] > a[href="#screenarea"]/*:first-child*/{
    width: 0%;
    height:100%;
    background:0 0;
    background:-webkit-linear-gradient(315deg,rgba(0,0,0,0) 90%,rgb(62, 116, 163) 0);
    background:-webkit-linear-gradient(45deg, rgba(0,0,0,0) 90%, rgb(62, 116, 163) 0);
    background:linear-gradient(45deg,rgba(0,0,0,0) 90%,rgb(62, 116, 163) 0);
    position: absolute;
    top:0;
    right:0;
    nav-index:-1;
    cursor:context-menu;
    -webkit-transition:0s .6s;
    transition:0s .6s;
    outline-style:none;
}

input:checked+[lightbox]>label[for="remove_lightbox"],[lightbox]:target > a[href="#screenarea"]/*:first-child*/{
    width:100%;
}

input+[lightbox]>label[for="remove_lightbox"]:after,[lightbox] > a[href="#screenarea"]/*:first-child*/:after{
    content:"❌";
    position:absolute;
    top:-7vh;
    right:-5vw;
    font-size:5vm;
    font-size:5vh;
    color:black;
    text-align:right;
    cursor:pointer;
    display:none;
    margin:2vm -70vm -6vm 80vm;
    padding:9vm 80vm 7vm;
    margin:2vh -70vh -6vh 80vh;
    padding:9vh 80vh 7vh;
}

input:checked+[lightbox]>label[for="remove_lightbox"]:after,[lightbox]:target > a[href="#screenarea"]/*first-child*/:after{
    display:block;
}

#screenarea{
    z-index:-1000000;
    width:1px;
    height:1px;
    visibility:hidden;
    position:fixed;
    top:0;
    left:0;
    color:rgba(255,255,255,0);
    opacity:0;
}

input[name="lightbox"]{display:none}

/*Starting conditionals*/
input[id$="-l"]+[lightbox]:not(p),[lightbox*=left]:not(p),[lightbox][id$="-l"]:not(p){left:-100vw}
input[id$="-t"]+[lightbox]:not(p),[lightbox*=top]:not(ul),[lightbox][id$="-t"]:not(p){left:0;top:-100vh}
input[id$="-b"]+[lightbox]:not(p),[lightbox*=bottom]:not(ul),[lightbox][id$="-b"]:not(p){left:0;top:100vh}

input:checked+[lightbox*="left"],[lightbox*="left"]:target,input[id$="-l"]:checked+[lightbox],[lightbox][id$="-l"]:target{left:0vw}
input:checked+[lightbox*="top"],[lightbox*="top"]:target,input[id$="-t"]:checked+[lightbox],[lightbox][id$="-t"]:target{left:0;top:0vw}
input:checked+[lightbox*="bottom"],[lightbox*=bottom]:target,input[id$="-b"]:checked+[lightbox],[lightbox][id$="-b"]:target{left:0;top:0vw}

[lightbox*=left] a[href~="#screenarea"],[lightbox][id$="-l"] a[href~="#screenarea"],[lightbox*=bottom] a[href~="#screenarea"],[lightbox][id$="-b"] a[href~="#screenarea"]
{background: rgba(0,0,0,0);background: -webkit-linear-gradient(45deg, rgba(0, 0, 0,0) 90%, white 0%);background: linear-gradient(45deg, rgba(0, 0, 0,0) 90%, white 0%);}
[lightbox*=left] a[href~="#screenarea"]:after,[lightbox][id$="-l"] a[href~="#screenarea"]:after,[lightbox*=bottom] a[href~="#screenarea"]:after,[lightbox][id$="-b"] a[href~="#screenarea"]:after
{;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);text-align:right}
[lightbox*=left] a[href~="#screenarea"]:after,[lightbox][id$="-l"] a[href~="#screenarea"]:after,[lightbox*=bottom] a[href~="#screenarea"]:after,[lightbox][id$="-b"] a[href~="#screenarea"]:after*/

/*Unselectable*/
[lightbox*="nosel"] *{-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;cursor:context-menu}
[lightbox*="inst"]{-webkit-transition:0s 0s;transition:0s 0s}
[lightbox*="fast"]{-webkit-transition-duration:.3s;transition-duration:.3s}[lightbox*="fast"]>a[href~="#screenarea"]{-webkit-transition-delay:.3s;transition-delay:.3s}
[lightbox*="slow"]{-webkit-transition-duration:1s;transition-duration:1s}[lightbox*="slow"]>a[href~="#screenarea"]{-webkit-transition-delay:.5s;transition-delay:.5s}
input:checked+[lightbox]>label[for="remove_lightbox"],[lightbox]:target > a[href="#screenarea"]{-webkit-transition:0s 0s;transition:0s 0s}
input[name="lightbox"][id="remove_lightbox"][type="radio"]:not(:checked)~.page-container{overflow:hidden}