/* fading images animation */
.ia   {position:relative;border:1px solid #D6C8C8;line-height:0}  /* line-height gets rid of 4px gap at bottom */
.ia img {position:absolute;width:100%;animation:fade 20s linear 0s infinite}
.ia img:last-child {position:relative}  /* last img is relative to set the size of the div */
@keyframes fade {0%{opacity:1} 10%{opacity:1} 20%{opacity:0} 90%{opacity:0} 100%{opacity:1}}  /* 2 second fade = 5% of 40 seconds || 5 images, so 1/5 of 100% = 20% || 5 + 20 = 25 */
.ia img:nth-child(4) {animation-delay: 4s}  /* last image is animated 1st as it's at the front */
.ia img:nth-child(3) {animation-delay: 8s}
.ia img:nth-child(2) {animation-delay:12s}
.ia img:nth-child(1) {animation-delay:16s}

/* code */
.cd {padding:0 0 0 2ch;text-indent:-2ch;font-family:monospace;font-size:.8em;font-size:.8rem;word-wrap:break-word}
.cd.in {padding:0 0 0 10ch;text-indent:-8ch}
.cd span.dr {color:#800000}
.cd span.br {color:#FF0000}
.cd span.bb {color:#0000FF}
.cd span.lb {color:#0080FF}
.cd span.or {color:#FF8000}
.cd span.bo {outline:solid 1px #C0C0C0}
.no span.im,
.cd span.nw {white-space:normal}
pre  {display:inline;white-space:pre-wrap;word-wrap:break-word}

  /* hide/show sections */

  /* background for content */
div.co1b,div.co2b,div.co3b,div.co4b,div.co5b {margin-bottom:8px;padding:8px;background-color:RGBA(255,255,255,0.5);border-radius:4px;box-shadow:1px 1px 3px RGBA(0,0,0,0.3)}









  /* notes: display when checked (hidden by default) */
.no {display:none;color:#20A020;font-size:.8em;font-size:.8rem}
.no ul {padding-left:8px;list-style-type:none}
.no span.bu {margin-left:4px}
.no ul li:before {position:relative;top:2px;margin-right:4px;font-size:1em;font-size:1rem;line-height:0;content:'\2022'}
.no ul li {margin:0 0 6px 17px;text-indent:-10px} /* padding adds together - margins overlap - so only 6px between lines instead of 12px */
.no.nb ul li {margin:6px 0 6px 33px;text-indent:-26px}
.no.nb ul li:before {padding-right:6px;content:''}
.no span.tt {visibility:hidden}
.no span.n1,span.n2,span.n3,span.n4,span.n5,span.n6 {position:relative;top:2px;margin-right:3px;color:#000000;font-size:1em;font-size:1rem;font-weight:bold;line-height:0}
.no span.n1:before {content:'\2780'}
.no span.n2:before {content:'\2781'}
.no span.n3:before {content:'\2782'}
.no span.n4:before {content:'\2783'}
.no span.n5:before {content:'\2784'}
.no span.n6:before {content:'\2785'}
.no span.li {background-color:#FFFFFF;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px}
.no span.li img {position:relative;top:-2.5px;padding:0 2px;width:4%;height:4px}
.co1:checked ~ .co1b div.no,
.co2:checked ~ .co2b div.no,
.co3:checked ~ .co3b div.no,
.co4:checked ~ .co4b div.no,
.co5:checked ~ .co5b div.no {display:block}

/* graph image text overlays - percentages */
.i3 div {position:absolute;color:#808080;font-size:.7em;font-size:.7rem}
.i3 div.p0 {top:10%;left:4.4%}
.i3 div.p1 {top:10%;left:11.9%}
.i3 div.p2 {top:10%;left:20.3%}
.i3 div.p3 {top:10%;left:28.8%}
.i3 div.p4 {top:10%;left:37.2%}
.i3 div.p5 {top:10%;left:45.7%}
.i3 div.p6 {top:10%;left:54.1%}
.i3 div.p7 {top:10%;left:62.5%}
.i3 div.p8 {top:10%;left:71%}
.i3 div.p9 {top:10%;left:79.5%}
.i3 div.pA {top:10%;left:86.9%}
.i3 div.pB {top:10%;left:96.4%}
/* seconds */
.i3 div.s0 {top:67%;left:4.4%}
.i3 div.s1 {top:67%;left:12.8%}
.i3 div.s2 {top:67%;left:21.3%}
.i3 div.s3 {top:67%;left:29.8%}
.i3 div.s4 {top:67%;left:38.2%}
.i3 div.s5 {top:67%;left:45.7%}
.i3 div.s6 {top:67%;left:54.1%}
.i3 div.s7 {top:67%;left:62.5%}
.i3 div.s8 {top:67%;left:71%}
.i3 div.s9 {top:67%;left:79.5%}
.i3 div.sA {top:67%;left:88%}
.i3 div.sB {top:67%;left:96.4%}
/* opacities */
.i3 div.o0 {top:60%;right:95.5%}
.i3 div.oA {top:19%;right:95.5%}
/* circled numbers */
.i3 div.n1,.i3 div.n2,.i3 div.n3,.i3 div.n4,.i3 div.n5,.i3 div.n6 {color:#000000;font-size:1em;font-size:1rem;font-weight:bold}
.i3 div.n1 {top:21.5%;left:5.2%}
.i3 div.n1:before {content:'\2780'}  /* https://www.w3schools.com/cssref/css_entities.asp */
.i3 div.n2 {top:21.5%;left:11.7%}
.i3 div.n2:before {content:'\2781'}
.i3 div.n3 {top:49%;left:21.7%}
.i3 div.n3:before {content:'\2782'}
.i3 div.n4 {top:49%;left:79.1%}
.i3 div.n4:before {content:'\2783'}
.i3 div.n5 {top:21.5%;left:89.2%}
.i3 div.n5:before {content:'\2784'}
.i3 div.n6 {top:21.5%;left:96.4%}
.i3 div.n6:before {content:'\2785'}

.ib {width:100%;height:150px;background-color:#FFFFFF}
.ib div {position:relative;width:40px;height:40px;bac_kground-color:#F0F0F0;animation:move 10s ease-in-out 0s infinite}
.ib div div {margin:auto;width:100%;height:100%;background-image:url(imgs/dice-1.png);background-size:100% 100%;bac_kground-position:50% 50%;animation:fold 10s ease-in-out 0s infinite}

@keyframes move {0%{left:4px;              top:  4px}
             16.67%{left:calc( 50% - 22px);top: 36px;transform:rotate( -90deg)}
             33.33%{left:calc(100% - 44px);top:  4px;transform:rotate(-180deg)}
                50%{left:calc(100% - 44px);top:106px;transform:rotate(-270deg)}
             66.67%{left:calc( 50% - 22px);top: 74px;transform:rotate(-360deg)}
             83.33%{left:4px;              top:106px;transform:rotate(-450deg)}
               100%{left:4px;              top:  4px;transform:rotate(-540deg)}}

@keyframes fold {0%{width:100%;background-color:#FF4040}
              8.32%{           background-image:url(imgs/dice-1.png)}
              8.33%{width:  0%;background-image:url(imgs/dice-2.png)}
             16.67%{width:100%;background-color:#FFA040}
             24.99%{           background-image:url(imgs/dice-2.png)}
                25%{width:  0%;background-image:url(imgs/dice-3.png)}
             33.33%{width:100%;background-color:#FFFF00}
             41.66%{           background-image:url(imgs/dice-3.png)}
             41.67%{width:  0%;background-image:url(imgs/dice-4.png)}
                50%{width:100%;background-color:#00FF00}
             58.32%{           background-image:url(imgs/dice-4.png)}
             58.33%{width:  0%;background-image:url(imgs/dice-3.png)}
             66.67%{width:100%;background-color:#A0A0FF}
             74.99%{           background-image:url(imgs/dice-3.png)}
                75%{width:  0%;background-image:url(imgs/dice-2.png)}
             83.33%{width:100%;background-color:#D040FF}
             91.66%{           background-image:url(imgs/dice-2.png)}
             91.67%{width:  0%;background-image:url(imgs/dice-1.png)}
               100%{width:100%;background-color:#FF4040}}

/* screens <= 895px */
@media only screen AND (max-width:895px){
  .i3 div {font-size:.65em;font-size:.65rem}
  .i3 div.o0,.i3 div.oA {font-size:.55em;font-size:.55rem}
  .i3 div.n1,.i3 div.n2,.i3 div.n3,.i3 div.n4,.i3 div.n5,.i3 div.n6 {font-size:.9em;font-size:.9rem}
}

/* •screens <= 561px */
@media only screen AND (max-width:561px){
  .i3 div {font-size:.46em;font-size:.46rem}
  .i3 div.o0,.i3 div.oA {font-size:.4em;font-size:.4rem}
  .i3 div.n1,.i3 div.n2,.i3 div.n3,.i3 div.n4,.i3 div.n5,.i3 div.n6 {font-size:.6em;font-size:.6rem}
}