/*
* 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 {
  display: block;
  position: relative;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  background: 0 50% / 80% repeat url(../image/design/background/bg_noise.gif) fixed #000;
}

/* SELECTION 
------------------------------------------------------------ */

::-moz-selection { color: #000; background: rgba(0,255,0,0.6); }

::selection { color: #000; background: rgba(0,255,0,0.6); }

/* SCROLL 
------------------------------------------------------------ */

::-webkit-scrollbar {
  width: 10px;
  background-color: #000;
}

::-webkit-scrollbar-thumb {
  border: solid .1vw rgba(0,255,0,0.4);
  border-radius: 4vw;
  background: none;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,255,0,1)), color-stop(25%, rgba(0,255,0,0.5)), color-stop(50%, rgba(0,255,0,0.2)), color-stop(75%, rgba(0,255,0,0.5)), to(rgba(0,255,0,1)));
  background: linear-gradient(360deg, rgba(0,255,0,1) 0%, rgba(0,255,0,0.5) 25%, rgba(0,255,0,0.2) 50%, rgba(0,255,0,0.5) 75%, rgba(0,255,0,1) 100%);
  background-clip: padding-box;
}

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

::-webkit-scrollbar-button:single-button{
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0,255,0,0.5); 
  border-radius: 50%;
  background-color: rgba(0,255,0,0.2);
}

/* FONT
------------------------------------------------------------ */

.press{
  font-weight: bold;
  font-family: "Press", 'Press Start 2P', arial;
}

/* LINK BOX
------------------------------------------------------------ */

a {
  color: #00ff00;
  text-decoration: none;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

a img {
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

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

/* FLEX BOX 
------------------------------------------------------------ */

.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  margin: 0;
}

/* BORDER
------------------------------------------------------------ */

hr {
  height: 1px;
  border: none;
  box-shadow: 0 0 5px 0 rgba(0,255,0,0.6);
  -webkit-box-shadow: 0 0 5px 0 rgba(0,255,0,0.6);
  -moz-box-shadow: 0 0 5px 0 rgba(0,255,0,0.6);
   background-color: rgba(0,255,0,0.2);
}

.diamond {
  display: block;
  opacity: 0.6;
  position: relative;
  width: 104%;
  height: 4vw;
  margin: 0 0 0 -2%;
  background: 0 50% / 10% space url(../image/design/07/diamond.png);
  -webkit-filter: drop-shadow( .2vw .2vw .01vw #00ff00 );
          filter: drop-shadow( .2vw .2vw .01vw #00ff00 );
}

/* Z-1 IMPORTANT
------------------------------------------------------------ */

#important {
  position: fixed;
  top: 9999px;
  left: 9999px;
  z-index: 1;
  width: 100%;
  height: 100vh;
  color: transparent;
  font-size: 1vw;
  word-break: break-all;
}

#A1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Z-2 WRAP
------------------------------------------------------------ */

#wrap {
  display: block;
  opacity: 0.95;
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
}

/* Z-3 BG
------------------------------------------------------------ */

#bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: 0% 90% / 80% repeat url(../image/design/background/bg_stargreen.gif) #000;
}

/* Z-5 BOX
------------------------------------------------------------ */

#box {
  display: block;
  position: relative;
  z-index: 5;
  width: 50%;
  min-height: 75vw;
  height: auto;
  margin: 5% auto 3%;
  border-radius: 3vw;
  -webkit-box-shadow: 0 0 2vw rgba(0,255,0,0.1);
          box-shadow: 0 0 2vw rgba(0,255,0,0.1);
  background: rgba(0,0,0,0.6);
}

#box::before, #box::after {
  content: "";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 90%;
  height: 0.1vw;
  -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
  background: 50% 50% / 100% repeat url(../image/design/08/blinkingbar.gif);
}

#box::before {
  top: 0;
}

#box::after {
  bottom: 0;
}

/* Z-5 HEADER
------------------------------------------------------------ */

header {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 22vw;
  margin: 0 0 10%;
  padding: 0;
}

header #matrix {
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
  border-radius: 3vw 3vw 0 0;
  background: 50% 50% / 40% repeat url(../image/design/background/bg_matrixreal.gif);
}

header #move {
  opacity: 0.2;
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0;
  padding: .3vw 0;
  border-radius: 3vw 3vw 0 0;
  background: 50% 50% / 100% repeat url(../image/design/background/bg_loop.gif);
}

header > .diamond {
  opacity: 0.8;
  width: 100%;
  margin: -4% 0 0;
}

header #fade {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 8vw;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(0,0,0,0.8)), to(rgba(0,0,0,0)));
  background: -o-linear-gradient(bottom, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%);
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%);
}

#site-name {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 6;
  width: 80%;
  height: 25vw;
  margin: 0;
  padding: 0;
}

#site-name p:first-child {
  opacity: 0.8;
  position: absolute;
  -webkit-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
          transform: rotate(-5deg);
  width: 100%;
  height: 100%;
  background: 50% 50% / cover no-repeat url("../image/design/05/atom1.gif");
  -webkit-filter: grayscale(100%) brightness(0%) hue-rotate(67deg) saturate(200%) drop-shadow( 0 0 2vw #00ff00);
          filter: grayscale(100%) brightness(0%) hue-rotate(67deg) saturate(200%) drop-shadow( 0 0 2vw #00ff00);
}

#site-name p:nth-child(2)  {
  opacity: 0.8;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  width: 68%;
  height: 68%;
  background: 50% 50% / contain no-repeat url("../image/design/03/color_earth.gif");
  -webkit-filter: brightness(0) saturate(100%) invert(50%) sepia(25%) saturate(2606%) hue-rotate(83deg) brightness(119%) contrast(131%) drop-shadow(rgb(0, 255, 0) 0px 0px 0.5vw);
          filter: brightness(0) saturate(100%) invert(50%) sepia(25%) saturate(2606%) hue-rotate(83deg) brightness(119%) contrast(131%) drop-shadow(rgb(0, 255, 0) 0px 0px 0.5vw);
}

#site-name > pre {
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  width: auto;
  color: #000;
  font-weight: bold;
  font-size: .19vw;
  line-height: .2vw;
  text-shadow: 0 0 .1vw #000;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  -webkit-filter: drop-shadow( 0 0 .3vw #00ff00 );
          filter: drop-shadow( 0 0 .3vw #00ff00 );
}

/* Z-99 PIGEON
------------------------------------------------------------ */

.pigeon {
  opacity: 0.4;
  position: fixed;
  top: 2%;
  z-index: 99;
  width: 12vw;
  height: 12vw;
  -webkit-filter: brightness(100%) saturate(100%) invert(64%) sepia(78%) saturate(4870%) hue-rotate(85deg) brightness(130%) contrast(114%) drop-shadow(rgb(0, 255, 0) 0px 0px 1vw);
          filter: brightness(100%) saturate(100%) invert(64%) sepia(78%) saturate(4870%) hue-rotate(85deg) brightness(130%) contrast(114%) drop-shadow(rgb(0, 255, 0) 0px 0px 1vw);
  background: url("../image/design/00/dove.gif") 50% 50% / contain no-repeat;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.pigeon:hover {
  opacity: 0.8;
}

#pigeon-nav {
  left: 1%;
}

#pigeon-map {
  right: 1%;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.nav-map-sub {
  position: fixed;
  top: 2vw;
  z-index: 96;
  width: 10%;
  color: rgba(255, 255, 255, 0.3);
  font-size: .6vw;
  font-weight: 100;
  line-height: .8vw;
  background: rgba(0, 255, 0, 0.1);
}

#click-nav {
  left: 1%;
}

#click-map {
  right: 1%;
}

/* Z-99 SITEMAP
------------------------------------------------------------ */

#sitemap {
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  z-index: 98;
  width: 70%;
  height: 90%;
  border: .1vw solid rgba(0,255,0,0.4);
  -webkit-transition: opacity .3s ease, visibility .3s ease;
  -o-transition: opacity .3s ease, visibility .3s ease;
  transition: opacity .3s ease, visibility .3s ease;
  visibility: hidden;
}

#sitemap.show {
  opacity: 1;
  visibility: visible;
}

#sitemap iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Z-97 NAVIGATION
------------------------------------------------------------ */

nav {
  opacity: 0;
  position: fixed;
  z-index: 97;
  width: 21.5%;
  height: auto;
  font-family: Press;
  padding: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity .5s ease, visibility .5s ease;
  -o-transition: opacity .5s ease, visibility .5s ease;
  transition: opacity .5s ease, visibility .5s ease;
  visibility: hidden;
}

nav.active {
  opacity: 0.6;
  visibility: visible;
}

nav:hover {
  opacity: 1;
}

#nav-container-l {
  top: 13vw;
  left: 1.5%;
}

#nav-container-r {
  bottom: 4vw;
  right: 1.5%;
}

nav h2 {
  clear: both;
  margin: 0;
  padding: 1% 0;
  background: rgba(255,255,255,0.05);
  color: rgba(0,0,0,0.8);
  font-size: 2vw;
  -webkit-filter: drop-shadow(0 0 .3vw #00ff00);
          filter: drop-shadow(0 0 .3vw #00ff00);
}

nav h2:hover {
  color: rgba(255,255,255,0.6);
}

nav > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: .8vw;
  -webkit-filter: drop-shadow(0 0 .3vw #00ff00);
          filter: drop-shadow(0 0 .3vw #00ff00);
}

nav li {
  width: 100%;
  margin: 0;
  padding: 0;
}

nav li > a {
  display: block;
  width: 100%;
  color: rgba(0,255,0,0.4);
  padding: 1% 0;
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
}

nav li > a:hover {
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
}

li.double {
  display: inline-block;
  float: left;
  width: 50%;
  padding: 1% 0;
}

#new::after, #up::after {
  display: inline-block;
  margin: 0 2%;
  color: rgba(255,255,255,0.5);
  font-size: .8vw;
}

#new:hover::after, #up:hover::after {
  color: #00ff00;
}

#new::after {
  content: 'NEW';
}

#up::after {
  content: 'UP';
}

.construction::after {
  content: '';
  display: inline-block;
  opacity: 0.5;
  width: 1vw;
  height: 1vw;
  margin: 0 2%;
  background: 0 0 / cover no-repeat url(../image/design/04/warning.png);
  -webkit-filter: brightness(0) saturate(100%) invert(94%) sepia(34%) saturate(0%) hue-rotate(74deg) brightness(111%) contrast(101%);
          filter: brightness(0) saturate(100%) invert(94%) sepia(34%) saturate(0%) hue-rotate(74deg) brightness(111%) contrast(101%);
}

.construction:hover::after {
  opacity: 0.8;
  -webkit-filter: none;
          filter: none;
}

.GOODIES > img {
  opacity: 0.4;
  width: 1vw;
  height: 1vw;
  margin: 1% 0 0;
  padding: .5%;
  border: solid .1vw rgba(0,255,0,0.6);  
}

.GOODIES > img:hover {
  opacity: 0.8;
  border: solid .1vw rgba(0,255,0,0);  
}

/* Z-7 CONTENTS
------------------------------------------------------------ */

#contents {
  display: block;
  opacity: 0;
  position: relative;
  z-index: 7;
  width: 96%;
  height: auto;
  color: rgba(0, 255, 0, 0.6);
  text-align: center;
  margin: 0 auto;
  padding: 4% 2%;
  visibility: hidden;
  -webkit-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}

#contents > .headline {
  font-size: 2.6vw;
  font-family: Press, "Press Start 2P", arial;
  letter-spacing: -0.08em;
}

#contents > span {
  display: block;
  margin: 1% 0;
  padding: 1% 0;
  background: rgba(0,255,0,0.1);
  color: rgba(0,0,0, 0.9);
  font-size: 2.3vw;
  font-weight: bold;
  text-shadow: 0 0 .5vw rgba(0,255,0,0.6);
}

#contents p {
  width: 98%;
  margin: 2% auto;
  color: rgba(0,255,0,0.6);
  font-size: 1vw;
  line-height: 1.8vw;
}

#contents > #smile {
  display: block;
  opacity: 0.6;
  width: 20vw;
  height: 20vw;
  margin: 0 auto;
  background: 50% 50% / cover no-repeat url(../image/design/08/smiley.gif); 
  filter: hue-rotate(50deg);
}

#contents > h1 {
  margin: 0 auto;
  font-size: 3vw;
}

#contents footer {
  width: 100%;
  margin: 2% auto 4%;
  color: rgba(0,0,0,0.9);
  font-size: .8vw;
  text-align: center;
  text-shadow    : 
       1px  1px 0px rgba(0, 255, 0, 0.13),
      -1px  1px 0px rgba(0, 255, 0, 0.13),
       1px -1px 0px rgba(0, 255, 0, 0.13),
      -1px -1px 0px rgba(0, 255, 0, 0.13),
       1px  0px 0px rgba(0, 255, 0, 0.13),
       0px  1px 0px rgba(0, 255, 0, 0.13),
      -1px  0px 0px rgba(0, 255, 0, 0.13),
       0px -1px 0px rgba(0, 255, 0, 0.13); 
}

/* Z-4 FOOTER
------------------------------------------------------------ */

footer:not(#contents footer) {
  display: block;
  position: relative;
  z-index: 4;
  width: 60%;
  margin: 0 auto 3%;
  color: rgba(0,0,0,0.9);
  font-size: 1vw;
  text-align: center;
  text-shadow: 0 0 .3vw rgba(0,255,0,0.6);
}

/* Z-6 DECOR
------------------------------------------------------------ */

.decor {
  opacity: 0.6;
  position: absolute;
  z-index: 6;
  -webkit-filter: brightness(0) saturate(100%) invert(50%) sepia(25%) saturate(2606%) hue-rotate(83deg) brightness(119%) contrast(131%) drop-shadow( 0 0 .5vw #00ff00 );
          filter: brightness(0) saturate(100%) invert(50%) sepia(25%) saturate(2606%) hue-rotate(83deg) brightness(119%) contrast(131%) drop-shadow( 0 0 .5vw #00ff00 );
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.decor:hover {
  opacity: 1;
}

.kira {
  background: 0 0 / cover no-repeat url(../image/starrr.gif);
}

#k-1 {
  left: 15%;
  width: 4.5vw;
  height: 4.5vw;
  margin: 7vw 0 0;
}

#k-2 {
  right: 18%;
  width: 3vw;
  height: 3vw;
  margin: 32vw 0 0;
}

#k-3 {
  left: 16%;
  width: 4vw;
  height: 4vw;
  margin: 50vw 0 0;
}

.star {
  background: 0 0 / cover no-repeat url(../image/starbright.gif);
}

#s-2 {
  left: 20%;
  width: 3vw;
  height: 3vw;
  margin: 3.5vw 0 0;
}

#s-3 {
  right: 20%;
  width: 1.5vw;
  height: 1.58vw;
  margin: 12vw 0 0;
}

#s-4 {
  right: 22%;
  width: 2.5vw;
  height: 2.5vw;
  margin: 5vw 0 0;
}

#s-5 {
  left: 15%;
  width: 2vw;
  height: 2vw;
  margin: 13vw 0 0;
}

#s-6 {
  right: 6%;
  width: 2vw;
  height: 2vw;
  margin: 20vw 0 0;
}

#s-7 {
  right: 6%;
  width: 6vw;
  height: 6vw;
  margin: 25vw 0 0;
}

#s-8 {
  left: 17%;
  width: 4vw;
  height: 4vw;
  margin: 26vw 0 0;
}

#s-9 {
  right: 21%;
  width: 2vw;
  height: 2vw;
  margin: 40vw 0 0;
}

#s-10 {
  right: 4%;
  width: 2vw;
  height: 3vw;
  margin: 46vw 0 0;
}

#s-11 {
  left: 6%;
  width: 2.6vw;
  height: 2.6vw;
  margin: 49vw 0 0;
}

#s-12 {
  right: 17%;
  width: 2.5vw;
  height: 2.5vw;
  margin: 54vw 0 0;
}

#s-13 {
  left: 20%;
  width: 2vw;
  height: 2vw;
  margin: 56vw 0 0;
}

#s-14 {
  right: 8%;
  width: 6vw;
  height: 6vw;
  margin: 60vw 0 0;
}

#s-15 {
  left: 21%;
  width: 3vw;
  height: 3vw;
  margin: 68vw 0 0;
}

#s-16 {
  right: 20%;
  width: 3vw;
  height: 3vw;
  margin: 72vw 0 0;
}

#s-17 {
  bottom: 26%;
  left: 5%;
  width: 1.5vw;
  height: 1.5vw;
}

#s-18 {
  bottom: 20%;
  left: 20%;
  width: 2vw;
  height: 2vw;
}

#s-19 {
  bottom: 17%;
  right: 10%;
  width: 2vw;
  height: 2vw;
}

#s-20 {
  bottom: 10%;
  right: 18%;
  width: 4vw;
  height: 4vw;
}

#s-21 {
  bottom: 8%;
  left: 6%;
  width: 4vw;
  height: 4vw;
}

#s-22 {
  bottom: 4%;
  right: 5%;
  width: 3vw;
  height: 3vw;
}

#s-23 {
  bottom: 3%;
  left: 14%;
  width: 2vw;
  height: 2vw;
}

#space-1, #morph-1, #earth-1, #atom-1, #dice-1, #earth-2 {
  opacity: 0.4;
}

#space-1:hover, #morph-1:hover, #earth-1:hover, #atom-1:hover, #dice-1:hover, #earth-2:hover {
  opacity: 1;
}

#space-1 {
  left: 6%;
  width: 14vw;
  height: 14vw;
  margin: 32vw 0 0;
  background: 50% 50% / cover no-repeat url(../image/design/08/space011.gif);
}

#morph-1 {
  right: 6%;
  width: 14vw;
  height: 14vw;
  margin: 40vw 0 0;
  background: 50% 50% / cover no-repeat url(../image/design/08/morph.gif);
}

#earth-1 {
  left: 5%;
  width: 15vw;
  height: 15vw;
  margin: 60vw 0 0;
  background: 50% 50% / contain no-repeat url(../image/design/08/atom.gif);
}

#dice-1 {
  left: 12%;
  width: 10vw;
  height: 16vw;
  margin: 98vw 0 0;
  background: 50% 50% / contain no-repeat url(../image/design/08/blackbluedice.gif);
}

#atom-1 {
  right: 13%;
  width: 8vw;
  height: 8vw;
  margin: 78vw 0 0;
  background: 50% 50% / contain no-repeat url(../image/design/08/atomic.gif);
}

#earth-2 {
  right: 12%;
  width: 8vw;
  height: 8vw;
  margin: 78vw 0 0;
  background: 50% 50% / contain no-repeat url(../image/design/08/Earth_Cutout_Spinning.gif);
}

/* FIREFOX
------------------------------------------------------------ */

@-moz-document url-prefix(){

nav {
  opacity: 0.6;
  visibility: visible;
}

nav.active {
  opacity: 0.6;
}

nav:hover {
  opacity: 1;
}

#click-nav {
  display: none;
}

}

/* FOR PORTRAIT
------------------------------------------------------------ */

@media screen and (orientation: portrait) {

body {
  background: #000;
}

.diamond {
  height: 6vw;
  background: 0 50% / 10% repeat url(../image/design/07/diamond.png);
}

#important {
  font-size: 2vw;
}

#bg {
  background: 0 100% / 180% repeat url(../image/design/background/bg_stargreen.gif);
}

#box {
  width: 90%;
  min-height: 100vh;
  margin: 10% auto;
  border: solid .2vw rgba(0,255,0,0.2);
  background: #000;
  -webkit-box-shadow: none;
          box-shadow: none;
}

#box::before, #box::after {
  height: .2vw;
}

header {
  height: 42vw;
}

header #matrix {
  background: 50% 50% / 60% repeat url(../image/design/background/bg_matrixreal.gif);
}

header #fade {
  height: 10vw;
}

#site-name {
  width: 90%;
  height: 45vw;
}

#site-name > pre {
  top: 55%;
  font-size: .37vw;
  line-height: .37vw;
  text-shadow: 0 0 .5vw #000;
  -webkit-filter: drop-shadow( 0 0 .3vw #00ff00 );
          filter: drop-shadow( 0 0 .3vw #00ff00 );
  background: 50% 50% / 100% no-repeat url(../image/design/07/logo3.png);
}

.pigeon {
  opacity: 0.8;
  top: 0;
  width: 25vw;
  height: 25vw;
}

#pigeon-nav {
  display: none;
}

.nav-map-sub {
  top: 3vw;
  width: 98%;
  color: rgba(255, 255, 255, 0.4);
  font-size: 2vw;
  line-height: 2vw;
  text-align: center;
}

#click-nav {
  display: none;
}

#sitemap {
  width: 80%;
  height: 80%;
  border: .2vw solid rgba(0,255,0,0.4);
}

nav {
  display: none;
}

#contents {
  margin: 0 auto;
}

#contents > .headline {
  font-size: 6vw;
}

#contents > span {
  margin: 1% 0;
  padding: 1% 0;
  font-size: 5vw;
}

#contents p {
  margin: 2% auto;
  font-size: 3vw;
  line-height: 4vw;
}

#contents > #smile {
  width: 40vw;
  height: 40vw;
  margin: 20vw auto 0;
}

#contents > h1 {
  margin: 0 auto 20vw;
  font-size: 4vw;
}

#contents footer {
  margin: 2% auto 4%;
  font-size: 2vw;
}

footer:not(#contents footer) {
  width: 100%;
  margin: 0 auto 10%;
  font-size: 3vw;
  text-shadow    : 
       1px  1px 0px rgba(0, 255, 0, 0.13),
      -1px  1px 0px rgba(0, 255, 0, 0.13),
       1px -1px 0px rgba(0, 255, 0, 0.13),
      -1px -1px 0px rgba(0, 255, 0, 0.13),
       1px  0px 0px rgba(0, 255, 0, 0.13),
       0px  1px 0px rgba(0, 255, 0, 0.13),
      -1px  0px 0px rgba(0, 255, 0, 0.13),
       0px -1px 0px rgba(0, 255, 0, 0.13); 
}

.decor {
  display: none;
}

}