@font-face {
  font-family: 'MS Gothic';
  src: url(https://zyozi.neocities.org/assets/msgothic/MS%20Gothic.ttf);
}

body {
  font-family: 'MS Gothic';
  font-weight: 100;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("/me/emo%20gworl.jpg");
background-size: 70%;
background-position: center;
background-attachment: fixed;
filter: brightness(15%);
z-index: -1;
}

        .meKinnies img {
          width: 100%;
          height: auto;
        }
        .meImgs img { 
          width: auto;
          height: 100%;
        }

.mememe{
display : block;
width : 705px;
height: auto;
overflow : hidden;
margin : 150px auto 0 auto;
background-color: transparent;
border: 4px solid white;
}
.headerPhoto{
clear : none;
float : left;
position : relative;
width : 705px;
height : 200px;
background-image: url("");
background-size: auto;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
border-width: 0px 0px 2px 0px;
border-color: white;
border-style: solid;
overflow: hidden;
}
        .headerPhoto h1{
          font-size: 15px;
          line-height: 15px;
        }
.quikFax{
clear : none;
float : left;
position : relative;
width : 250px;
height : 315px;
background-color: #00000020;
border-width: 2px 2px 2px 0px;
border-color: white;
border-style: solid;
overflow: hidden;
}
      .quikFax p {
        color: white;
        font-weight: 100;
        font-size: 13px;
        line-height: 8px;
        padding: 0px 4px;
        text-align: center;
        letter-spacing: 1px;
      }
      .quikFax mark {
        color: white;
        font-weight: 100;
        text-shadow: #fff 1px 0 2px;
        background-color: transparent;
      }
      .quickFax b {
        color: #fff;
        font-weight: 100;
        letter-spacing: 1px;
        text-shadow: #fff 1px 0 5px;
      }
      .quikFax h1 {
        color: white;
        text-indent: 5px;
        font-size: 15px;
        line-height: 18px;
        padding: 0px 4px;
      }
      .username {
        opacity: 0.6;
        font-size: 14px;
        line-height: 12px;
        padding: 0px 4px;
      }
      .zodiac p {
        letter-spacing: 0px;
      }
      .sign {
        display: inline-block;
        vertical-align: text-bottom;
        margin-top: -3px;
        height: 14px;
        width: auto;
      }
      .THEMOOOOOON {
        display: inline-block;
        vertical-align: baseline;
        height: 11px;
        width: auto;
      }
      .pfp {
        float: left;
        height: 100px;
        width: 100px;
        margin: 5px;
        padding: 0px;
        border: 1px solid white;
      }
      .spacer {
        line-height: 0px;
        margin-top: -7px;
      }
      .webbadge {
        vertical-align: text-bottom;
        filter: grayscale(0.3);
        padding: 1px 0px;
      }
      .badges {
        border-style: solid;
        border-width: 3px 0px;
        padding: 4px 0px;
        border-color: white;
        display: block;
        text-align: center;
        margin: -7px auto;
        width: 100%;
      }
      .imvu {
        width: auto;
        padding: 0px 0px;
        word-spacing: 0px;
        text-align: center;
        text-align-last: center;
        margin: 13px auto;
        filter: grayscale(0.3);
      }
.aboutMe{
clear : none;
float : left;
position : relative;
width : 451px;
height : 315px;
background-color: #00000020;
border-width: 2px 0px 2px 2px;
border-color: white;
border-style: solid;
overflow-x: hidden;
overflow-y: scroll;
}
        .aboutMe h1 {
          color: white;
          font-size: 16px;
          line-height: 18px;
          padding: 0px 15px;
        }
        .aboutMe p {
          color: white;
          font-size: 13px;
          line-height: 16px;
          text-indent: 20px;
          padding: 0px 15px;
          text-align: justify;
        }
        .aboutMe table, th, td {
        border: 1px solid white;
        }
        .aboutMe th {
        width: 25%;
        color: white;
        font-weight: 100;
        font-size: 13px;
        line-height: 16px;
        text-shadow: #fff 1px 0 1px;
        }
        .aboutMe td {
        width: 80%;
        color: white;
        font-weight: 100;
        padding: 2px 5px;
        font-size: 12px;
        line-height: 16px;
        }
        .aboutMe table {
        margin: 5px 20px 5px 20px;
        width: 400px;
        }
        .aboutMe ul {
        list-style-image: url('/me/assets/bulletpoint.gif');
        color: #ffffff;
        }
        .aboutMe li {
        color: #b0b0b0;
        }
        .love {
        color: #ff9cc7;
        background-color: transparent;
        }
        .like {
        color: #9cffcc;
        background-color: transparent;
        }
        .hate {
        color: #ffac9c;
        background-color: transparent;
        }
        .category {
        color: #fff;
        background-color: transparent;
        text-shadow: #fff 1px 0 3px;
        }
.meImgs{
clear : none;
float : left;
position : relative;
width : 550px;
height : 210px;
background-color: #00000020;
border-width: 2px 2px 2px 0px;
border-color: white;
border-style: solid;
overflow-x: scroll;
overflow-y: hidden;
}
        .meImgs h1 {
          color: white;
          font-size: 13px;
          font-weight: 900;
          line-height: 12px;
          padding: 2px 2px;
          text-indent: 10px;
          letter-spacing: 3px;
          word-spacing: 5px;
        }
        .meImgs mark {
          font-size: 10px;
          letter-spacing: 2px;
          color: #fff;
          opacity: 0.7;
          background-color: transparent;
        }
        .rowImgs {
         width: auto;
         padding: 7px 5px;
         display: flex;
        }
        .rowImgs img {
          padding: 0px 3px;
          width: auto;
          height: 150px;
        }
.meKinnies{
clear : none;
float : left;
position : relative;
width : 151px;
height : 210px;
background-color: #00000020;
border-width: 2px 0px 2px 2px;
border-color: white;
border-style: solid;
overflow-x: hidden;
overflow-y: scroll;
}
      .meKinnies img {
        padding: 2px 10px;
        margin: auto;
        width: 87%;
      }
      .meKinnies h1 {
        color: white;
        font-size: 13px;
        font-weight: 900;
        line-height: 12px;
        padding: 2px 2px;
        text-indent: 10px;
        letter-spacing: 3px;
        word-spacing: 5px
      }
.meProfiles{
clear : none;
float : left;
position : relative;
width : 705px;
height : 40px;
background-color: #00000020;
border-width: 2px 0px 0px 0px;
border-color: white;
border-style: solid;
}

::selection {
  background: #fff;
  color: #000;
}

/*Customizes scroll bar*/
/* width */
::-webkit-scrollbar
{
  width: 15px;
}

/*Customizes color of the direction buttons*/  
::-webkit-scrollbar-button:start {
    background-color: #000;
}

::-webkit-scrollbar-button:end {
    background-color: #000;
}

/*Customizes color of Handle */
::-webkit-scrollbar-thumb
{
  background-color: #000;
  border: 1px solid #6e6e6e;
}

/*Customizes color of Handle hover*/
::-webkit-scrollbar-thumb:hover {
  background-color: #606060;
  border: 1px solid black;
}  
  
/*Customizes color of Track */
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px #000;
  background-color: #1c1c1c;
}


/* Scrollbar Buttons */
/*Width*/  
::-webkit-scrollbar-button
{
  height: 16px;
  width: 16px;
}

/* Up */
::-webkit-scrollbar-button:vertical:decrement
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/0yt2dVc/Arrow-Up.png");
}

/*Up Hover*/  
::-webkit-scrollbar-button:vertical:decrement:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/Fn2qWmj/Arrow-Up-hover.png");
}


/* Down */
::-webkit-scrollbar-button:vertical:increment
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/rGMFVKm/Arrow-Down.png");
}

/*Down Hover*/  
::-webkit-scrollbar-button:vertical:increment:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/PYWv05Q/Arrow-Down-hover.png");
}


/* Left */
::-webkit-scrollbar-button:horizontal:decrement
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/brJnjD4/Arrow-Left.png");
}

/*Left Hover*/  
::-webkit-scrollbar-button:horizontal:decrement:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/0rQhWN5/Arrow-Left-hover.png");
}


/* Right */
::-webkit-scrollbar-button:horizontal:increment
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/4dyTzJt/Right.png");
}

/*Right Hover*/
::-webkit-scrollbar-button:horizontal:increment:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/qrRZ8CR/Right-Hover.png");
}


/* ===== The FREAKIN iPod!!!!!!!!!!!!!!!!!!!!!!!!!! ===== */
.musiciframe {
  position: fixed;
  top: 340px;
  opacity: 1;
  left: 269px;
  cursor: url;
}
.ipod {
font-family: Helvetica;
content: url(https://i.postimg.cc/RC608YYb/384px-IPod-classic.png);
width: 384px;
height: 599px;
z-index: -1;
position: fixed;
top: 20px;
left: 20px;
}
.screenipod {
font-family: Helvetica;
height: 218px;
width: 284px;
border: 2px solid black;
background-color: white;
position: fixed;
top: 55px;
left: 74px;
overflow: hidden;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
/* ===== Left Menu ===== */
.leftheaderipod { 
font-family: Helvetica;
color: black;
font-weight: 700;
font-size: 12px;
padding: 2px 0px 0px 4px;
grid-area: 1 / 1 / 2 / 2; 
background: linear-gradient(0deg, rgba(77,104,114,1) 0%, rgba(121,142,150,1) 20%, rgba(151,168,175,1) 38%, rgba(203,213,216,1) 84%, rgba(231,237,238,1) 100%);
text-shadow: -1px 0px 1px rgba(215,215,215,1);
height: 18px;
}
.leftmainipod { 
font-family: Helvetica;
grid-area: 2 / 1 / 3 / 2; 
background-color: white;
height: 197px;
overflow-y: scroll;
}
/* ===== Right Image ===== */
.rightimg { 
grid-area: 1 / 2 / 3 / 3; 
background-color: transparent;
background-size: 160%;
background-repeat: no-repeat;
background-position: left center;
overflow: hidden;
}
.vignette {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 18px rgba(0,0,0,0.3) inset, 0 0 5px rgba(0,0,0,0.8) inset;
}
/* ===== List ===== */
.screenipod ul {
font-family: Helvetica;
background: white;
color: black;
font-size: 12px;
font-weight: 700;
font-style: normal;
margin: 0px 0px;
padding: 0px;
list-style-type: none;
}
.screenipod ul li {
font-family: Helvetica;
font-weight: 700;
padding: 2px 6px;
}
.screenipod ul li:hover {
font-family: Helvetica;
font-weight: 700;
background: linear-gradient(0deg, rgba(16,80,142,1) 0%, rgba(0,97,164,1) 5%, rgba(0,102,168,1) 41%, rgba(1,135,198,1) 98%, rgba(26,165,231,1) 100%);
color: white;
}
.screenipod ul li p {
font-family: inherit;
font-weight: inherit;
margin: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.screenipod ul li h2 {
font-family: inherit;
color: inherit;
font-size: 10px;
font-weight: 400;
opacity: 80%;
margin: 1px 1px 1px;
}

/* ===== Formatting Link to Normal Text ===== */
.leftmainipod a {
font-family: Helvetica;
color: inherit;
text-decoration: none;
font-weight: 700;
font-style: normal;
}
.leftmainipod a:hover {
font-family: Helvetica;
color: inherit;
text-decoration: none;
font-weight: 700;
font-style: normal;
}
.screenipod ul li:hover {
color: white;
}
/* ===== Scrollbar CSS ===== */
/* Firefox */
.leftmainipod {
    scrollbar-width: thin;
    scrollbar-color: #878787 #ffffff;
}

/* Chrome, Edge, and Safari */
.leftmainipod::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: #ffffff;
}

.leftmainipod::-webkit-scrollbar
{
	width: 12px;
	background-color: #ffffff;
}

.leftmainipod::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #adadad;
}