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

/* INDEX
------------------------------------------------------------ */
#face{
  display:none;
}

#note{
  width:100%;
  height:auto;
  padding-bottom:1%;
  margin-bottom:2%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  text-align:center;
  border-bottom:solid 4px #00ff00;
}

#note > span{
  display:inline-block;
  color:#00ff00;
  font-size:.8vw;
  font-weight:bold;
  line-height:2.4em;
}

#note > img{
  width:1.7vw;
  height:1.7vw;
  margin:0% 1%;
}

.midori{
  width:100%;
  height:auto;
  margin:0;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -webkit-box-align:end;
  -ms-flex-align:end;
  align-items:flex-end;
}

.midori > p{
  display:inline-block;
  background-color:#00ff00;
  border:solid 4px #00ff00;
  vertical-align:bottom;
  color:#000;
  font-weight:bold;
}

.midori > p:nth-child(1){
  width:48%;
  height:auto;
  background-position:50% 50%;
  background-repeat:repeat;
  background-size:150%;
  background-image:url("../image/design/background/bg_noise.gif");
}

.midori > p:nth-child(2){
  width:48%;
  height:auto;
  background-color:#00ff00;
  text-align:center;
}

.midori > p > span{
  display:block;
  margin-bottom:-1%;
  font-size:2vw;
}

.midori > p > font{
  font-size:1.3vw;
}

#tshirts{
  width:100%;
  -o-object-fit:cover;
     object-fit:cover;
}

.button{
  width:88px;
  height:31px;
  display:inline-block;
  margin:0% 2%;
  border:solid 6px #000;
}

.overview{
  height:auto;
  background-color:rgba(0,255,0,1);
}

.overview > span{
  width:50%;
  display:inline-block;
  color:#000;
  font-size:1.3vw;
  font-weight:bold;
}

.overview > span:last-child{
  width:100%;
}

#saucer{
  z-index:999;
  width:20vw;
  height:20vw;
  top:-100%;
  left: 28%;
  position:fixed;
  background-image: url(../image/ufo.webp);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:top left;
  -webkit-filter:saturate(100%) hue-rotate(90deg);
          filter:saturate(100%) hue-rotate(90deg);
  -webkit-animation:ufo 8s 1;
          animation:ufo 8s 1;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

/* 01 COLLECTION 
------------------------------------------------------------ */
.collection span:nth-of-type(n+2){
  margin-top:5%;
}

.collection table{
  width:100%;
  table-layout:fixed;
  border-collapse: collapse;
  border:solid 4px #00ff00;
}

.collection td{
  font-size:1vw;
  font-weight:bold;
  text-align:center;
  border-collapse: collapse;
  border:solid 4px #00ff00;
}

.collection td > img{
  width:98%;
  height:100%;
  margin:0;
  padding:1%;
  -o-object-fit:cover;
     object-fit:cover;
  pointer-events: none;
}

.collection > a{
  width:99%;
  display:block;
  padding:.5%;
  color:#000;
  font-size:1.1vw;
  font-weight:bold;
  text-decoration:none;
  background-color:#00ff00;
  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; 
}

.collection > a:hover{
  background-color:#000;
}

/* 02 SLAVA
------------------------------------------------------------ */
.slava table{
  width:100%;
  height:auto;
  font-size:1.2vw;
}

.slava th{
  width:15%;
  font-size:1vw;
  font-weight:bold;
  font-family:"Press", 'Press Start 2P', arial;
  color:#000;
  background-color:#00ff00;
}

.slava th:nth-of-type(4){
  width:50%;
}

.slava img{
  width:98%;
  height:100%;
  padding:1%;
  -webkit-filter:drop-shadow(3px 5px 1px #00ff00);
          filter:drop-shadow(3px 5px 1px #00ff00);
}

.slava a{
  display:inline-block;
  margin:2% 0%;
  padding:1%;
  font-size:1vw;
  color:#000;
  text-decoration:none;
  background-color:#00ff00;
}

.slava a:hover{
  background-color:transparent;
  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; 
}

/* 03 HOW TO DYE 
------------------------------------------------------------ */
.bs{
  height:10vw;
  margin-right:2%;
}

.dye > .headline_m{
  margin:5%;
  text-align:center;
}

#select{
  width:90%;
  margin:0 auto;
  margin-bottom:4%;
  dispaly:block;
  font-size:1.1vw;
  text-align:center;
  border:solid 1px #00ff00;
}

#select td{
  padding:.5% 2%;
  position:relative;
}

#select td:hover{
  color:#000;
  background-color:rgba(0,255,0,0.8);
}

.howto{
  width:90%;
  margin:0 auto;
  margin-top:7%;
  margin-bottom:7%;
  display:block;
  text-align:center;
  border:solid 1px #00ff00;
}

.howto span{
  margin:0 auto;
  display:block;
  font-size:2vw;
}

.hair{
  width:60%;
  margin:2%;
  border:solid #00ff00 5px;
  pointer-events:none;
}

.semi{
  width:50%;
  font-size:1vw;
}

.manicpanic img{
  width:50%;
}

.adore img{
  width:20%;
}

/* 06 QUICK 
------------------------------------------------------------ */
.quick > .headline_m{
  margin-top:6%;
  margin-bottom:1%;
}
.quick img{
  margin-bottom:-1.5%;
  -o-object-fit:cover;
     object-fit:cover;
  pointer-events:none;
  opacity:0.9;
}

.quick table{
  width:100%;
  table-layout:fixed;
}

.quick table{
  margin:0;
  padding:0;
  position:relative;
  table-layout:fixed;
  text-align:center;
  border:solid 1px #00ff00;
}

.quick th{
  padding:1% 0%;
  font-size:1.1vw;
  font-family:"Press";
}

.bi td{
  width:50%;
}

.bi img{
  width:100%;
  height:auto;
}

.tri td{
  width:30vw;
}

.tri img{
  width:100%;
  height:17vw;
  -o-object-fit:cover;
     object-fit:cover;
}

.tri:last-child{
  margin-bottom:5%;
}

/* 07 LINK 
------------------------------------------------------------ */
.credits span:first-child{
  margin-bottom:-1%;
}

.credits table{
  width:100%;
  margin-bottom:5%;
  border-collapse: collapse;
  border:solid 2px #00ff00;
  text-align:left;
}

.credits th{
  width:48%;
  font-size:1.4vw;
}

.credits td{
  padding:.5%;
  font-size:1.4vw;
  vertical-align:top;
  border:solid 2px #00ff00;
}

.credits a{
  color:#00ff00;
  font-size:1vw;
  line-height:1.2em;
  text-decoration:none;
}

.credits a:hover{
  color:#000;
  background-color:#00ff00;
}

.credits img{
  width:8vw;
  height:3vw;
  display:inline-block;
  border:solid 4px #000;
}

.credits img:hover{
  border:solid 4px #00ff00;
}

/* 08 SION 
------------------------------------------------------------ */
.sion table{
  width:90%;
  font-size:1vw;
  text-align:left;
  border-collapse: collapse;
  border:solid 2px #00ff00;
}

.sion th{
  color:#000;
  font-size:1.3vw;
  background-color:#00ff00;
}

.sion td{
  padding:.5%;
  border-collapse: collapse;
  border:solid 2px #00ff00;
  vertical-align:top;
}

.sion td:nth-of-type(2){
  width:50%;
}

.pixel{
  width:10vw;
  display:block;
  margin:0 auto;
  margin-top:5%;
}

.planet{
  width:100%;
  pointer-events:none;
}

.wall{
  width:28%;
  height:13.5vw;
  margin-right:1%;
  object-fit:cover;
  border:solid 5px #00ff00;
  pointer-events:none;
}

.sion ul{
  width:48%;
  height:auto;
  margin:1%;
  padding:0;
  display:inline-block;
  font-size:1vw;
  vertical-align:top;
}

.sion li{
  margin:0% 0% 2% 3%;
}

#purple a{
  color:#00ff00;
  background-color:rgba(0,255,0,0.1);
}

#purple a:hover{
  color:#000;
  background-color:#00ff00;
}

.sion font{
  font-size:1.5vw;
}

#computer{
  width:48%;
  height:30vw;
  margin:2% 0%;
  display:inline-block;
  position:relative;
  background-image:url(../image/bluscrn.gif);
  background-position:top left;
  background-repeat:no-repeat;
  background-size:100%;
  text-align:center;
  -webkit-animation:flicker .1s infinite;
          animation:flicker .1s infinite;
}

#computer:hover{
  background-color:rgba(255,255,255,0.1);
}

#computer > span{
  width:100%;
  position:absolute;
  bottom:10%;
  left:0;
  color:#000;
  font-size:1.8vw;
  text-shadow    : 
       1px  1px 0px #00ff00,
      -1px  1px 0px #00ff00,
       1px -1px 0px #00ff00,
      -1px -1px 0px #00ff00,
       1px  0px 0px #00ff00,
       0px  1px 0px #00ff00,
      -1px  0px 0px #00ff00,
       0px -1px 0px #00ff00; 
}

#computer > img{
  width:45%;
  position:absolute;
  top:13%;
  left:27.5%;
  box-shadow: 0px 3px 56px 3px rgba(0,0,255,1);
  -webkit-box-shadow: 0px 3px 56px 3px rgba(0,0,255,1);
  -moz-box-shadow: 0px 3px 56px 3px rgba(0,0,255,1);
}

/* 09 TR 
------------------------------------------------------------ */
.tr img{
  width:29%;
  height:auto;
  margin:1%;
  border:solid 8px #00ff00;
  pointer-events:none;
}

#synopsis{
  text-align:center;
}

.tr table{
  width:49.5%;
  height:auto;
  margin:2% 0%;
  position:relative;
  display:inline-block;
  text-align:left;
  vertical-align:top;
}

.tr > iframe{
  width:31vw;
  height:21vw;
  margin:2% 0%;
}

/* 10 ARCHIVES 
------------------------------------------------------------ */
.archives img{
  width:40%;
  border:4px #00ff00 solid;
  margin-right:1%;
}

.messages{
  display:block;
  padding:2% 0%;
  font-size:1.4vw;
}

/* 11 JACKET 
------------------------------------------------------------ */
.fr-bg{
  width:50%;
  height:auto;
  margin:0;
}

/* 12 MAKE CLEAR
------------------------------------------------------------ */
.clear ul{
  width:42%;
  margin:6% 2%;
  padding-left:2%;
  position:relative;
  display:inline-block;
  vertical-align:top;
}

.clear li{
  margin:2% 0% 3% 4%;
}

.clear a{
  color:#00ff00;
  font-size:1.2vw;
  line-height:1.1vw;
}

.clear a:hover{
  color:#000;
  background-color:#00ff00;
}

.clear font{
  display:block;
  margin:0;
  font-size:1.3vw;
  font-family:"Press", 'Press Start 2P', arial;
  border-bottom:solid 4px #00ff00;
}

.clear table{
  width:70%;
  display:block;
  margin:0 auto;
  margin-top:10%;
  font-size:1.3vw;
}

.clear th{
  width:100%;
  text-align:left;
  color:#000;
  background-color:#00ff00;
}

/* GALLERY
------------------------------------------------------------ */
.gallery a{
  display:inline-block;
  margin:1% 0%;
  color:#00ff00; 
  font-size:1.6vw;
}

.gallery a:hover{
  color:#000;
  background-color:#00ff00;
}

/* CONSTRUCTION
------------------------------------------------------------ */
.construction p{
  position:absolute;
  top:50%;
  left:62%;
  -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

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

#face{
  width:100%;
  height:auto;
  position:relative;
  display:block;
  text-align:center;
}

#face p{
  width:50%;
  height:45vw;
  margin:0;
  pading:0;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:100%;
  filter:drop-shadow(0 0 2px #00ff00);
}

#face p:nth-of-type(1){
  background-image:url("../image/tg/sion_pixel_gr.png");
}

#face p:nth-of-type(2){
  background-image:url("../image/tg/timegreen_pixel_gr.png");
}

#face h1{
  display:block;
  margin:2% 0%;
  font-size:8vw;
}

#note{
  padding-top:2%;
  margin-bottom:5%;
}

#note > span{
  font-size:2.5vw;
  line-height:1.4em;
}

#note > img{
  width:5vw;
  height:5vw;
}

.midori{
  display:block;
}

.midori > p{
  display:block;
  margin-bottom:5%;
}

.midori > p:nth-child(1){
  width:98%;
}

.midori > p:nth-child(2){
  width:98%;
}

.midori > p > span{
  font-size:4vw;
}

.midori > p > font{
  font-size:3vw;
}

.button{
  width:16.5vw;
  height:6vw;
  display:inline-block;
  margin:1% 2%;
}

.overview > span{
  width:100%;
  font-size:3vw;
  overflow-wrap:break-word;
}

#saucer{
  width:40vw;
  height:40vw;
}

.collection span:nth-of-type(n+2){
  margin-top:10%;
}

.collection table{
  border:solid 2px #00ff00;
}

.collection td{
  font-size:3vw;
  border:solid 2px #00ff00;
}

.collection > a{
  font-size:2.7vw;
  line-height:1.2em;
}

.slava table{
  font-size:3.3vw;
}

.slava th{
  width:30%;
  font-size:3vw;
}

.slava td:nth-child(2){
  width:50%;
}

.slava img{
  width:98%;
  height:auto;
}

.slava a{
  font-size:3vw;
}

.bs{
  height:25vw;
}

.dye > .headline_m{
  margin:5%;
}

#select{
  width:100%;
  margin-bottom:5%;
  font-size:2.5vw;
}

#select td{
  padding:2%;
  position:relative;
}

.howto{
  width:100%;
  margin-top:10%;
  margin-bottom:10%;
  font-size:3vw;
}

.howto span{
  font-size:4vw;
}

.hair{
  width:90%;
  margin:2%;
}

.semi{
  width:50%;
  font-size:4vw;
}

.quick > .headline_m{
  margin-top:10%;
}

.quick th{
  font-size:3vw;
  overflow-wrap:break-word;
}

.quick td{
  font-size:3.5vw;
}

.tri img{
  height:27vw;
}

.tri:last-child{
  margin-bottom:10%;
}

.credits table{
  margin-bottom:10%;
}

.credits th{
  font-size:2.5vw;
}

.credits td{
  font-size:2.5vw;
  overflow-wrap:break-word;
}

.credits a{
  font-size:2.5vw;
  line-height:1.5em;
}

.credits img{
  width:16.5vw;
  height:6vw;
  border:solid 6px #000;
}

.credits img:hover{
  border:solid 6px #00ff00;
}

.sion > .headline_m{
  margin-top:10%;
}

.sion table{
  width:99.5%;
  font-size:2.5vw;
}

.sion th{
  font-size:3.5vw;
}

.sion td{
  padding:1%;
  overflow-wrap:break-word;
}

.pixel{
  width:20vw;
}

.wall{
  width:47%;
  height:37vw;
  margin-right:1%;
  border:solid 4px #00ff00;
  pointer-events:none;
}

.sion ul{
  width:100%;
  margin:2%;
  display:block;
  font-size:3vw;
}

.sion li{
  margin:0% 0% 5% 3%;
}

.sion font{
  display:none;
}

#computer{
  width:100%;
  height:90vw;
  margin:2% 0%;
  display:block;
}

#computer > span{
  font-size:4vw;
}

.tr img{
  width:45%;
  border:solid 5px #00ff00;
}

.tr table{
  width:100%;
  display:block;
  font-size:3.5vw;
}

.tr > iframe{
  width:49%;
  height:31vw;
  margin:2% 0%;
}

.archives img{
  width:98%;
  display:block;
  border:4px #00ff00 solid;
  margin:1% 0%;
}

.messages{
  padding:5% 0%;
  font-size:3.5vw;
}

.gallery a{
  font-size:3vw;
}

.construction p{
  left:50%;
  font-size:6vw;
  text-align:center;
}

}