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

/* DECOR
------------------------------------------------------------ */

header {
  display: none;
}

#k-2 {
  top: 30%;
  margin: 0;
}

#k-3 {
  top: 60%;
  margin: 0;
}

#s-6 {
  top: 2%;
}

#s-7 {
  top: 13%;
  margin: 0;
}

#s-8 {
  top: 5%;
}

#s-9 {
  top: 18%;
  margin: 0;
}

#s-10 {
  top: 26%;
  margin: 0;
}

#s-11 {
  top: 9%;
  margin: 0;
}

#s-12 {
  top: 20%;
  margin: 0;
}

#s-13 {
  top: 26%;
  margin: 0;
}

#s-14 {
  top: 28%;
}

#s-15 {
  top: 47%;
  margin: 0;
}

#s-16 {
  top: 50%;
  margin: 0;
}

#s-17 {
  bottom: 26%;
}

#s-18 {
  bottom: 20%;
}

#s-19 {
  bottom: 17%;
}

#s-20 {
  bottom: 10%;
}

#s-21 {
  bottom: 14%;
}

#s-22 {
  bottom: 4%;
}

#s-23 {
  bottom: 1%;
}

#space-1 {
  top: 0;
  margin: 32vw 0 0;
}

#morph-1 {
  top: 35%;
  margin: 0;
}

#earth-1 {
  bottom: 35%;
  margin: 0;
}

#dice-1 {
  bottom: 5%;
  margin: 98vw 0 0;
}

#atom-1 {
  bottom: 80%;
}

#earth-2 {
  bottom: 20%;
}

/* 02 SLAVA
------------------------------------------------------------ */

#poochi {
  opacity: 0.5;
  position: absolute;
  top: 2%;
  right: -13%;
  z-index: 10;
  width: 13vw;
  height: 15vw;
  background: 50% 50% / contain no-repeat url(../image/me/poochi.gif);
  -webkit-filter: saturate(40%) contrast(180%) drop-shadow(0 0 .3vw #00ff00);
          filter: saturate(40%) contrast(180%) drop-shadow(0 0 .3vw #00ff00);
}

#poochi h5 {
  position: absolute;
  bottom: -5%;
  color: rgba(0,0,0,0.6);
  font-size: .8vw;
  text-shadow: .1vw .1vw .1vw #00ff00;
}

#chikaramizu {
  opacity: 0.4;
  position: absolute;
  left: -14%;
  z-index: 10;
  width: 12vw;
  height: 14vw;
  margin: 26vw 0 0;
  background: 50% 50% / contain no-repeat url(../image/me/chikaramizu.gif);
  -webkit-filter: saturate(40%) contrast(180%) drop-shadow(0 0 .3vw #00ff00);
          filter: saturate(40%) contrast(180%) drop-shadow(0 0 .3vw #00ff00);
}

#chikaramizu h5 {
  position: absolute;
  bottom: -12%;
  left: -25%;
  width: 140%;
  color: rgba(0,0,0,0.6);
  font-size: .8vw;
  text-shadow: .1vw .1vw .1vw #00ff00;
}

#contents.slava table{
  width: 90%;
  margin: 4% auto 2%;
}

#contents.slava table img:not(td#noristax a img){
  pointer-events: none;
}

#contents.slava tr, 
#contents.slava th, 
#contents.slava td:not(#me) {
  vertical-align: top;
}

#contents.slava table th {
  width: 40%;
  margin: 0;
  padding: 1% .5% 1% 1.5%;
  border-bottom: solid .2vw rgba(0,0,0,0.9);
  background: rgba(0,255,0,0.1);
  color: rgba(0,0,0,0.9);
  font-size: 1.6vw;
  font-family: "Press", 'Press Start 2P', arial;
  line-height: 2vw;
  text-align: left;
  text-shadow: 0 0 .3vw rgba(0,255,0,0.6);
}

#contents.slava table td:not(td#me), #contents.slava table td:not(td#fav) {
  padding: .5% 1%;
  color: rgba(255,255,255,0.6);
  text-align: left;
  text-shadow: 0 0 .3vw rgba(0,255,0,0.6);
}

#contents.slava table td#me {
  opacity: 0.8;
  width: 35%;
  margin: 0;
  padding: 0;
  background: 50% 20% / 120% no-repeat url(../image/me/suits.gif);
  -webkit-filter: contrast(110%) grayscale(60%);
          filter: contrast(110%) grayscale(60%);
}

#contents.slava table td#fav {
  margin: 0;
  padding: 0;
  font-size: 0;
}

#contents.slava table td#fav img {
  display: inline-block;
  opacity: 0.6;
  width: 16.66%;
  height: 7.5vw;
  margin: 0;
  padding: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: grayscale(80%);
          filter: grayscale(80%);
}

td#noristax a img {
  width: 7.5vw;
  height: 2.5vw;
  margin: 1% 1% 0 0;
  padding: .5%;
  border: solid .1vw rgba(0,255,0,0.4);
}

td#noristax a img:hover {
  -webkit-filter: drop-shadow( 0 0 .5vw rgba(0,255,0,0.4));
          filter: drop-shadow( 0 0 .5vw rgba(0,255,0,0.4));
}

#contents.slava span.press {
  margin: 5% 0 0;
}

ul#friend {
  display: block;
  list-style-type: none;
  width: 88%;
  margin: 2% auto 4%;
  padding: 0;
  text-align: left;
}

ul#friend a {
  padding: 1% 0;
  color: rgba(255,255,255,0.6);
  text-decoration: underline;
}

ul#friend a:hover {
  color: #000;
}

ul#friend li {
  display: inline-block;
  position: relative;
  margin: .5% 0;
  padding: 1%;
  color: rgba(0,0,0,0.9);
  font-weight: bold;
  font-size: 1vw;
  font-family: "Press", 'Press Start 2P', arial;
  vertical-align: top;
  text-shadow: 0 0 .3vw rgba(0,255,0,0.6);
}

ul#friend li:first-child {
  display: block;
  width: 98%;
  padding: 1%;
  background: rgba(0,255,0,0.1);
  font-size: 1.4vw;
}

ul#friend li:nth-child(2n) {
  width: 27%;
  padding: 1%;
  background: rgba(0,255,0,0.1);
}

ul#friend li:nth-child(odd):not(ul#friend li:first-child) {
  width: 67%;
  padding: 1%;
  color: rgba(255,255,255,0.6);
}

ul#friend li:nth-child(6) {
  height: 6.6vw;
}

ul#friend li:last-child {
  position: absolute;
  height: 7vw;
}

ul#friend li:last-child img {
  opacity: 0.6;
  width: 14.5%;
  height: 7.3vw;
  margin: -1.5% 0 0;
  padding: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  pointer-events: none;
  -webkit-filter: grayscale(80%);
          filter: grayscale(80%);
}

/* 07 LINK
------------------------------------------------------------ */

p#mybutton img {
  display: inline-block;
  opacity: 0.6;
  margin: .5%;
  padding: .5%;
  border: solid .1vw rgba(0,255,0,0.4);  
  vertical-align: middle;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

p#mybutton img:not(p#mybutton img:nth-of-type(3)) {
  width: 6.5vw;
  height: 2.2vw;   
}

p#mybutton img:hover {
  opacity: 1;
}

#contents.credits p#neo1 {
  margin: 2% auto 1%;
}

#contents.credits p#neo1 a {
  display: inline-block;
  width: 6.5vw;
  height: 2.2vw;
  margin: 0 .5% 2% 1%;
  padding: .5%;
  border: solid .1vw rgba(0,255,0,0.2);
  vertical-align: top;
}

#contents.credits p#neo1 a:hover{
  border: solid .1vw rgba(0,255,0,0);
  -webkit-filter: drop-shadow( 0 0 .5vw #00ff00);
          filter: drop-shadow( 0 0 .5vw #00ff00);
}

#contents.credits p#neo1 a img {
  opacity: 0.7;
  width: 100%;
  height: 100%;
  -webkit-filter: grayscale(90%);
          filter: grayscale(90%); 
}

#contents.credits p#neo1 a img:hover {
  opacity: 1;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

#contents.credits div#neo2 ul {
  display: inline-block;
  list-style-type: none;
  width: 49%;
  height: auto;
  margin: 0 .5%;
  padding: 0;
  vertical-align: top;
}

#contents.credits div#neo2 li {
  margin:  0 0 2%;
  padding: 1%;
  border: solid .1vw rgba(0,255,0,0.2);
  background: rgba(0,0,0,0.6);
}

#contents.credits div#neo2 a {
  display: block;
  margin: 0;
  padding: 1% 0;
  color: rgba(255,255,255,0.6);
  font-weight: bold;
  font-size: 1vw;
  -webkit-filter: drop-shadow( 0 0 .5vw #00ff00 );
          filter: drop-shadow( 0 0 .5vw #00ff00 );
}

#contents.credits div#neo2 a:hover, #contents.credits table#neo3 a:hover {
  background: rgba(0,255,0,0.1);
  color: #000;
}

#contents.credits table#neo3 {
  width: 100%;
  margin: 2% 0 0;
  border: 0;
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
  text-shadow: 0 0 .3vw rgba(0,255,0,0.6);
}

#contents.credits table#neo3 th {
  width: 30%;
  margin: 0;
  padding: 2% 1%;
  border-bottom: solid .2vw rgba(0,0,0,0.9);
  background: rgba(0,255,0,0.1);
  color: rgba(255,255,255,0.6);
  font-size: 1.4vw;
  vertical-align:top;
}

#contents.credits table#neo3 td {
  width: 60%;
  margin: 0;
  padding: 2% 1%;
}

#contents.credits table#neo3 a {
  display: block;
  margin: 0;
  padding: .5%;
  border-bottom: solid .1vw rgba(0,255,0,0.2);
  color: rgba(255,255,255,0.6);
  font-weight: 100;
  font-size: 1vw;
  line-height: 1.3vw;
}

/* 99 GOODIES
------------------------------------------------------------ */

#contents.goodies {
  font-size: 0;
}

#contents.goodies span:nth-child(n+3) {
  display: block;
  margin: 1% 0;
}

#contents.goodies img {
  opacity: 0.6;
  width: 6.3vw;
  height: 6.3vw;
  margin: 1% 0;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  -webkit-filter: grayscale(90%);
          filter: grayscale(90%);
}

#contents.goodies img:hover {
  opacity: 1;
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

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

@media screen and (orientation: portrait) {

#poochi {
  opacity: 1;
  top: 13%;
  right: -2%;
  width: 35vw;
  height: 37vw;
  -webkit-filter: saturate(20%) brightness(60%) contrast(180%) drop-shadow(0 0 .3vw #00ff00);
          filter: saturate(20%) brightness(60%) contrast(180%) drop-shadow(0 0 .3vw #00ff00);
}

#poochi h5 {
  color: rgba(0,0,0,0.9);
  font-size: 3vw;
}

#chikaramizu {
  opacity: 1;
  top: 22%;
  left: 80%;
  width: 20vw;
  height: 22vw;
  margin: 0;
  background: 50% 50% / contain no-repeat url(../image/me/chikaramizu.gif);
  -webkit-filter: saturate(40%) brightness(60%) contrast(180%) drop-shadow(0 0 .3vw #00ff00);
          filter: saturate(40%) brightness(60%) contrast(180%) drop-shadow(0 0 .3vw #00ff00);
}

#chikaramizu h5 {
  display: none;
}

#contents.slava table{
  width: 90%;
  margin: 4% auto;
}

#contents.slava tr, 
#contents.slava th, 
#contents.slava td:not(#me) {
  display: block;
}

#contents.slava table th {
  width: 100%;
  border-bottom: 0;
  font-size: 4vw;
  line-height: 4vw;
}

#contents.slava table td#me {
  display: block;
  width: 102%;
  height: 40vw;
  margin: 0 0 6%;
  background: 50% 20% / 110% no-repeat url(../image/me/suits.gif);
}

#contents.slava table td#fav img {
  width: 33.3%;
  height: 16vw;
}

td#noristax a img {
  width: 20vw;
  height: 7vw;
  padding: 1%;
}

#contents.slava span.press {
  width: 90%;
  margin: 5% auto 0;
}

ul#friend {
  width: 90%;
  margin: 2% auto 0;
}


ul#friend li {
  font-size: 2.5vw;
}

ul#friend li:first-child {
  width: 98%;
  font-size: 4vw;
}

ul#friend li:nth-child(2n) {
  width: 30%;
  padding: 1%;
}

ul#friend li:nth-child(odd):not(ul#friend li:first-child) {
  width: 60%;
}

ul#friend li:nth-child(6) {
  height: 30vw;
}

ul#friend li:last-child {
  height: 30vw;
}

ul#friend li:last-child img {
  width: 32%;
  height: 15vw;
}

ul#friend + hr {
  display: none;
}

p#mybutton img {
  display: inline-block;
  opacity: 0.6;
  margin: 1%;
  padding: .5%;
  border: solid .1vw rgba(0,255,0,0.4);  
}

p#mybutton img:not(p#mybutton img:nth-of-type(3)) {
  width: 20vw;
  height: 7vw;   
}

#contents.credits p#neo1 {
  margin: 2% auto 1%;
}

#contents.credits p#neo1 a {
  width: 20vw;
  height: 7vw;
  margin: 1% 1% 2%;
}

#contents.credits div#neo2 a {
  font-size: 2vw;
  line-height: 3vw;
}

#contents.credits table#neo3 th {
  width: 30%;
  margin: 0;
  padding: 2% 1%;
  border-bottom: solid 1vw rgba(0,0,0,0.9);
  font-size: 2vw;
}

#contents.credits table#neo3 a {
  font-size: 2vw;
  line-height: 3vw;
}

#contents.goodies img {
  width: 12vw;
  height: 12vw;
}

}