* {
    outline:none;
}
html {
cursor: url("Images/wowcursor1.png") , pointer;
}

* {
    outline:none;
	cursor: url("Images/wowcursor1.png"), pointer;
}
/*COLOUR CHANGE*/

:root {
  --background-color: #ffeff2;
  --main-color: #008080; /*Dark Teal*/
  --container-text: #f3f6f4; /*Off Whute*/
  --post-color: #fff; /*White*/
  --post-text: #222; /*Black*/
}
body {
    font-family:Poppins;
    background: #000000 url('Images/WoWScrnShot_060523_202744.jpg');
background-size:cover;
    background-attachment:fixed;
    margin:0;
    word-wrap:break-word;
    overflow-x:hidden;
    font-size:16px  
}

img {
    max-width:100%;
}

article img {
    display:block;
    margin:auto;
}
.post-250 {
   max-width:250px;
}

.post-500 {
   max-width:500px;
}

.post-300 {
   max-width:300px;
}

.post-400 {
   max-width:400px;
}

.post-500 {
   max-width:500px;
}

.post-600 {
   max-width:600px;
}

.post-700 {
   max-width:700px;
}

.circle {
   border-radius:100%;
}

.rounded-corners {
   border-radius:10px;
}

.centered-image {
   display:block;
   margin:auto;
}

.list-style-none {
   list-style-type:none;
}

.top-10-percent {
   top:10%!important;
}

.left-10-percent {
   left:10%!important;
}

.right-10-percent {
   right:10%!important;
}

.bottom-10-percent {
   bottom:10%!important;
}

.top-20-percent {
   top:20%!important;
}

.left-20-percent {
   left:20%!important;
}

.right-20-percent {
   right:20%!important;
}

.bottom-20-percent {
   bottom:20%!important;
}

.top-30-percent {
   top:30%!important;
}

.left-30-percent {
   left:30%!important;
}

.right-30-percent {
   right:30%!important;
}

.bottom-30-percent {
   bottom:30%!important;
}
.top-40-percent {
   top:40%!important;
}

.left-40-percent {
   left:40%!important;
}

.right-40-percent {
   right:40%!important;
}

.bottom-40-percent {
   bottom:40%!important;
}

.top-50-percent {
   top:50%!important;
}

.left-50-percent {
   left:50%!important;
}

.right-50-percent {
   right:50%!important;
}

.bottom-50-percent {
   bottom:50%!important;
}
.top-10 {
   top:10px!important;
}

.left-10 {
   left:10px!important;
}

.right-10 {
   right:10px!important;
}

.bottom-10 {
   bottom:10px!important;
}

.top-20 {
   top:20px!important;
}

.left-20 {
   left:20px!important;
}

.right-20 {
   right:20px!important;
}

.bottom-20 {
   bottom:20px!important;
}
.top-30 {
   top:30px!important;
}

.left-30 {
   left:30px!important;
}

.right-30 {
   right:30px!important;
}

.bottom-30 {
   bottom:30px!important;
}

.top-40 {
   top:40px!important;
}

.left-40 {
   left:40px!important;
}

.right-40 {
   right:40px!important;
}

.bottom-40 {
   bottom:40px!important;
}

.top-50 {
   top:50px!important;
}

.left-50 {
   left:50px!important;
}

.right-50 {
   right:50px!important;
}

.bottom-50 {
   bottom:50px!important;
}

.margin-left-0 {
   margin-left:0px;
}
.margin-top-0 {
   margin-top:0px;
}

.margin-bottom-0 {
   margin-bottom:0px;
}

.margin-right-0 {
   margin-right:0px;
}

.margin-0 {
   margin:0px;
}

.margin-left-10 {
   margin-left:10px;
}

.margin-top-10 {
   margin-top:10px;
}

.margin-bottom-10 {
   margin-bottom:10px;
}

.margin-right-10 {
   margin-right:10px;
}

.margin-10 {
   margin:10px;
}

.margin-left-20 {
   margin-left:20px;
}

.margin-top-20 {
   margin-top:20px;
}

.margin-bottom-20 {
   margin-bottom:20px;
}

.margin-right-20 {
   margin-right:20px;
}

.margin-20 {
   margin:20px;
}

.margin-left-30 {
   margin-left:30px;
}

.margin-top-30 {
   margin-top:30px;
}

.margin-bottom-30 {
   margin-bottom:30px;
}

.margin-right-30 {
   margin-right:30px;
}

.margin-30 {
   margin:30px;
}

.margin-left-40 {
   margin-left:40px;
}

.margin-top-40 {
   margin-top:40px;
}

.margin-bottom-40 {
   margin-bottom:40px;
}

.margin-right-40 {
   margin-right:40px;
}

.margin-40 {
   margin:40px;
}

.margin-left-50 {
   margin-left:50px;
}

.margin-top-50 {
   margin-top:50px;
}

.margin-bottom-50 {
   margin-bottom:50px;
}

.margin-right-50 {
   margin-right:50px;
}

.margin-50 {
   margin:50px;
}


.margin-left-60 {
   margin-left:60px;
}

.margin-top-60 {
   margin-top:60px;
}

.margin-bottom-60 {
   margin-bottom:60px;
}

.margin-right-60 {
   margin-right:60px;
}

.margin-60 {
   margin:60px;
}


.margin-left-70 {
   margin-left:70px;
}

.margin-top-70 {
   margin-top:70px;
}

.margin-bottom-70 {
   margin-bottom:70px;
}

.margin-right-70 {
   margin-right:70px;
}

.margin-70 {
   margin:70px;
}


.margin-left-80 {
   margin-left:80px;
}

.margin-top-80 {
   margin-top:80px;
}

.margin-bottom-80 {
   margin-bottom:80px;
}

.margin-right-80 {
   margin-right:80px;
}

.margin-80 {
   margin:80px;
}


.margin-left-90 {
   margin-left:90px;
}

.margin-top-90 {
   margin-top:90px;
}

.margin-bottom-90 {
   margin-bottom:90px;
}

.margin-right-90 {
   margin-right:90px;
}

.margin-90 {
   margin:90px;
}

.margin-left-100 {
   margin-left:100px;
}

.margin-top-100 {
   margin-top:100px;
}

.margin-bottom-100 {
   margin-bottom:100px;
}

.margin-right-100 {
   margin-right:100px;
}

.margin-100 {
   margin:100px;
}

.padding-left-0 {
   padding-left:0px;
}

.padding-top-0 {
   padding-top:0px;
}

.padding-bottom-0 {
   padding-bottom:0px;
}

.padding-right-0 {
   padding-right:0px;
}

.padding-0 {
   padding:0px;
}

.padding-left-10 {
   padding-left:10px;
}

.padding-top-10 {
   padding-top:10px;
}

.padding-bottom-10 {
   padding-bottom:10px;
}

.padding-right-10 {
   padding-right:10px;
}

.padding-10 {
   padding:10px;
}

.padding-left-20 {
   padding-left:20px;
}

.padding-top-20 {
   padding-top:20px;
}

.padding-bottom-20 {
   padding-bottom:20px;
}

.padding-right-20 {
   padding-right:20px;
}

.padding-20 {
   padding:20px;
}

.padding-left-30 {
   padding-left:30px;
}

.padding-top-30 {
   padding-top:30px;
}

.padding-bottom-30 {
   padding-bottom:30px;
}

.padding-right-30 {
   padding-right:30px;
}

.padding-30 {
   padding:30px;
}

.padding-left-40 {
   padding-left:40px;
}

.padding-top-40 {
   padding-top:40px;
}

.padding-bottom-40 {
   padding-bottom:40px;
}

.padding-right-40 {
   padding-right:40px;
}

.padding-40 {
   padding:40px;
}

.padding-left-50 {
   padding-left:50px;
}

.padding-top-50 {
   padding-top:50px;
}

.padding-bottom-50 {
   padding-bottom:50px;
}

.padding-right-50 {
   padding-right:50px;
}

.padding-50 {
   padding:50px;
}


.full-width {
   width:100%;
}

.full-height {
   height:100vh;
}

.relative {
   position:relative;
}

.sticky {
   position:sticky;
   top:0;
}

.fixed {
   position:fixed;
}

.absolute {
   position:absolute;
}
.static {
   position:static;
}
.inline {
   display:inline;
}
.inline-block {
   display:inline-block;
}
.block {
   display:block;
}
.flex {
   display:flex;
   flex-wrap:wrap;
}

.no-wrap {
   flex-wrap:no-wrap;
}

.align-center {
   align-items:center;
   align-content:center;
}

.justify-center {
   justify-content:center;
}

.justify-space-around {
   justify-content:space-around;
}

.justify-space-between {
   justify-content:space-between;
}

.align-items-center {
   align-items:center;
}

.align-items-flex-start {
   align-items:flex-start;
}

.align-items-flex-end {
   align-items:flex-end;
}

.centered {
   margin:auto;
}

.side-ratio-20-80 aside, .side-20 aside{
   width:20%;
}

.side-ratio-20-80 section{
   width:80%;
}

.side-ratio-10-90 aside, .side-10 aside{
   width:10%;
}

.side-ratio-10-90 section{
   width:90%;
}

.side-ratio-35-65 aside, .side-35 aside{
   width:35%;
}

.side-ratio-35-65 section{
   width:65%;
}

.side-ratio-30-70 aside, .side-30 aside{
   width:30%;
}

.side-ratio-30-70 section{
   width:70%;
}

.side-ratio-40-60 aside, .side-40 aside{
   width:40%;
}

.side-ratio-40-60 section, .section-40 section{
   width:60%;
}

.side-ratio-50-50 aside, .side-ratio-50-50 section, .side-50 aside, .section-50 section{
   width:50%;
}
.reblog-header {
   display:flex;
   align-items:center;
   flex-wrap:wrap;
}

.reblog-header img {
   margin-right:10px;
   border-radius:100%;
}

.color-black {
   color:black!important;
}

.color-white {
   color:white!important;
}
.background-cover {
   background-size:cover;
}

.object-fit-cover {
   object-fit:cover;
}

.background-repeat-x {
   background-repeat:repeat-x;
}

.background-repeat-y {
   background-repeat:repeat-y;
}

.background-repeat {
   background-repeat:repeat;
}

.background-fixed {
   background-attachment:fixed;
}

article {
         border:1px solid rgba(222,80,118,.2);
     box-shadow:6px 6px rgba(0,0,0,.02);
     border-radius:10px;
}

.answer_post .replies {
padding: 0 20px;
}

.answer_post .replies a {
text-decoration:none;
color: #976dae; /* or whatever color you want */
}

.date {
    padding:20px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    color: #ffffff;
    background-color: var(--main-color);

}

.date a {
    text-decoration:none;
    color:#ffffff;
}

.date a:hover {
cursor: url("Images/wowcursor2.png"), pointer;
}

.date span {
    margin:0 6px;
    display:inline-block;
}

.reblog-header img {
    width:40px;
       border:1px solid rgba(222,80,118,.2);
     box-shadow:4px 4px rgba(0,0,0,.02);
     padding:4px;
}
.users {
    color:rgba(0,0,0,.54);
    font-size:.8em;
}

.reblog-header a {
    color:#de5076;
    font-weight:bold;
    font-size:1.24em!important;
    text-decoration:none;
}
.caption {
     background-color: var(--post-color);
     color:var(--post-text);
     position:relative;


}

aside .avatar {
    border-radius:100%;
    padding:10px;
    width:84px;
    box-shadow:6px 6px rgba(0,0,0,.02);
    background-color: var(--post-color);
 border:1px solid rgba(222,80,118,.2);
}

.pagination {
    width:80%;
    margin:30px auto;
    padding:20px;
    text-align:center;
}

.pagination a {
    text-decoration:none;
     margin-right:10px;
     border-radius:30px;
     color:#842530;
}

.pagination span {
    color:#fff;
    background:#842530!important;
}

.pagination a, .pagination span {
    box-shadow:6px 6px rgba(0,0,0,.02);
    background-color: var(--post-color);
    margin-right:10px;
    padding:10px;
    border:1px solid rgba(222,80,118,.2);
}

.pagination .jump_page, .pagination span {
    width:20px;
    height:20px;
    border-radius:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.bubble {
	position: relative;
	margin-left:10px;
	border-radius: .4em;
	color: var(--container-text);
    background-color: var(--main-color);
    box-shadow:6px 6px rgba(0,0,0,.02);
    width:calc(76% - 200px);
    animation:bubblein .4s 1 forwards;
}

.bubble .description {
        max-height:120px;
    overflow:auto;
}
.bubble:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 12px solid transparent;
	animation:bubbleout .4s 1 forwards;
	border-left: 0;
	margin-top:-12px;
	border-right-color:var(--main-color);

}

@keyframes bubblein {
    0% {
        
    }
    
    100% {
        transform:translateX(12px);
    }
}

@keyframes bubbleout {
    0% {
        
    }
    
    100% {
        transform:translateX(-12px);
    }
}

.hp, .sp {
    width:100%;
    border:6px solid white;
    background:rgba(244,185,186, .08);
    border-radius:10px;
    transform:skew(-16deg, 0deg) translateX(12px);
    box-shadow:0 0 0 1px rgba(222,80,118,.2), 6px 6px rgba(0,0,0,.02);
}


.hp span, .sp span {

    padding:10px;
    display:block;
    width:80%;
    border-radius:2px;
    border-bottom-left-radius:4px;
background-image: linear-gradient(to left, #F28C28 0%, #C41E3A 100%);

}


.sp span {
    
    width:50%;
}

.hp span {
    width:80%;
}

.side {
    margin-top:20px;
    width:calc(70% - 12px);
}
.label {
    font-weight:bold;
    font-size:1.2em;
    color:white;
    text-align:center;
    margin-right:12px;
    text-shadow:1px 1px #de5076, -1px -1px #de5076, -1px 1px #de5076, 1px -1px #de5076;
}
.caption a {
color:#842530;
}

 .question, .reply {
 margin-top:20px;
 border-radius: 24px;
 padding:16px;
	color: var(--container-text);
    background-color: var(--main-color);
 position:relative;
 width:70%;
 margin-left:30px;
 }
 
 .question a, .reply a {
     text-decoration:none;
     color:#842530;
 }
 .reply {
 background:rgba(244,185,186, .5);
 margin-left:15%;
 margin-bottom:20px;
 }


 .answer_post {
     background:#fff;
 }
 
 .audio_post .album {
     width:100%;
     overflow:hidden!important;
     height:420px;
 }
 
 .audio_post {
     overflow:hidden;
 }
 
 .audioinfo {
     width:70%;
     font-size:14px;
     box-sizing:border-box;
     background:#fff;
     padding:10px;
     border-radius:40px;
     margin:auto;
     position:relative;
     margin-top:20px;
     box-shadow:4px 4px 20px rgba(0,0,0,.08);

 }
 
 .audioinfo:before {
     width:100%;
     padding:4px;
     position:absolute;
     border-radius:40px;
     z-index:-1;
     left:0px;
     margin-left:-4px;
     height:100%;
     content:'';
background-image: linear-gradient(20deg, #ed6770 0%, #e786ae 100%);
 }
 

 .audiotext {
     width:calc(100% - 70px);
     margin:auto;
 }
 .player {
     margin:auto;
     height:30px;
     overflow:hidden;
     width:30px;
     margin-right:10px;
     padding:6px;
     padding-right:8px;
     border-radius:100%;
     background:#f4b9ba;
 }
 .albumart {
     position:absolute;
     width:100%;
     overflow:hidden;
     height:420px;
     filter:blur(20px);
     z-index:-1;
     opacity:.8;
     background-size:cover;
 }
 
 .song {
     width:100%;
    height:100%;
    align-content:center;
 }
 
 .song img {
     box-shadow:4px 4px 20px rgba(0,0,0,.08);
     border-radius:10px;
     max-width:60%;
     max-height:60%!important;
 }

 
 section.grid-2 {
     column-count:2;
     padding-top:30px;
     column-gap:50px;
     padding-right:50px;
     box-sizing: border-box; 
 }
 
 section.grid-2 article,  section.grid-3 article {
     break-inside:avoid;
     overflow:hidden;
     margin:0px 0 60px 0;
 }
 
 section.grid-3 {
     column-count:3;
     padding-top:30px;
     column-gap:30px;
     padding-right:30px;
     box-sizing: border-box; 
 }
 
 
 
 .tags {
     background:#fff;
     border-top:1px solid rgba(244,185,186, .2);
 }
 
 .tags a {
     text-decoration:none;
     border-radius:6px;
     color:#842530;
     padding:4px 8px;
     display:inline-block;
     margin:0 10px 0 0;
     background:rgba(244,185,186, .4);
 }
 
 section.grid-2 .tumblr_video_container,  section.grid-3 .tumblr_video_container,{
     max-width:100%!important;
     width:100%!important;
 }
 .vid {
     display:flex;
     align-items:center;
     background:#fff;
     justify-content:center;
 }
 section .tumblr_video_container {
     position:relative;
     display:flex;
     algin-items:center;
     justify-content:center;
     overflow:hidden!important;
 }
.tumblr_video_container iframe {
    position:absolute;
}

.like {
    position:relative;
    display:inline-block;
    max-height:30px;
    max-width:30px;
    top:4px;
    margin-left:6px;
    cursor:pointer;
}

.like_button {
    position:relative;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0;
    width:20px;
    transform:translateY(-4px);
    height:20px;
    z-index:10;
    transition:.12s ease-in-out;
}

.like_button iframe {
    width:100%!important;
    opacity:1!important;
    height:20px !important;

}

.custom_like {
    position:absolute;
    left:0;
    top:0;
    transform:translate(2px, -2px);
    right:0;
    transition:.4s;
    bottom:0;
    width:20px;
    height:20px;
    z-index:1;
}

.like_button.liked {
    animation:beat .2s ease-in-out 1;
    opacity:1;
    animation-delay:.12s;
}


.custom_like i {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  width: 3px;
  height: 5px;
  background: red;
  opacity: 0;
}
 .like_button.liked + .custom_like i:nth-of-type(1) {
  transform: translate3d(24px, -13px, 0) rotate(79deg);
  background: #ed6770;
  animation: bang .6s ease-out forwards;
  opacity: 0;
}
 .like_button.liked + .custom_like  i:nth-of-type(2) {
  transform: translate3d(17px, -14px, 0) rotate(58deg);
  background: #e786ae;
  animation: bang .46s ease-out forwards;
  opacity: 0;
}
 .like_button.liked + .custom_like  i:nth-of-type(3) {
  transform: translate3d(-10px, -13px, 0) rotate(329deg);
  background: ;
  animation: bang .6s ease-out forwards;
  opacity: 0;
}
 .like_button.liked + .custom_like  i:nth-of-type(4) {
  transform: translate3d(-16px, -15px, 0) rotate(345deg);
  background: #f4b9ba;
  animation: bang .6s ease-out forwards;
  opacity: 0;
}

 .like_button.liked + .custom_like  i:nth-of-type(5) {
  transform: translate3d(-26px, -9px, 0) rotate(329deg);
  background: #ed6770;
  animation: bang .6s ease-out forwards;
  opacity: 0;
}
 .like_button.liked + .custom_like  i:nth-of-type(6) {
  transform: translate3d(0px, -17px, 0) rotate(345deg);
  background: ;
  animation: bang .6s ease-out forwards;
  opacity: 0;
}

.like_button.liked + .custom_like  i {
    animation-delay:.12s;
}

.like_button.liked + .custom_like  span {
    opacity:0;
}
@keyframes bang {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}


@keyframes beat {
  0% {
    
  }
  
  50% {
      transform:scale(1.12);
  }
} 

.notes {
    background:#f4b9ba;
}

.notes a {
    color:#842530;
    text-decoration:none;
}

.likey span {
    font-size:1.12em;
    color:#842530;
}
#search {
    width:100%;
    margin-bottom:20px;

}

.navi {
    width:150px;
    transform:rotate(-1.2deg) translateX(6px) translateY(-4px);
}
#search form {
width:calc(76% - 140px);
margin-left:10px;
         border-radius:8px;
}
#search input {
    width:calc(100% - 60px);
    padding:16px 20px;

    border-radius:8px;
    border:1px solid rgba(222,80,118,.2);
     box-shadow:6px 6px rgba(0,0,0,.02);
}

::placeholder {
}

.navi a {
         text-decoration:none;
     border-radius:6px;
     color:#842530;
     display:flex;
     flex-wrap:wrap;
     align-items:center;
     font-size:1.1em;
     justify-content:center;
     height:40px;
     width:40px;
     border-radius:50px;
     background: rgba(244,185,186, .4);
         border:1px solid rgba(222,80,118,.2);
}
  
  .navi a:first-child {
    transform:translate(5px, 80px); /*Second*/ /*first numbers are horizontal, 2nd are virtical*/
}

.navi a:nth-of-type(2) {
    transform:translate(5px, 50px) /*Third*/
}

.navi a:nth-of-type(3) {
    transform:translate( 5px, 25px)
}

.navi a:nth-of-type(4) {
    transform:translate(-15px, 85px) /*First*/
}

.navi a:hover
{
    cursor: url("Images/wowcursor2.png"), pointer;
}

  #menu {
      width:30%;
      overflow:auto;
      margin-left:-30%;
           border-right:1px solid rgba(222,80,118,.2);

      background:#fff;
  }
main, #menu{
    transition:.6s;
}
  body.menu main {
    transform:translateX(30%);  }
  
  body.menu #menu {
      margin-left:0px;
  }
  
  #menu ul {
      width:80%;
      padding:0;
      margin:auto;
  }
  
  #menu li {
      list-style:none;
      display:block;
      padding:20px;
      margin:20px 0;
     border:1px solid rgba(222,80,118,.2);
      border-left-width:4px;
      border-radius:4px;
           box-shadow:6px 6px rgba(0,0,0,.02);
  }
  
  #menu li a {
      color:#842530;
      text-decoration:none;
  }
  #toggle_menu {
      cursor:pointer;
  }
  #toggle_menu.active {
        background: rgba(132,37,48, .8);
        color:#f4b9ba;
  }
  
  h2 {
      padding:20px;
      margin:0px;
   border-bottom:1px dashed rgba(222,80,118,.2);
      background:#fff;
  }
  
  #egg { opacity:.8;right:10px; bottom:10px; position:fixed;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
           font-family: "bitxmap";  
border:1.4px solid rgba(0,0,0,.6);  z-index:4;
               
            }
 #egg:hover   { animation-name: egg;
    animation-duration: 1s;
    animation-iteration-count: infinite;}
    @keyframes egg{
        0%{}
        10%{transform:rotate(20deg)}
        80%{transform:rotate(-20deg)}
        100%{}
    }
    
    ol.notes li {
        list-style:none;
        display:block;
        width:100%;
        padding:10px;
    }
    ol.notes .like {
        height:auto;
        max-height:60px;
        max-width:100%;
        margin-left:0px;
    }
    
    ol.notes img {
        display:none;
    }
    
     .link-post {
        text-decoration:none;
        transition:.6s;
                        background:#842530;
        color:#fff;
        border-bottom:2px solid #842530;
    }
    .link-post a {
        text-decoration:none;
        transition:.6s;
        color:#fff;
    }
    
    .link-post:hover a{
        color:#842530;
    }
    .link-post:hover {
                        color:#842530;
        background:#fff;
    }
    
    ul.chat {
        list-style:none;
        padding:0;
    }
    ul.chat li {
        padding:10px;
    }
    
    ul.chat li:not(:last-of-type) {
       border-bottom:1px solid #eee;
    }
    
    ul.chat li:nth-of-type(odd) {
        background:rgba(132,37,48,.08);
    }
  
  @media only screen and (max-width: 900px) {
    aside {
        width:100%!important;
        position:relative!important;
    }
    section {
        width:100%!important;
    }
    
    article {
        margin:100px auto!important;
    }
    
    #menu {
        width:80%;
        margin-left:-80%;
        z-index:9999;
    }
    
    body.menu main {
        transform:translateX(70%);
    }
    
}