@font-face {
     font-family:MyWebFont;
     src: url('/DOS-V.ttf'); 
}
 @font-face { 
   font-family:VCR; 
   src: url('/VCR.ttf'); 
   } 
#reviewbody {
  margin: 20px 320px 20px 320px;
  border-radius: 25px;
  border: 2px solid #ea00ff;
  border-image-outset: 20px;
  background: #0c0c0b;
  padding: 30px;
}
#bubble {
  margin: 1px 10px 10px 1px;
  border-radius: 50px 50px 50px 10px;
  background: #ca82e9;
  padding: 1px 20px 1px 20px; 
  width: 250px;
  height: 298px; 
}
img { image-rendering: pixelated }
body {background-color: black; text-align: center}

.scanlines {
    z-index: 3;
   opacity: .5;
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 200vh;
    pointer-events: none;
    background-attachment: fixed;
}

/* Do not enable RGB-bloom and  R,G and B at the same time  */


/* RGB Bloom allows for a brighter image with blending between phosphors*/
/* disabled until functional */
.RGB-bloom {
  z-index: 4;
  background: url(/assets/img/RGBG.png);
  filter: contrast(100) brightness(10)  blur(1px);
  mix-blend-mode: darken;
  }

/* individual phosphors. Enable these for the best phosphor seperation but with darker image */
.R {
  z-index: 4;
  background: url(/assets/img/R.png);
  image-rendering: pixelated;
  mix-blend-mode: darken;
  pointer-events: none;
}

.G {
  z-index: 4;
  background: url(/assets/img/G.png);
  image-rendering: pixelated;
  mix-blend-mode:darken;
pointer-events: none;
}

.B {
  z-index: 4;
  background: url(/assets/img/B.png);
  image-rendering: pixelated;
  mix-blend-mode:darken;
pointer-events: none;
}

.mask {
  image-rendering: pixelated;
    z-index: 1;
    opacity: .3;
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 200vh;
  background: url(/assets/img/mask.png);
pointer-events: none;
}

.flicker {
  z-index: 99;
  position: absolute;
  top: 0;
  right: 0;
  width: 110%;
  height: 110%;
  opacity: 0;
  mix-blend-mode:lighten;
  background-color: rgb(255, 255, 255);
  animation: flickerEffect 1ms;
  animation-iteration-count: infinite;
  pointer-events: none;
}

@keyframes flickerEffect {
  from {
    opacity: .015;
    filter: blur(100px);
    pointer-events: none;
  }
}


.test-image{
  width: 100vw;
  height: 100vh;
  position: absolute;
  background: url(/assets/img/image0.png) no-repeat center/cover;
  pointer-events: none;
}

.crt {
    filter:  brightness(1.1) saturate(140%) ;
    pointer-events: none;
    
}

/* this must come after the mask and the phosphors to render new bk size */
.scanlines, .mask{
  background-size: 12px 12px;

  
  color: white;
  font-family: 'MyWebFont';
  font-size: 24;
}
a {
  color:#eb104c;
  opacity: 1.0;
}


.main {
  width: 785px;
  height: auto;
  background-color: black;
  margin: 0px auto;
  border: 20px solid transparent;
  border-image: url("/border 1.gif") 20 repeat;
  border-image-outset: 20px;
}
* {
 transition: transform .4s
}
.item {
 width:300px;
 height:300px;
 perspective:3000px
}
.item:hover .card,
.item:focus .card {
 transform:rotateY(180deg)
}
.card .back {
 transform:rotateY(180deg)
}
.card {
 width:100%;
 height:100%;
 position:relative;
 transform-style:preserve-3d
}
.front,
.back {
 position:absolute;
 height:100%;
 width:100%;
 backface-visibility: hidden
}
.front {
	background: url("/bb.gif");
	  background-repeat: no-repeat;
	    background-size: contain;
}
.back {
	background: url("/bb.gif");
	  background-repeat: no-repeat;
	    background-size: contain;
}
.one {
width: 1536;
height: 1024;
background: url("/main.png");
}

.one:hover {
background: url("/maintestb.gif");
}
.two {
width: 100px;
height: 100px;
background: url("/maintrans.png");
}

.two:hover {
background: url('image1_when_hover.jpg');
}
.three {
width: 100px;
height: 100px;
background: url("/maintrans.png");
}

.three:hover {
background: url('image1_when_hover.jpg');
}
.four {
width: 100px;
height: 100px;
background: url("/maintrans.png");
}

.four:hover {
background: url('image1_when_hover.jpg');
}