@import url('https://fonts.googleapis.com/css2?family=Redacted+Script:wght@300;400;700&family=Special+Elite&family=Tiny5&display=swap');
@import url('https://fonts.cdnfonts.com/css/perfect-dos-vga-437');
@import url('https://fonts.cdnfonts.com/css/rocket-pop');
@import url('https://fonts.cdnfonts.com/css/ubuntu-mono-2');

/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/anime/ani-10/ani937.ani), url(https://cur.cursors-4u.net/anime/ani-10/ani937.png), auto !important;} /* End https://www.cursors-4u.com */
a {
    color: white !important;
} a:hover{
    cursor:pointer!important;
}


* {
    margin: 0;
    padding: 0;
}

::selection {
    background: rgba(0, 0, 0, 0.7);
    color: black;
    text-shadow: 0px 0px 3px white, 0px 0px 3px white, 0px 0px 3px white;
}

body {
    background: black;
    width: 1200px;
    margin: auto;
    font-family: arial;
    font-size: 12px;
    position: relative;
    
}

html::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.315) 50%);
  background-size: auto;
  z-index: 4;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}



.container {
    color: white;
    border: 1px solid darkgreen;
    width: 800px;
    margin-top: 20px;
    border-radius: 10px;
    background: black;
    box-shadow: 0px 0px 3px darkgreen;
    overflow: hidden;
    border-top-left-radius: 40%;
    border-top-right-radius: 10%;
    z-index: 2;
    position: relative;
}
.top-footer{
    display: block;
    height: 300px;
    width: 300px;
    background: url(https://www.relyonhorror.com/wp-content/uploads/2012/02/74855_113486882049878_111800915551808_65176_6660856_n-300x225.jpg);
    color: rgba(255, 255, 255, 0.511);
    z-index: 0;
    border-top-left-radius: 50px;
    margin-left: 15px;
    margin-top: 15px;
    background-size: 100px;
    font-family: ms ui gothic;
    text-shadow: 1px 1px black, 1px 1px 3px black;
    padding-left: 15px;
    padding-top: 20px;
    font-size: 10px;
    position: absolute;
    background-size: contain;
}

.top-footer a {
    color: rgba(255, 255, 255, 0.587)!important;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.453);
    padding: 0px 2px;
    text-decoration: underline;
}
.top-footer a:hover {
    color: white!important;
}


#title:hover {
    transform: scale(1.05);
    transition: ease-in 0.2s;
    animation: rainbow 0.5s infinite;
} #title {transition: ease-out 0.2s;}



.left, .right {
    float: left;
}

.left {
    background: url(https://i.pinimg.com/564x/df/36/24/df36240b6aaa99558ca93bd4941d45e1.jpg);
    background-size: cover;
    background-position: 430px;
    width: 120px;
    height: 800px;
    
}

.right {
    background: black;
    width: 670px;
    height: 800px;
    z-index: 8;
    box-shadow: 0px 0px 30px black, 0px 0px 30px black, 0px 0px 30px black, 0px 0px 30px black ;
}

header {
    color: black;
    padding-left: 0px;
    margin-right: -8px;
    font-family: arial;
    font-size: 40px;
    height: 56px;
    background:url(https://i.pinimg.com/originals/c5/17/97/c51797b4dd35d2e12bf8ee3cd1b569fd.gif);
    filter: hue-rotate(-40deg);

}

.header {
    border-top: 1px solid rgba(29, 29, 29, 1);    
    margin-right: -10px;
    
}


#title{
    color: green;
    font-family: monospace;
    margin: 10px;
    box-shadow: 0px 0px 1px dimgray;
    border-radius: 3px;
    padding: 5px;
    height: 30px;
    background: url(banner.png);
    background-size: contain;
}




nav {
    margin-top: 300px;
}

nav li {list-style: none;padding: 0px 3px;
    text-align: center;
    color: white;
    font-size: 15px;
    text-shadow: 1px 1px black;
    font-family: ms ui gothic;
    transition: ease-in 0.2s;
    height: 20px;
    border-bottom: 1px solid rgb(0, 0, 0);
    background: linear-gradient(rgba(0, 0, 0, 0.404) 30%, rgb(0, 0, 0) 20%,rgba(0, 0, 0, 0.103));
    box-shadow: inset 0px 0px 5px rgba(255, 255, 255, 0.253);
    backdrop-filter: blur(4px);
}
nav li:hover {
animation: hover-link 0.5s infinite;
text-shadow: 1px 1px black,0px 0px 8px white;
background: linear-gradient(rgba(173, 173, 173, 0.404) 30%, rgb(59, 59, 59) 20%,rgba(0, 0, 0, 0.103));
}


#subtitle {
    font-size: 10px;
    color: darkgreen;
    width: 295px;
    font-family: ubuntu mono;
    z-index: 6;
    margin-left: 350px;
    margin-top: 20px;
    text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
    background: rgba(0, 0, 0, 0.5);
}   #subtitle img {height: 10px}



.bloque {
    border: 1px solid rgba(29, 29, 29, 1);
    overflow: hidden;
    padding: 5px;
    display: inline-block;
    margin-left: 10px;
    border-radius: 3px;
    font-family: ms ui gothic;
    font-size: 10px;
    margin-bottom: 2px;
    
}

.bloque-title {
    background: linear-gradient(dimgray,black 60%);
    padding: 3px;
    text-shadow: 1px 1px black;
    font-family: ms gothic;
    font-size: 12px;
    margin-left: -5px;
    border-bottom: 1px solid rgba(29, 29, 29, 1);
    border-right: 1px solid rgba(29, 29, 29, 1)
}

table {
    background: transparent!important;
}


#featuredpage{
    height: 180px;
    width: 230px;
    margin-left: 10px;
    margin-right: 5px;
    padding-top: 0px;
    padding-right: 0px;
    background: linear-gradient(to left, rgba(13, 13, 13, 1),black 30%);
    box-shadow: 0px 0px 5px gray;
}
#featuredimg{
    --angle: 0deg;
	border: 1px solid;
	border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
	animation: 10s rotate linear infinite;
}


#webmaster{
    height: 182px;
    width: 210px;
    margin-left: 5px;
    padding-top: 0px;
    padding-right: 0;
    border: none;
    background:url(https://lh3.googleusercontent.com/proxy/oeWwlIRLzwe4WsodQysUla8KWc26_8ylj1U3yb6WYGB37kc64pbN0kXFbqP_c2WFKQmLNzhG2VYoRXUaI3rOrrM8eTef3rsU1LmcmUKg7d-yAhFiP3DWAQlA2-zwNje19M5FXOGUpSCa6w);
    background-size: 300px;
    background-position: -10px -24px;
    color: black;
    font-size: 11px;
    transform: rotate(1deg);
}

#webmasterimg {
    border: 4px solid white;
    transform: rotate(-3deg);
    box-shadow: -1px 1px 3px black;
    border-bottom: 14px solid white;
}

#webmaster a {
    color: black!important;
    background: rgba(255, 255, 255, 0.191);
}

#nav-title {
    text-align: center;color: black;font-family: ms gothic;background: linear-gradient(to top, rgb(0, 129, 0),rgb(0, 17, 1) 80%, rgb(34, 92, 34) 20%);font-weight: bold;border-bottom: 1px solid green;border-top: 1px solid green;padding-bottom: 2px;text-shadow: 1px 1px green;margin-bottom: -14px;
    box-shadow: inset 0px 0px 5px rgba(190, 255, 106, 0.596);
    border-bottom: 1px solid black;
}

#statuscafe {
    font-family: arial;
    padding:5px;
    background: black;
    color: rgb(171, 171, 171);
    font-size: 9px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));
    backdrop-filter: blur(4px);
}



#wea-abajo {
    color: black;display: inline-block;
    margin-left: 640px;
    padding: 3px;
    padding-left: 10px;padding-right: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 10px;
    position: absolute;
    background: linear-gradient(to top, rgb(16, 146, 16) 10%,rgb(0, 58, 0) 10%,rgb(11, 152, 11));
    font-weight: bold;
    font-family: ms gothic;
    letter-spacing: -1.6px;
    margin-top: 1px;
    text-shadow: 0px 1px green;
}

@keyframes pestaneo {
    0% {opacity: 1}
    20%{opacity: 0.5}
    100% {opacity: 0.5}
}

@keyframes static {
    0%{
        background-position-y: 0%;
    }
    50%{
        background-position-y: 10%;
    }
    100%{
        background-position-y: 0%;
    }
}

@keyframes hover-link {
    0% {font-family: ms ui gothic}
    25% {font-family: special elite}
    50% {font-family: redacted script}
    75% {font-family: comic sans ms}
}

@keyframes rainbow {
    0% {filter: hue-rotate(0deg)}
    25% {filter: hue-rotate(90deg)}
    50% {filter: hue-rotate(180deg)}
    75% {filter: hue-rotate(270deg)}
    100% {filter: hue-rotate(360deg)}
}


@keyframes rotate {
	to {
		--angle: 360deg;
	}
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

#statuscafe-username{
    color: rgb(71, 71, 71)!important;
}

#meme {
    width: 125px;
    height: 180px;
    margin-right: 0;
    padding-right: 0;
    padding-top: 0px;
}

#recommendations{
    height: 180px;
    width: 220px;
    margin-left: 5px;
    margin-right: 0;
    text-align: center;
    border: none;
}
#recommendations #tv{
    height: 220px;
    margin-top: -15px;
    z-index: 3;
    position: absolute;
    margin-left: -220px;
    pointer-events: none;
}

#recommendations p {
    position: absolute;
    z-index: 4;
    font-weight: bold;
    font-size: 20px;
    margin-top:-100px;
    text-shadow: -1px -1px 0 #000,  
                1px -1px 0 #000,
               -1px  1px 0 #000,
                1px  1px 0 #000,
               -2px  0   0 #000,
                2px  0   0 #000,
                0   -2px 0 #000,
                0    2px 0 #000;;
    filter: drop-shadow(1px 1px white) drop-shadow(-1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px -1px white);
    opacity: 0.8;
}
#recommendations p:hover{
    transform: translateY(2px);
}
#prevsong {
    display: block;
}


#song {
    height: 180px;width: 320px;margin-left: 5px;
    padding-right: 0px;
    background:
radial-gradient(rgba(0, 0, 0, 0.705) 15%, transparent 16%) 0 0,
radial-gradient(rgba(0, 0, 0, 0.699) 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255, 255, 255, 0.048) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255, 255, 255, 0.027) 15%, transparent 20%) 8px 9px;
background-color:#28282863;
background-size:16px 16px;
box-shadow: inset 0px 0px 5px black;
}

#blogposts{
    margin-top: 25px;   
}

#blogposts #link {
    position: absolute;
    margin-left: 165px;
    margin-top: -20px;
    background: linear-gradient(to left,transparent, rgba(85, 85, 85, 0.356));
    padding: 2px 10px;
    height: 10px;
}
#blogposts #link a{
    color: gray!important;
}
#blogposts #link a:hover{
    color: white!important;
}

#blogposts #link img {
    position: absolute;
    height: 15px;
    margin-left: 3px;
    margin-top: -3px;
}

#stamps img{
    width: 100%;
    z-index: 0;
}
#song li {
    list-style: none;
    float: left;
    padding: 5px 10px;

    background: linear-gradient(rgb(17, 17, 17) 40%, black 40%, rgb(24, 24, 24));
    text-shadow: 1px 1px black;
    
    transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 2s;
    width: 155px;

    border-bottom: 1px solid rgb(31, 31, 31);
    cursor: pointer;
    box-shadow: 0px 0px 5px rgb(0, 0, 0);
}
#song li:first-child{
    border-top: 1px solid rgb(31, 31, 31);
}

#song li img {
    margin-right: 5px;
    filter: grayscale(1);
    border: 1px solid gray;
}


@keyframes text-back-forth{
    0% {transform: translateX(-5px);}
    50% {transform: translateX(0px);}
    100% {transform: translateX(-5px);}
}

#song li:hover {
    background: linear-gradient(rgb(66, 66, 66) 40%, rgb(27, 27, 27) 40%, rgb(51, 51, 51));
    transform: translate(-5px,-5px);
    box-shadow: 5px 5px 5px rgb(0, 0, 0);
    
}

#glassy-text {
    background: linear-gradient(to top, rgb(153, 255, 0), rgb(33, 61, 0) 65%,rgb(144, 193, 79) 95%);
    padding: 0px 6px;
    border-bottom-left-radius: 20px;
    font-weight: bold;
    margin-top: -5px;
    text-align: right;
    border-bottom: 1px solid black;
    margin-right: -5px;
    color: black;
    text-shadow: 0px 0px 2px rgb(183, 255, 0);
    margin-bottom: -10px;
    padding-right: 10px;
    box-shadow: 0px 1px 2px black;
    margin-bottom: 10px;
    font-size: 12px;
    
}

  @keyframes textflicker {
    from {
      text-shadow: 1px 0 0 #592563, -2px 0 0 #00913a;
    }
    to {
      text-shadow: 2px 0.5px 2px #592563, -1px -0.5px 2px #00913a;
    }
  }


#supermeme #momazo{
    max-height: 140px;
    max-width: 190px;
    border: 8px solid white;
    border-bottom: 30px solid white;
    border-radius: 2px;
    transform: rotate(-5deg);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
    margin: 10px;
    margin-left: 20px;
    margin-top: 0;
    
}
#supermeme #momazo:hover {
    transform: rotate(0deg);
}


#personal-links a, #personal-links img{
    cursor: pointer!important;
}
#personal-links a {
    color: gray!important;
    text-decoration: none;
    background: linear-gradient(rgba(0, 0, 0, 0.404) 30%, rgb(0, 0, 0) 20%,rgba(0, 0, 0, 0.103));
    padding: 2px 5px;
    text-shadow: 1px 1px black;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: inset 0px 0px 5px rgba(255, 255, 255, 0.253);
}
#personal-links a:hover {
    color: white!important;
    text-decoration: underline;
    background: linear-gradient(rgba(173, 173, 173, 0.404) 30%, rgb(59, 59, 59) 20%,rgba(0, 0, 0, 0.103));
}


.webrings {
    float: right;
    width: 154px;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 5px;
    text-align: center;
    box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.061);
    margin: -5px;
    margin-left: 0;
    text-shadow: 0px 0px 2px black;
    align-items: center;
    align-content: center;
    
}

#cool-banner{
    margin: -5px;height: 190px;filter:drop-shadow(1px 0px 3px black);
    margin-right: -15px;
    z-index: 1;
}

#webringtitle {
    background: linear-gradient(rgb(210, 210, 210) 30%,gray 50%, rgb(146, 146, 146));
    margin: -5px;
    margin-bottom: 5px;
    padding: 5px;
    box-shadow: 0px 2px 2px black;
    text-align: center;
    text-shadow: 0px 0px 2px black;
    border-bottom: 1px solid black;
}

#webringtitle span {
    background: linear-gradient(rgb(245, 245, 245),rgb(100, 100, 100) 80%,rgb(175, 175, 175) 85%);
    box-shadow: 1px 1px 3px black;
    color: black;
    padding: 1px 30px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    font-weight: bold;
    border-bottom: 1px solid black;
    letter-spacing: 1px;
}

.buttons {
    border-right: 1px solid rgb(40, 40, 40);
    padding-right: 5px;
    height: 195px;
    width: 88px;
    margin-top: -5px;
    padding-top: 2px;
    text-align: center;
}


.link-thing{
    float: right;
    background: linear-gradient(black,#343434);
    width: 150px;
    padding: 5px;
    margin-right: -5px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 20px;
    box-shadow: inset 0px 0px 1px black, 2px 4px 0px black;
    margin-bottom: 30px;
}

#ad {
    border: 1px solid gray;
    position: absolute;
    margin-left: 810px;
}

.featured{
    float: left;
    margin: -5px;
    height: 190px;
    width: 200px;
    border-right: 1px solid rgb(33, 33, 33);
}

.featured img {
    width: 100%;
    height: 150px;
}

.featured::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 30px;
    background: linear-gradient(transparent 50%,black);
    pointer-events: none; 
    margin-top: -69px;
}

.featured p {
    padding: 0px 5px;
    text-align: justify;
}

.right-weas{
    float: left;
    margin-left: 5px;
    margin-top: -5px;
    width: 454px;
    margin-right: -5px;
    height: 190px;
    background: url(https://wallpapercave.com/wp/wp9475445.jpg);
    background-size: cover;
}

.aviso {
    position: absolute;
    margin-top: 178px;
    background: linear-gradient(rgb(86, 86, 86) 10%,black 40%,rgb(35, 35, 35));
    width: 445px;
    padding: 0px 5px;
}

.weas-box #imagen {
    height: 50px;
    align-self: left;
    border-radius: 5px;
    margin-right: 5px;
}

.weas-box {
    margin-left: 10px;
    margin-top: 5px;
    width: 300px;
    height: 50px;
    border: 1px solid rgb(17, 17, 17);
    background: rgba(0, 0, 0, 0.689);
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
    
}

#imagetitle {
    background: linear-gradient(rgb(210, 210, 210) 30%,gray 50%, rgb(146, 146, 146));
    margin: -5px;
    margin-bottom: 5px;
    box-shadow: 0px 2px 5px black;
    text-align: right;
    padding: 3px ;
   
}

#imagetitle span {
    background: linear-gradient(to right,rgb(34, 34, 34),rgb(81, 81, 81),rgb(34, 34, 34));
    padding: 1px 8px;
    box-shadow: inset 2px 2px 6px black;
    border-radius: 5px;
    font-size: 12px;
    text-shadow: 1px 0px 2px black;
    color: white;
    padding-left: 25px;
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 175px }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }
  }

  @keyframes blink{
    from, to { color: rgb(83, 139, 0);}
    50% { color: darkgreen;}
  }

@keyframes v-scroll{
    0% {margin-top:100px}
    100% {margin-top:-550px}
}

#neighboors .scroll {
    animation: v-scroll 30s linear infinite;
}
#neighboors img:hover{
    transform: scale(1.1);
    transition: ease-in 0.2s;
}


#welcome-text {
    color: darkgreen;font-size: 15px;animation: 
    typing 1.5s steps(40, end),
    blink-caret .75s step-end infinite,
    blink 0.2s infinite;
    overflow: hidden;
    border-right: 1px solid white;
    display: inline-block;
    height: 15px;
    white-space: nowrap;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.631);
    font-weight: bold;
}

#warning-text {
    background: linear-gradient(to top, rgb(0, 0, 0), rgb(107, 0, 0));
    color: black;
    font-style: italic;
    border: 1px solid rgb(0, 0, 0);

    font-weight: bold;
    text-shadow: 1px 0 rgb(255, 0, 0), -1px 0 red, 0 1px red, 0 -1px red,
               1px 1px red, -1px -1px red, 1px -1px red, -1px 1px red;padding-right: 10px;
    padding-left: 10px;
    display: inline-block;
    margin-bottom: -10px;
}



#status-text {
    display: inline;
}
#online {
    color: greenyellow;
}
#offline {
    color: rgb(83, 83, 83);
}
#idle {
    color: rgb(226, 226, 139);
}
#dnd {
    color: red;
}

#neighboors{
    border: 1px solid rgb(0, 56, 0);
    margin: 5px;
    width: 100px;
    margin-left: 10px;
    height: 100px;
    text-align: center;
    background: rgba(0, 55, 0, 0.308);
    overflow: hidden;
}

#cajitapro {
    background: url();
    height: 195px;
    width: 253px;
    margin-left: 25px;
    margin-bottom: 5px;
    margin-top: 0px;

}

footer{

    background: linear-gradient(to top, rgb(16, 146, 16) 10%,rgb(0, 58, 0) 10%,rgb(11, 152, 11));
    display: inline-block;
    width: 100%;
    margin-top: 5px;
    color: black;
    font-family: ms ui gothic;
    text-align: right;
    text-shadow: 1px 1px green;
    margin-bottom: 0;
    box-shadow: 0px 0px 5px green;
    padding-right: 15px;
    padding-top: 2px;
}

footer img {
    height: 13px;
    filter: drop-shadow(0px 1px 1px black);
}

.webrings div {
    width: 100%;
    margin: auto;
    background: rgb(12, 12, 12);
    border: 1px solid rgb(66, 66, 66);
}


#activity {
    color:dimgray;
}