/* crt effect */
      .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 5;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.00001;
  }
  5% {
  opacity: 0.00009;
  }
  10% {
  opacity: 0.00004;
  }
  15% {
  opacity: 0.00006;
  }
  20% {
  opacity: 0.00008;
  }
  25% {
  opacity: 0.0006;
  }
  30% {
  opacity: 0.10008;
  }
  35% {
  opacity: 0.10004;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
    
    
/* basic */
@media(orientation: portrait) { 
    overflow-x: scroll;
  
  } 
    html {
        cursor: url("patchicur.png"), auto;
        background-color: darkgray;
        background-image: url('indexbg2.jpg');
        background-position: bottom center;
        background-size: cover;
        background-blend-mode: screen;
        background-attachment: fixed;
    }
    .maincontainer p, .maincontainer h1 {
        color: white;
    }
    body {
        margin: 0;
    }
    a {
        color: #4d277a;
    }
a:hover {
    cursor: url("patchicur.png"), auto;
}
    #sparkle {
        background-image: url("images/pixels/sparkles-sparkle.gif");
        background-size: 9%;
        background-repeat: repeat-x;
        background-position: center;
        height: 30px;
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
    }
    #sparkle2 {
        background-image: url("images/pixels/sparkles-sparkle.gif");
        background-size: 9%;
        background-repeat: repeat-x;
        background-position: center;
        height: 30px;
        width: 100%;
        position: fixed;
        bottom: 0;
        z-index: 5;
    }
    #patch {
        position: fixed;
        bottom: -25px;
        right: 200px;
        z-index: 3;
        height: 300px;
    }
#patch2 {
        position: absolute;
        top: 160px;
        left: 400px;
        z-index: 4;
        height: 180px;
}
.sprite {
    position: fixed;
    bottom: -200px;
    left: 220px;
    background-image: url(kasumi1.png);
    background-size: contain;
    height: 600px;
    width: 200px;
}
.sprite:hover {
    background-image: url(kasumi2.png);
}
.sprite:active {
    background-image: url(kasumi3.png);
}
.img-infinitebouncehover {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.img-infinitebouncehover:hover {
  -webkit-animation-name: bounces;
  animation-name: bounces;
}

@-webkit-keyframes bounces {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounces {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}     
    
/* status */
#statuscafe {
    display: flex;
    gap: 12px;
    align-items: flex-start;

    padding: 1em;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
    border: 1.5px solid black;
    border-radius: 10px;

    position: fixed;
    bottom: 270px;
    max-width: 260px;
    right: 160px;

    z-index: 3;

    color: white;

    font-family: "MS PGothic", "Meiryo", メイリオ,
    "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3,
    sans-serif;

    font-size: 13px;
    letter-spacing: 0.9px;

    text-shadow:
    -1px -1px 0 black,
     0px -1px 0 black,
     1px -1px 0 black,
    -1px  0px 0 black,
     1px  0px 0 black,
    -1px  1px 0 black,
     0px  1px 0 black,
     1px  1px 0 black;
}

.status-left {
    width: 75px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    flex-shrink: 0;
}

.status-icon {
    width: 64px;
    height: 64px;

    object-fit: cover;

    border: 1px solid black;
    border-radius: 8px;

    margin-bottom: 6px;
}

#statuscafe-username {
    margin-bottom: 6px;
    color: white;
}

#statuscafe-username a {
    color: white;

    font-family: "MS PGothic", "Meiryo", メイリオ,
    "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3,
    sans-serif;

    font-size: 13px;
    letter-spacing: 0.9px;
}
.status-right {
    display: flex;
    flex-direction: column;
    justify-content: center;

    flex: 1;
}

#statuscafe-content {
    margin: 0;
}

#statuscafe::after {
    content: '';

    position: absolute;
    bottom: -35px;
    right: 80px;

    width: 0;
    height: 0;

    border-top: 18px solid rgba(0, 0, 0, 0.9);
    border-bottom: 18px solid transparent;
    border-right: 18px solid transparent;
}
/*basic*/
    .content {
        display: flex;
        width: 865px;
        height: 1255px;
        margin-bottom: 0px;
        background: url("bgindex.png") repeat;
        background-size: 80%;
        border: 7px #abb2ba ridge;
        margin-right: auto;
        margin-left: auto;
        padding-right: 15px;
        padding-left: 8px;
        padding-top: 5px;
        font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
        font-size: 13px;
        letter-spacing: 0.9px;
        line-height: 18px;
        outline: 1px solid black;
        
    }
    .headtitle h2 {
        color: black;
        font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
        font-size: 14px;
        letter-spacing: 0.9px;
        line-height: 21px;
        position: absolute;
        right: 27%;
        top: 1.5%;
    }
    .header {
        width: 889px;
        height: 198px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 50px;
        background-image: url("images/indexheadn.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-top: 7px #abb2ba ridge;
        border-right: 7px #abb2ba ridge;
        border-left: 7px #abb2ba ridge;
        outline: 1px solid black;
    }
    .header p {
        color: white;
        text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
        font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
        font-size: 14px;
        letter-spacing: 0.9px;
        line-height: 15px;
        margin: 75px;
        text-align: right;
    }
    .header h2 {
        color: pink;
        font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
        font-size: 10px;
        letter-spacing: 0.6px;
        line-height: 15px;
        text-align: center;
        padding-top: 6px;
        text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
    }
.header a {
    color: white;
}

/* side menu :p */
    
    .sidenav {
  height: 100%;
  width: 200px;
  background-image: url("bg.gif");
  background-attachment: local;
  padding-top: 40px;
  text-align: center;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: scroll;
  -ms-overflow-style: none;
  
}
#clock {
    margin: -10px;
    padding: 0;
}
    .mainnav {
        list-style-type: none;
        text-align: left;
        margin-top: 35px;;
    
    }
    .sidenav li a {
        font-size: 17px;
    }
.sidenav a:hover {
    background-color: #fffed6;
}
    .sidenav span li {
        margin: 16px;
        font-size: 14px;
    }
    

     
/* main content ^_- */ 
    
    .maincontainer {
        padding-top: 15px;
    }
    
/* first column starts here */ 
    .top-row {
        display: flex;
        column-gap: 15px;
        flex-direction: column;
        height: 1063px;
        margin-bottom: 0;
    }
    .flexstuff {
        display: flex;
        flex: 1;
        column-gap: 1em;
        margin-bottom: 0;
        height: 1075px;
    }
    .welcome {
        display: block;
        flex: 1;
        width: 610px;
        height: 300px;
        background-image: url(images/bgforindexn.png);
        border: 3px ridge #abb2ba;
        padding: 10px;
        text-align: center;
        overflow-y: scroll;
        outline: 1px solid black;
        
    }
.welcome h6 {
    color: white;
    text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
        text-align: left;
    margin: 1px;
    font-weight: 100;
    font-size: 13px;
}

    }
    .welcome h4 {
        margin: 0px;
    }
    .welcome p {
        margin: 10px;
        color: white;
        font-size: 13px;
        text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
        text-align: left;
    }
.welcome a {
    color: #9eb5e6;
    text-shadow: none;
}
#wiz {
    color: #e6deff;
    text-shadow: -1px -1px 2px #af8fcf, 1px -1px 2px #ffcffb, -1px 1px 2px #5f4b82, 1px 1px 2px #70596e;
    text-align: center;
}
marquee {
    margin-top: 15px;
}
marquee img {
    outline: 1px solid black;
}

    .status_box {
        flex: 1;
        flex-grow: 0;
        background-image: url(images/pixels/heartgrid.gif);
        width: 208px;
        border: 5px ridge #abb2ba;
        outline: 1px solid black;
    }
    .status_box li {
        list-style: none;
        margin-bottom: 9px;
        padding: 0;
        display: inline-flex;
        align-items: center;
    }
    .status_box ul {
        padding: 0px;
        margin-left: 7px;
        margin-bottom: 0;
    }
.status_box h5 {
        color: white;
    }
.buttab {
    margin-left: 200px;
}
    .status_area img {
        margin-right: 25px;
        margin-left: -9px;
        
    }
    .status_area {
        background-color: silver;
        border-bottom: 1px solid black;
    }
    .status_area span {
        display: flex;
    }
    .status_area p {
        color: black;
    }
    .status_title {
        display: flex;
        background-color: #665566;
        margin: 0;
        height: 20px;
        font-size: 12px;
    }
    .status_title img {
        margin: 2px;
    }
.traitsbox {
    margin: 6px 1px 6px 1px;
}
.traits {
    display: block;
    margin-left: 2px;
    margin-bottom: -6px;
    margin-top: 0;
    }
    mark {
        background-color: lightgray;
        margin: 2px;
        margin-bottom: 7px;
    }
    #blade {
        margin-left: 15px;
        margin-bottom: 7px;
        margin-top: 0;
    }
    .ulbox {
        border: 5px #8a8a8a double;
    }
.button {
    width: 200px;
    height: 36px;
    box-shadow: inset -2px -2px #000, inset 1px 1px #cfb6c5, inset -2px -2px grey,
    inset 2px 0px #a6949f;
    border-radius: 0px;
    background-color: rgba(181, 156, 170, 0.5);
    display: inline-block;
    text-decoration: none;
    padding: 7px;
    line-height: .8;
    margin: 15px 15px 0 0;
}
.button a {
    font-size: 21px;
    color: #e6deff;
    text-shadow: -1px -1px 2px #af8fcf, 1px -1px 2px #ffcffb, -1px 1px 2px #5f4b82, 1px 1px 2px #70596e;
    font-weight: bold;
    text-decoration: none;
}
.button a:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
}
.button #sorrow {
    float: left;
    margin-right: 15px;
    outline: 1px solid black;
    height: 35px;
}
.links li {
    color: white;
    text-shadow: -1px -1px 2px #af8fcf, 1px -1px 2px #ffcffb, -1px 1px 2px #5f4b82, 1px 1px 2px #70596e;
    border-bottom: 1px white dashed;
}
.links a {
    color: white;
    text-decoration: none;
}
.links ul {
     padding: 5px;
    margin: 9px;
}
    .update_area {
        margin-top: 0;
        box-sizing: border-box;
        width: 870px;
        height: 150px;
        background-image: linear-gradient(rgba(77, 73, 84, 0.5), silver);
        border: 5px ridge #95879c;
        outline: 1px solid black;
        padding: 5px;
    }
    .update_area h4 {
        margin: 0;
        font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
        font-size: 18px;
        letter-spacing: 0.6px;
        line-height: 15px;
        color: pink;
        text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
        font-style: italic;
    }
    .update_area ul {
        height: 100px;
        list-style-type: none;
        padding: 3px;
        overflow-y: scroll;
    }
    .update_area h6 {
        margin: 0;
        font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
        font-size: 12px;
        letter-spacing: 0.6px;
        line-height: 15px;
        background-color: lightgrey;
    }
    .update_area a {
        margin: 0;
        font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
    }
.update_area a:hover {
    color: #ad8ed1;
}
    
/* second column starts here */ 
    .row2 {
        display: flex;
        column-gap: 15px;
        flex-direction: column;
        height: 1100px;
        margin-bottom: 0;
    }
    .photos {
        height: 550px;
        margin-top: 15px;
        border: 5px ridge #abb2ba;
        outline: 1px solid black;
        background-image: url("images/game_images/gamebg.jpg");
        background-position: center;
        background-size: 8%;
        margin-bottom: 0;
    }
    .photos h5 {
        margin: 0;
        color: white;
    }
.photos h4 img {
    margin: -5px;
}
.photos h2 {
    margin: 0;
    background-color: silver;
    font-size: 12px;
    font-weight: normal;
    padding-left: 5px;
}
    .photos h4 {
        font-weight: normal;
        background-image: radial-gradient(#ffd6f5, #fff0fb);
        width: 120px;
        padding: 2px;
        border: 2px #c9b3c4 outset;
        border-radius: 10px;
        text-shadow: -1px -1px 0 #fff0fb, 0px -1px 0 #fff0fb, 1px -1px 0 #fff0fb, -1px 0px 0 #fff0fb, 1px 0px 0 #fff0fb, -1px 1px 0 #fff0fb, 0px 1px 0 #fff0fb, 1px 1px 0 #fff0fb;
    }
    .photos p {
        text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
    }
    .photos a {
      color: #af95c9;
    }
.photos img {
    max-height: 400px;
    max-width: 400px;
}
    .webrings_area {
        height: 230px;
        width: 208px;
        margin-top: 5px;
        margin-bottom: 0;
    }
    #touhou-ring {
      overflow: hidden;
    }

    .button_area {
        background-image: linear-gradient(#ABABAB, #D9D9D9);
        border: 5px ridge #abb2ba;
        outline: 1px solid black;
        margin-top: 15px;
        width: 208px;
    }
    .button_area h5 {
        color: white;
    }
    .button_area div {
        padding: 10px;
    }
#network {
    width: 450px;
    height: 350px;
    position: fixed;
    right: 50%;
    top: 20%;
    border: 5px ridge #abb2ba;
    outline: 1px solid black;
    display: none;
    background-image: linear-gradient(#ABABAB, #D9D9D9);
}
#network h6, #network p {
    font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
    letter-spacing: 0.6px;
    line-height: 15px;
    margin: 7px;
    font-weight: normal;
    font-style: italic;
}
.netarea {
    padding: 15px;
    overflow-y: scroll;
    height: 300px;
}
.netarea img, .netarea div {
    margin: 5px;
}
#network .status_title {
    color: white;
    letter-spacing: 0.6px;
    line-height: 15px;
    font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
}
#togglenet {
    color: white;
    text-decoration-style: dotted;
}
.webtile {
    background-image: url(webtitle.gif);
    background-size: contain;
    height: 250px;
    width: 250px;
    transform: scale(0.8); 
    color: #111;
    margin: -5px;
}
.webtile p {
    font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
    font-size: 11px;
}

.stuff {
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-align: right;
    margin: 10px;
    width: 120px;
    border: 3px black double;
    background-color: rgba(255, 255, 255, 0.5);
}

.webtile #wing {
    position: absolute;
    right: 21%;
    top: 39%;
}


 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted white; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  color: #fff;
  text-align: left;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
  border: 1.5px solid black;
  padding: 2px 5px 2px 5px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  top: 200%;
  left: 50%;
  margin-left: -30px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} 

/*footer*/
    footer {
        font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
        font-size: 14px;
        letter-spacing: 0.9px;
        line-height: 21px;
        color: black;
        margin-bottom: 45px;
        margin-top: 8px;
    }