/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* BODY 
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@font-face {
  font-family: 'Press';
  src: url("../font/PressStart2P-Regular.ttf") format("truetype");
}

body{
  width:100%;
  margin:0;
  padding:0;
  background-color:#000;
  overflow-y:auto;
  overflow-x:hidden;
  font-family:arial;
}

html { overflow: overlay; }

/* SELECTION 
------------------------------------------------------------ */
::selection { color: #000; background: #00ff00; }

::-moz-selection { color: #000; background: #00ff00; }

/* SCROLL 
------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color:transparent;
}

::-webkit-scrollbar-thumb {
  background-color:#00ff00;
}

::-webkit-scrollbar-track:hover{
  background-color:rgba(0,255,0,0.1);
}

/* FONT
------------------------------------------------------------ */
.press{
  font-family:"Press", 'Press Start 2P', arial;
}

/* LINK BOX
------------------------------------------------------------ */
.link{
  z-index:999;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* BORDER
------------------------------------------------------------ */
hr {
   border-width: 5px 0px 0px 0px;
   border-style: solid;
   border-color: #00ff00;
   height: 5px;
}

/* DESIGN
------------------------------------------------------------ */
#wrap{
  z-index:1;
  width:100%;
  height:100vh;
  display:block;
  position:relative;
  overflow:hidden;
}

#bg{
  z-index:2;
  width:100%;
  height:100vh;
  display:block;
  position:absolute;
  top:0;
  left:0;
  background-image:url(../image/design/background/bg_noise.gif);
  background-size:40%;
  background-repeat:repeat;
  background-position:top 50%;  
  opacity:0.16;
}

#box{
  z-index:3;
  width:92%;
  height:84vh;
  padding:1.5%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex; 
  -webkit-box-pack:justify; 
  -ms-flex-pack:justify; 
  justify-content:space-between;
  position:absolute;
  top:50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  background-color:rgba(0,0,0,0.4);
  border:solid 10px #00ff00;
  opacity:0.85;
}

#contents{
  z-index:4;
  width:100%;
  height:100%;
  padding:0% 1% 0% 0%;
  color:#00ff00;
  font-size:1.2vw;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-y:scroll;
  overflow-x:hidden;
}

#contents > p{
  display:block;
  margin:0;
  padding:0;
  font-size:1.4vw;
  line-height:1.2em;
  clear:both;
}

#nav{
  z-index:5;
  width:40%;
  height:100%;
  margin-right:1%;
  overflow-y:scroll;
}

.headline{
  display:block;
  margin:2% 0% 1% 0%;
  font-size:3.5vw;
}

.headline_m{
  display:block;
  font-size:2vw;
}

/* FOOTER
------------------------------------------------------------ */
footer{
  width:100%;
  height:auto;
  display:block;
  margin:5% 0%;
  color:#00ff00;
  font-size:1vw;
  text-align:center;
}

footer a{
  padding:.5%;
  color:#000;
  font-size:1.6vw;
  text-shadow    : 
       2px  2px 0px #00ff00,
      -2px  2px 0px #00ff00,
       2px -2px 0px #00ff00,
      -2px -2px 0px #00ff00,
       2px  0px 0px #00ff00,
       0px  2px 0px #00ff00,
      -2px  0px 0px #00ff00,
       0px -2px 0px #00ff00; 
}

footer a:hover{
  color:#00ff00;
  text-shadow    : 
       2px  2px 0px #000000,
      -2px  2px 0px #000000,
       2px -2px 0px #000000,
      -2px -2px 0px #000000,
       2px  0px 0px #000000,
       0px  2px 0px #000000,
      -2px  0px 0px #000000,
       0px -2px 0px #000000;  
}

/* ANIMATION
------------------------------------------------------------ */
@-webkit-keyframes ufo{
  0%{top:-100%; left:0; opacity:1;}
  30%{top:10%; left:25%; opacity:1;}
  50%{top:25vw; left:50%; opacity:1;}
  80%{top:30vw; left:75%; opacity:0.9;}
  100%{top:0%; left:120%; opacity:0;}
}

@keyframes ufo{
  0%{top:-100%; left:0; opacity:1;}
  30%{top:10%; left:25%; opacity:1;}
  50%{top:25vw; left:50%; opacity:1;}
  80%{top:30vw; left:75%; opacity:0.9;}
  100%{top:0%; left:120%; opacity:0;}
}

@-webkit-keyframes flicker{
  0%{ -webkit-filter:drop-shadow(0 0 3px #00ff00) invert(10%) hue-rotate(80deg); filter:drop-shadow(0 0 3px #00ff00) invert(10%) hue-rotate(80deg);}
  100%{ webkit-filter:drop-shadow(0 0 3px #00ff00) invert(0%) hue-rotate(0deg); -webkit-filter:drop-shadow(0 0 3px #00ff00) invert(0%) hue-rotate(0deg); filter:drop-shadow(0 0 3px #00ff00) invert(0%) hue-rotate(0deg); }
}

@keyframes flicker{
  0%{ -webkit-filter:drop-shadow(0 0 3px #00ff00) invert(10%) hue-rotate(80deg); filter:drop-shadow(0 0 3px #00ff00) invert(10%) hue-rotate(80deg);}
  100%{ webkit-filter:drop-shadow(0 0 3px #00ff00) invert(0%) hue-rotate(0deg); -webkit-filter:drop-shadow(0 0 3px #00ff00) invert(0%) hue-rotate(0deg); filter:drop-shadow(0 0 3px #00ff00) invert(0%) hue-rotate(0deg); }
}

/* FOR PORTRAIT
------------------------------------------------------------ */
@media screen and (orientation: portrait) {

#bg{
  background-size:100%;
}

#box{
  width:100%;
  height:100vh;
  padding:0;
  display:block;
  position:relative;
  border:0px;
  background-color:rgba(0,0,0,0);
}

#contents{
  z-index:4;
  height:90%;
  display:block;
  position:fixed;
  margin:0;
  padding:4% 4% 40% 4%;
}

#contents > p{
  font-size:3.4vw;
  line-height:1.5em;
  clear:both;
}

#nav{
 z-index:9999;
  width:100%;
  height:25vw;
  display:block;
  position:relative;
  top:0;
  left:0;
  margin-top:0%;
  margin-right:0%;
}

.headline{
  margin:1% 0%;
  font-size:6vw;
}

.headline_m{
  font-size:4vw;
}

footer{
  margin:15% 0% 5% 0%;
  font-size:3vw;
}

footer a{
  font-size:4vw;
}

}