html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
h1 { outline: 5px solid #b3ccff; font-size: 2em;margin: 10px; color: #b3ccff;font-family: DINish, sans-serif; padding: 10px; width: fit-content; display: inline-block;}
body{line-height:1; background-color: #000; image-rendering: crisp-edges;}
hr{display:block;height:1px;border:0;border-top:5px double #a7a7a759;margin:1em 0;padding:0}
p{font-size: 1em;line-height: 1.3em;margin-bottom: 5px;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;color: #EEE; text-decoration: none;}
.screen{
  background-image: url("../../img/mat/scan.png");
  height: 100%;
  width: 100%;
  position: fixed;
}

main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family:BP_Typ,monospace;
			font-weight:bold;
			font-size:0.8em;
      color: #fff;
}
/*Parent*/section {
  display: flex;
  margin: 1em auto;
  outline:5px double #a7a7a759;
  flex: none;
  scroll-snap-type: y mandatory;
  width: 80vw;
  height: 100vh;
  flex-flow: column nowrap;
  overflow-x: hidden;
}

section .y {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
  width: 100%;
  height: 90%;
}

/* coloration */
.y{
  background-image: url('../../img/mat/mazehellbl.png'), url(../../img/mat/black.gif);
  overflow: hidden;
}
section .y:last-child{
  background-image: linear-gradient(#00000000, #000000,#000000,#000000), url('../../img/mat/mazehellbl.png'), url(../../img/mat/black.gif);
}

/*text colors*/
.hlr{color: #ff0000;}

/*Back home button in Backlog, Context*/
.goback{background-color: white; color: #000; padding: 5px; position: fixed; left: 20px; top: 20px;}
.goback a:hover{background-color: #000; color: #EEE;}

.throb { animation: throba;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-direction:alternate-reverse;
	animation-timing-function: linear;
  }
  .throb:hover{animation:none;}
  @keyframes throba {
	from {outline: 5px solid #fff;}
	to {transform: 15px solid #fff;}
}

/*ANIMATIONS*/
.rotatethreedee { animation: dimentionalrotate;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction:normal;
  animation-timing-function: linear;
}
@keyframes dimentionalrotate {
  from {transform: rotate3d(0, 1, 0, 0deg);}
  to {transform: rotate3d(0, -1, 0, 360deg);}
}