/***

THIS CODE HAS BEEN REVAMPED... AGAIN!

IF YOU WANT THE ORIGINAL CSS, GO TO: 
  https://eggramen.neocities.org/code/css/misc/fakewp_old/fakewp2.css

IF YOU WANT THE v2 CSS (i.e. NOT THE ORIGINAL BUT NOT THE CURRENT WIP REVAMP), GO TO: 
  https://eggramen.neocities.org/code/css/misc/fakewp_new/fakewp2_new.css

***/

body {
  font-family: Verdana, sans-serif;
  font-size: 0.875em;
  color: #ee4991;
  background: #ee4991;
  background-image: url("https://files.catbox.moe/zbtowq.gif");
  }

/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/cursors/cur-3/cur244.ani), url(https://cur.cursors-4u.net/cursors/cur-3/cur244.png), auto !important;} /* End https://www.cursors-4u.com */

::selection {
  /* (Text highlighted by the user) */
  background: rgba(139, 139, 139, 0.2);
}

  ::-webkit-scrollbar {
      width: 16px;
    }

    ::-webkit-scrollbar:horizontal {
      height: 17px;
    }

    ::-webkit-scrollbar-corner {
      background: #eee;
    }

    ::-webkit-scrollbar-track:vertical {
      background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
    }

    ::-webkit-scrollbar-track:horizontal {
      background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
    }

    ::-webkit-scrollbar-thumb {
      border: 1.5px solid #888;
      border-radius: 3px;
      box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
      background-color: #eee;
    }

    ::-webkit-scrollbar-thumb:vertical {
      background: url("https://i.imgur.com/bfyvjnx.png") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
    }

    ::-webkit-scrollbar-thumb:horizontal {
      background: url("https://i.imgur.com/tqe4SxM.png") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
    }

    ::-webkit-scrollbar-button:horizontal:end:increment,
    ::-webkit-scrollbar-button:horizontal:start:decrement,
    ::-webkit-scrollbar-button:vertical:end:increment,
    ::-webkit-scrollbar-button:vertical:start:decrement {
      display: block;
    }

    ::-webkit-scrollbar-button:vertical {
      height: 17px;
    }

    ::-webkit-scrollbar-button:vertical:start:decrement {
      background: white;
      background-image: url("https://i.imgur.com/EFnEMEb.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    ::-webkit-scrollbar-button:vertical:start:increment {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:end:decrement {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:end:increment {
      background: white;
      background-image: url("https://i.imgur.com/xuIt6Lc.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

a {
  color: purple;
}

a:hover,
a:focus {
  color: #e511ec;
  text-decoration: none;
}
  
center {
  text-align: center;
  }
  
/*Contains everything*/
.wrapper {
  width: 1150px;
  background: #000000;
  margin: 0 auto;
  top: 0;
  margin-top: -10px;
  border: 1px solid #ff0ac6;  
  margin-bottom: -10px;
  }
  
/*Contains main and sidebar divs*/
.wrapper-2 {
  position: relative;
}
  
/*Header and footer images*/
.header {
  height: 460px;
  overflow: hidden;
  background: linear-gradient(rgb(0,0,0,0.1),rgb(0,0,0,0.1)), url("https://files.catbox.moe/giazhx.png"); /*This is the image in the header and footer. Replace it with your own!*/
  background-size:cover;
  margin-bottom: 15px;
  }
  
  
.footer {
  height: 50px;
  }
  
.header img {
  border-top: 0px;
  }

  
/*Override default margins/padding for headings.*/
.p, .h1, .h2, .h3 {
  padding:0;
  margin: 0;
  text-color: #ee4991;
  }

/*Container for top row of links.*/
.links {
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 5px;
  }
  
/*Div style for individual links.*/
.link {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  float: none;
  font-weight: bold;
  font-size: 1.16em;
  padding: 5px;
  margin-right: 10px;
  margin-left: 10px;
  border: 0px solid red;
  }
  
.link a {
  color: #ee4991;
  text-decoration: none;
  }

hr {
    height: 2px;
    background-color: #ee4991;
    border: none;
}

/*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
.main {
  display: inline-block;
  
  }
 

.sidebar-left {
  width: 300px;
  position: absolute;
  top: 0;
  margin-left: 10px;
  margin-right; 10px;
  }

.about-likes {
  height: 160px;
  overflow: scroll;
  overflow-x: hidden;
}

.about-dislikes {
  height: 160px;
  overflow: scroll;
  overflow-x: hidden;
}

ul.pixel-bullets {
    list-style-image: url(https://valkyrias-hideout-art.neocities.org/IMG/assets/icon-bullet/99c69f62.png);
    margin: 10px;
    padding: 0 15px;
}


  
.main {
  margin-left: 320px;
  width: 817px;
  }

.bout-me {
  height: 536px;
  overflow: scroll;
  overflow-x: hidden;
}

.pagedoll {
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px purple) drop-shadow(0px 1px 1px purple);
    margin: 10px;
    float: left;
    -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;
}

.pagedoll: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);
  }
}   

colgroup {
    display: table-column-group;
    unicode-bidi: isolate;
}

.about-table {
    margin: 20px;
    width: 95%;
    border: 2px solid hotpink;
    border-radius: 5px;
    background: #000000);
    overflow: hidden;
}

table { 
    border-collapse: collapse;
    border-spacing: 5px;
    table-layout: fixed;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}

.about-table tr {
    height: 50px;
    line-height: 20px;
    padding: 5px;
    border-bottom: 2px dashed;
    border-bottom-color: initial;
    margin: 2px;
}
    

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px purple;
  background-color: inherit;
  color: #ff84ce;
}

.note {
    margin-top: 5px;
}
.note {
    border: 3px dotted hotpink;
    border-radius: 10px;
    background-color: #000000;
    background-clip: padding-box;
    text-align: center;
    padding: 10px;
    margin-bottom: 5px;
}



.kin {
    border: 3px solid hotpink;
    transition-duration: 0.3s;
    transition-property: transform;
}

.kin:hover,
.kin:focus,
.kin:active {
    transform: scale(1.1);
}

.fo {
  border: 3px solid #db1d5c;
   transition: all 0.5s;
display: block;
transition: 1s ease;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 220%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.fo:hover{
  transition: all 0.5s;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}  

.about-favcharas {
  height: 450px;
  overflow: scroll;
  overflow-x: hidden;
}

.fav-character {
    border: 3px solid gray;
    transition-duration: 0.3s;
    transition-property: transform;
    
}

.fav-character:hover,
.fav-character:focus,
.fav-character:active {
    transform: scale(1.1);
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip a {
    color: hotpink;
    font-weight: bold;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #000000;
    border: 2px solid hotpink;
    color: #ee4991;
    font-family: Arial;
    font-size: 0.75em;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 2;
    width: 120px;
    top: 100%;
    left: 48.5%;
    margin-left: -65px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
  
.section-tab {
    border: 1px solid black;
    width: auto;
    height: 25px;
    box-shadow: 0px 0px 2px #000;
    background-color: #F8E0F7;
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(248, 117, 170, 1) 0%, rgb(122, 3, 63) 100%);
    /* change this if you want */
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    
    
}

.section-title {
    display: inline-block;
    margin: 1px 1px 5px 5px;
    color: white;
    text-align: center;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
    font-size: 1em;
    font-weight: bold;
    font-family: 'Pirata One';
    /* you can change this to hidden or pointer */
    text-decoration: none;
    letter-spacing: normal;
    transition: .3s;    
}

.navigation-button {
background-color: #ff7cbd;
  color: #91003c;
  background-image: linear-gradient(
    180deg,
    #ff7cbd 0%,
    rgba(128, 0, 49, 0.068) 100%
  );
  display: inline-block;
  width: 136px;
  text-decoration: none;
  padding: 5px;
  line-height: 1;
  border: 1px solid #1a000c;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  box-shadow: inset 0px 0px 6px -10px rgba(161, 0, 67, 0.56),
    inset -13px 0px 6px -10px rgba(155, 0, 77, 0.56),
    inset 0px 13px 6px -10px #ff7cbd,
    inset 0px -13px 6px -10px rgba(99, 0, 38, 0.38);
}

.navigation-button:hover {
  background-image: -webkit-linear-gradient(top, #ff3db5, #74003a);
  background-image: -moz-linear-gradient(top, #ff3ace, #74003a);
  background-image: -ms-linear-gradient(top, #fc33da, #74003a);
  background-image: -o-linear-gradient(top, #ff50d3, #74003a);
  background-image: linear-gradient(to bottom, #ff3eef, #74003a);
}


#index-navigation .inner {
    height: auto;
    overflow: scroll;
    overflow-x: hidden;
    padding: 0px;
}

/*Box used for individual sections in the sidebar, center column, etc.*/
.box {
  padding: 5px 10px 0px 10px;
  background-color: #000000;
  border: 1px solid #ff0ac6;
  color: #ee4991;
  margin: 10px 0px 15px 0px;
  }


  
/*Prevent overflow of large images in main text areas.*/
.box img {
  max-width: 100%;
  height: auto;
  }
  
/***
  Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
  don't follow the margins of the main text. (For an example of that: see skin #1.)
  ***/
.inner {
  
  }

footer {
  border: 1px solid #ff0ac6;
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: #000000;
  display: flex;
  justify-content: center;
}
  
/* For narrow screens. Makes the sidebars narrower, and makes width of the 
 * center/main div 50% of the viewport width.
 */
@media(max-width:1180px) {
  .wrapper {
    width: calc(440px + 50vw);
    }
  .main {
    width: 50vw;
    }
  }
  
@media(max-width:910px) {
  .wrapper {
    width: calc(360px + 52vw);
    }
  .sidebar-left, .sidebar-right {
    width: 200px;
    }
  .main {
    margin-left: 180px;
    width: 52vw;
    }
  }
  
/* Mobile compatibility. Puts everything into a standard vertical layout. */
@media(orientation:portrait) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .wrapper-2 {
    width: 94vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .sidebar-left, .main, .sidebar-right {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
    }
  .sidebar-left, .sidebar-right {
    font-size: 0.95em;
    }
  }