body {
  background-image: url("images/realcloud.jpg");
  background-size: 130%;
  margin: 0;
  padding: 0;
  background-color: #6abfff;
  background-attachment: fixed;
}
    @font-face {
      font-family: Doll;
      src: url(fonts/babydoll.ttf);
    }
      @font-face {
        font-family: Vintaface;
        src: url(fonts/vintaface.otf);
      }
      
      
      
@keyframes rotation {
    from {transform:rotate(0deg);}
    to {transform:rotate(359deg);}
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

    .entire {
      width: 100%;
      height: 1700px;
    }
    .header {
            width: 1020px;
            height: 248px;
            margin: auto;
              margin-top: auto;
            margin-top: auto;
            margin-top: 1%;
            pointer-events: none;
            position: relative;
            z-index: 1;
            border: 8px solid #202020;
            border-bottom: none;
border-radius: 30px 0px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
-moz-border-radius: 30px 0px 0px 0px;
    }
    .logo {
        position: relative;
        width: 100%;
        height: 280px;
        background-image: url("images/banner.png");
        background-repeat: no-repeat;
        background-size: 100%;
        margin: auto;
        pointer-events: none;
        border-radius: 30px 0px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 30px 0px 0px 0px;
    }
    .nav {
        background-image: url("");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 1020px;
        height: 138px;
        position: relative;
        margin: auto;
        top: -8%;
        font-family: "Doll";
        border: 6px solid #202020;
        border-bottom: none;
        border-top: none;
        background-position: bottom;
        z-index: 2;
    }
    .navinner {
      position: relative;
      top: 78px;
      rotate: -5.5deg;
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 140px;
      grid-row-gap: 0px;
      font-family: "Doll";
      font-weight: bold;
      text-align: center;
      left: 1%;
      }
      .padding {
        width: 1020px;
        height: 91px;
        margin: auto;
        pointer-events: none;
        position: relative;
        border: 8px solid #202020;
          border-top-width: 8px;
          border-top-style: solid;
          border-top-color: rgb(32, 32, 32);
          border-bottom-width: 8px;
          border-bottom-style: solid;
          border-bottom-color: rgb(32, 32, 32);
        border-bottom: none;
        border-top: none;
        background-color: white;
        top: -257px;
        background-image: url("images/orange.jpg");
        background-size: 40%;
        background-position: bottom;
        z-index: -1;
      }
      
      
          .middler {
            width: 1020px;
            height: 200px;
            pointer-events: none;
            position: relative;
            z-index: 6;
    }
    .middlerbanner {
        position: relative;
        width: 100%;
        height: 260px;
        border-left: 8px;
        border-left-style: solid;
        border-left-color: rgb(32, 32, 32);
        border-right: 8px;
        border-right-style: solid;
        border-right-color: rgb(32, 32, 32);
        background-image: url("images/middler.png");
        background-repeat: no-repeat;
        background-size: 100%;
        left: -2%;
        pointer-events: none;
    }
      .middlerpadding {
        width: 1020px;
        height: 11px;
        pointer-events: none;
        position: relative;
        background-color: white;
        top: -257px;
        background-image: url("images/orange.jpg");
        background-size: 40%;
        background-position: bottom;
        z-index: -2;
        left: -2%;
      }
      
      
  #paddingdecor {
    background-image: url("img/charizard.gif");
    width: 200px;
    height: 493px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    top: 52px;
    left: 820px;
    background-position: top;
      }
      .main {
        width: 996px;
        height: 1400px;
        margin: auto;
        position: relative;
        border-bottom: none;
        border-top: none;
        background-color: white;
        top: -257px;
        border: 8px solid #202020;
          border-top-width: 8px;
          border-top-style: solid;
          border-top-color: rgb(32, 32, 32);
        border-top-color: rgb(32, 32, 32);
        border-top-style: solid;
        border-top-width: 8px;
        border-top: none;
        padding: 12px;
        background-image: url("images/orange.jpg");
        background-size: 40%;
      }
    .main1 {
      display: grid;
      grid-template-columns: 1fr 3fr 1fr;
      grid-template-rows: repeat(3, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
      height: 396px;
    }
    .left {
      background-color: white;
      border: 4px ridge #ffb92e;
      position: relative;
      top: 7%;
      margin: auto;
      width: 114px;
      height: 303px;
      padding: 27px;
      left: 9px;
      border-radius: 9px 9px 9px 9px;
      -webkit-border-radius: 9px 9px 9px 9px;
      -moz-border-radius: 9px 9px 9px 9px;
    }
    .gifs1 {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(10, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 3px;
      height: 332px;
      width: 148px;
      position: relative;
      left: -16%;
      top: -5%;
    }

  .spin {
  position: fixed;
  width: 485px;
  z-index: 100;
  top: -25%;
  right: -15%;

  animation: rotation 10s infinite linear;
}

  .moeval {
  position: absolute;
  width: 250px;
  z-index: 99;
  top: 60%;
  left: 20%;
  animation: shake 8s;
  animation-iteration-count: infinite;
}

  .thumbsval {
  position: absolute;
  width: 250px;
  z-index: 99;
  top: 10%;
  right: 20%;
  animation: shake 8s;
  animation-iteration-count: infinite;
}
    
    .center {
      background-color: white;
      border: 4px ridge #ffb92e;
      position: relative;
      top: 12px;
      margin: auto;
      width: 491px;
      height: 278px;
      padding: 27px;
      border-radius: 9px 9px 0px 0px;
  -webkit-border-radius: 9px 9px 0px 0px;
  -moz-border-radius: 9px 9px 0px 0px;
  left: -4px;
    }
    .welcome {
      text-align: center;
      position: relative;
      top: -10%;
      height: 333px;
    }
    .box1 {
      position: relative;
      width: 590px;
      height: 309px;
      top: 2%;
      text-align: center;
      left: 190px;
      border: 2px solid;
      padding: 28px;
    }
    #box1 {
      height: 333px;
    }
    .welcomewrap {
      display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px; 
  height: 82px;
    }
    #welc1 {
      margin: auto;
      text-align: center;
      background-image: url("gifs/cat2.gif");
      height: 58px;
      width: 44px;
      background-size: 100%;
      background-repeat: no-repeat;
      position: relative;
    }
    #welc2 {
      margin: auto;
      text-align: center;
      background-image: url("gifs/cat2.gif");
      height: 58px;
      width: 44px;
      background-size: 100%;
      background-repeat: no-repeat;
      position: relative;
    }
    #box1head {
      position: relative;
      font-family: Vintaface;
      color: #ef8535;
      border-bottom: 3px dashed #376BE5;
      height: 81px;
    }
    .centerfoot {
      margin: auto;
      text-align: center;
      background-image: url("gifs/vsoctogifcrop.gif");
      height: 147px;
      width: 177px;
      background-size: 100%;
      background-repeat: no-repeat;
      position: relative;
      top: -2%;
    }
    .center2 {
      position: relative;
      background: white;
      height: 20px;
      border: 4px ridge #ffb92e;
      top: -28px;
      width: 545px;
      text-align: center;
      left: -31px;
    }
    .blinkieescroll {
      position: relative;
      width: 545px;
      height: 50px;
      overflow: hidden;
    }
    .scrollinner {
      display: grid;
      grid-template-columns: repeat(28, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 0px;
      grid-row-gap: 0px;
      animation: move 20s linear infinite alternate;
      width: 737px;
      position: relative;
    }
    .right {
      background-color: white;
      border: 4px ridge #ffb92e;
      position: relative;
      top: 7%;
      margin: auto;
      width: 114px;
      height: 303px;
      padding: 27px;
      right: 18px;
      border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  -moz-border-radius: 9px 9px 9px 9px;
    }
    .rightgif {
      background-image: url("gifs/pochitchi.gif");
      width: 109px;
      height: 114px;
      background-repeat: no-repeat;
      background-size: 140%;
      border: 4px ridge #ffb92e;
      border-radius: 9px 9px 9px 9px;
      -webkit-border-radius: 9px 9px 9px 9px;
      -moz-border-radius: 9px 9px 9px 9px;
      position: relative;
      top: -2%;
      background-position: center;
    }
    .righttxt {
      position: relative;
      top: -3%;
    }
    .main2 {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr;
      height: 365px;
    }
    .left2 {
      background-color: white;
      border: 4px ridge #ffb92e;
      position: relative;
      margin: auto;
      width: 523px;
      height: 280px;
      padding: 27px;
      left: -17px;
      border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  -moz-border-radius: 9px 9px 9px 9px;
    }
    .featured {
      text-align: left;
      position: relative;
      top: -9%;
      height: 308px;
    }
    .box2wrap {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 0px;
      grid-row-gap: 0px;
    }
    #box2head {
      font-family: Vintaface;
      color: #6abfff;
      border-bottom: 3px dashed #25272f;
      height: 85px;
      width: 225px;
    }
    .box2gif {
      background-image: url("img/pikmin.png");
      background-size: 100%;
      width: 145px;
      height: 91px;
      background-repeat: no-repeat;
      position: relative;
      left: 21%;
      top: 6%;
      background-position: top;
    }
    .featuredwrap {
      display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px; 
    }
    #text2 {
      width: 234px;
    }
    .right2 {
      background-color: white;
      border: 4px ridge #ffb92e;
      position: relative;
      margin: auto;
      width: 276px;
      height: 280px;
      padding: 27px;
      left: -29px;
      border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  -moz-border-radius: 9px 9px 9px 9px;
    }
    #box3 {
      text-align: left;
    }
    .updatewrap {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 0px;
      grid-row-gap: 0px;
    }
    #box3head {
      font-family: Vintaface;
      color: #ffb92e;
      position: relative;
      top: -25px;
      border-bottom: 3px dashed #25272f;
      width: 275px;
    }
    .maractus {
      background-image: url("gifs/maractus.gif");
      background-size: 100%;
      width: 61px;
      background-repeat: no-repeat;
      height: 73px;
      position: relative;
      left: -86%;
      top: -7%;
    }
    #text3 {
      overflow-y: auto;
      height: 196px;
      width: 295px;
      padding: 17px;
      position: relative;
      left: -26px;
      top: -23px;
    }
    #stampdivider {
      background-color: white;
      border: 4px ridge #ffb92e;
      position: relative;
      top: 5px;
      margin: auto;
      width: 900px;
      height: 27px;
      padding: 19px;
      -webkit-border-radius: 9px 9px 9px 9px;
      left: -4px;
    }
    #stampsgrid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 2px;
      height: 58px;
      width: 922px;
      position: relative;
      left: -8px;
      top: -15px;
    }
    .main4 {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr;
      height: 365px;
    }
    #buttony {
      top: 10px;
      background-color: white;
      border: 4px ridge #ffb92e;
      position: relative;
      margin: auto;
      width: 325px;
      height: 280px;
      padding: 27px;
      left: -16px;
      border-radius: 9px 9px 9px 9px;
      -webkit-border-radius: 9px 9px 9px 9px;
      -moz-border-radius: 9px 9px 9px 9px;
    }
    #selfinsertwebring {
      position: relative;
    }
    #buttons {
      display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
      width: 304px;
      height: 62px;
      position: relative;
      left: 12px;
      top: 12px;
    }
    #main4right {
      background-color: white;
      border: 4px ridge #ffb92e;
      position: relative;
      margin: auto;
      width: 472px;
      height: 280px;
      padding: 27px;
      left: -29px;
      border-radius: 9px 9px 9px 9px;
      -webkit-border-radius: 9px 9px 9px 9px;
      -moz-border-radius: 9px 9px 9px 9px;
      top: 9px;
    }
    #btn1 {
      background-image: url(button/button3.png);
      height: 31px;
      width: 88px;
    }
    #btn2 {
      background-image: url(button/button2.png);
      height: 31px;
      width: 88px;
    }
    #btn3 {
      background-image: url(button/button4.png);
      height: 31px;
      width: 88px;
    }
    #didyouknow {
      position: relative;
      width: 186px;
      height: 80px;
      background-image: url(gifs/didyouknow.gif);
      background-size: 100%;
      background-repeat: no-repeat;
      top: -10px;
      left: 67px;
    }
  #box4 {
    height: 281px;
  }
  #box4head {
    font-family: Vintaface;
    color: #ef8535;
    line-height: 60px;
    position: relative;
    top: -41px;
  }
  #box4funny {
    margin: auto;
    background-image: url("img/gaymario.jpg");
    height: 167px;
    width: 196px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    top: -16%;
  }
    .sticky {
      background-image: url("img/hsp.gif");
      width: 375px;
      height: 652px;
      background-repeat: no-repeat;
      background-size: 100%;
      position: fixed;
      top: 48%;
      left: 2%;
      z-index: -1;
    }
    .sticky2 {
        background-image: url("img/nekojira.gif");
        width: 369px;
        height: 440px;
        background-repeat: no-repeat;
        background-size: 100%;
        position: fixed;
        top: 53%;
        left: 80%;
        z-index: -1;
    }
  footer {
    margin: auto;
  text-align: center;
  margin-top: -263px;
  }
    /* other */
    h1 {
      font-size: 40px;
    }
    h2 {
      font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
      font-size: 15px;
      font-weight: bold;
    }
    p {
      font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
      font-size: 12px;
    }
    #banner33 {
      background-image: url("large banners/pikapi.gif");
      width: 147px;
      height: 23px;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    #banner34 {
      background-image: url("large banners/katamari1.gif");
      width: 147px;
      height: 38px;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    #banner35 {
      background-image: url("large banners/haru1.gif");
      width: 147px;
      height: 44px;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    #banner36 {
      background-image: url("large banners/sc5.gif");
      width: 147px;
      height: 45px;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    #banner37 {
      background-image: url("large banners/pokepark.gif");
      width: 147px;
      height: 35px;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    #banner38 {
      background-image: url("large banners/ika1.jpg");
      width: 147px;
      height: 30px;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    #banner39 {
      background-image: url("large banners/kemono.png");
      width: 147px;
      height: 51px;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    #banner40 {
      background-image: url("large banners/sonic2.gif");
      width: 147px;
      height: 44px;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    @keyframes move {
      to { transform: translateX(-495%); }
    }
    .banner1 {
      background-image: url(blinkie/banner1.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner2 {
      background-image: url(blinkie/banner2.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner3 {
      background-image: url(blinkie/banner3.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner4 {
      background-image: url(blinkie/banner4.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner5 {
      background-image: url(blinkie/banner5.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner6 {
      background-image: url(blinkie/banner6.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner7 {
      background-image: url(blinkie/banner7.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner8 {
      background-image: url(blinkie/banner8.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner9 {
      background-image: url(blinkie/banner9.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner10 {
      background-image: url(blinkie/banner10.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner11 {
      background-image: url(blinkie/banner11.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner12 {
      background-image: url(blinkie/banner12.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner13 {
      background-image: url(blinkie/banner13.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner14 {
      background-image: url(blinkie/banner14.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner15 {
      background-image: url(blinkie/banner15.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner16 {
      background-image: url(blinkie/banner16.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner17 {
      background-image: url(blinkie/banner17.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner18 {
      background-image: url(blinkie/banner18.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner19 {
      background-image: url(blinkie/banner19.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner20 {
      background-image: url(blinkie/banner20.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner21 {
      background-image: url(blinkie/banner21.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner22 {
      background-image: url(blinkie/banner22.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner23 {
      background-image: url(blinkie/banner23.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner24 {
      background-image: url(blinkie/banner24.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner25 {
      background-image: url(blinkie/oldmanyaoi.gif);
      width: 150px;
      height: 20px;
      background-size: 100%;
    }.banner26 {
    background-image: url(blinkie/tavi.gif);
    width: 150px;
    height: 20px;
    background-size: 100%;
    }.banner27 {
    background-image: url(blinkie/giygas.gif);
    width: 150px;
    height: 20px;
    background-size: 100%;
    }.banner28 {
    background-image: url(blinkie/runaway5.gif);
    width: 150px;
    height: 20px;
    background-size: 100%;
    }
  
    @keyframes travel {
      0%, 100% {
          transform: translateX(0) scaleX(1);
      }
      49% {
        transform: scaleX(1);
      }
      50% {
        transform: translateX(1330%) scaleX(-1);
      }
      51% {
        transform: scaleX(-1);
      }
    }
    #navtxt {
        color: #182d09;
        text-decoration: none;
        font-size: 23px;
    }
    #navtxt:hover {
  color: #a56639;
  text-decoration: none;
  cursor: pointer;
    }
    #stamp1 {
      background-image: url(stamps/earthbound.gif);
      width: 99px;
      height: 56px;
      background-size: 100%;
    }
    #stamp2 {
      background-image: url(stamps/yourgay.jpg);
      width: 99px;
      height: 56px;
      background-size: 100%;
    }
    #stamp3 {
      background-image: url(stamps/stamp37.png);
      width: 99px;
      height: 56px;
      background-size: 100%;
    }
    #stamp4 {
      background-image: url(stamps/stamp24.gif);
      width: 99px;
      height: 56px;
      background-size: 100%;
    }
    #stamp5 {
      background-image: url(stamps/push.gif);
      width: 99px;
      height: 56px;
      background-size: 100%;
    }
    #stamp6 {
      background-image: url(stamps/stamp40.png);
    width: 110px;
    height: 56px;
    background-size: 100%;
    background-repeat: no-repeat;
    }
    #stamp7 {
      background-image: url(stamps/stamp9.gif);
      width: 99px;
      height: 56px;
      background-size: 100%;
    }
    #stamp8 {
      background-image: url(stamps/stamp18.gif);
      width: 99px;
      height: 56px;
      background-size: 100%;
    }
    #stamp9 {
      background-image: url(stamps/stamp32.png);
      width: 99px;
      height: 56px;
      background-size: 100%;
    }