/* FONTS */

@font-face {
  src:url('https://file.garden/ZWPz_l4ycxnRju-4/pastry%20yellowtie/IMPACTED.ttf');
  font-family:'impacted';
}

@font-face {
  src:url('https://file.garden/ZWPz_l4ycxnRju-4/pastry%20yellowtie/ComicRelief-Regular.ttf');
  font-family:'comic';
}

/* FONTS END */


/* NO VER BOTONES */

.publish-timestamp, .edit-timestamp, .views-count, .site-header, .site-footer {
  display:none !important;
}

.button, .button:hover {
  background:none;
  color:black;
}

.button.edit::before {
  content:"EDIT";
  font-size:14px;
  color:black;
}

.button.edit {
  font-size:0;
}

/* NO VER BOTONES END */



/* FOUNDATION */

main {
 background-color: #white; 
}

body {
  background-color: transparent;
}

.text-container {
background-color: white;
      position: relative;
    display: block;
    margin-left:auto;
    margin-right:auto;
  width: 630px;
}

/* FOUNDATION END */


/* TOP */
#punto {
font-family:impacted;
color: #f8d900;
font-size: 100px;
opacity:0%;  
}

#clave {
font-family:impacted;
color: #f8d900;
font-size: 140px;
filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
position: absolute; right:270px; top:-10px;  
}

#star {
font-family:impacted;
color: #f8d900;
font-size: 120px;
filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
position: absolute; right:160px; top:-10px;
animation: tilt 1s infinite alternate;
}
/* TOP END */




/* MID */
#mainscrollbox {
width:290px; height:230px;
background-color: #c7b4c6;
padding:10px;
box-sizing:border-box;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
position:relative; left:150px; top:20px;
border: 3px solid #5853a4;
border-bottom: 2px dashed #7772cf;
}

#scroll {
overflow-y: auto;
width:auto; height:215px;
box-sizing:border-box;
scrollbar-width: thin;
  
font-size: 15px;
color: #322b40;
font-family: comic;
text-align: justify;
padding:6px;
}

#linktab {
width:290px;
padding: 2px;
text-align: center;
font-size: 13px;
color: #322b40;
font-family: comic;
position:relative; left:150px; top:30px; 
background-color: #c7b4c6;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border: 3px solid #5853a4;
border-top: 2px dashed #7772cf;
}

#linktab a {
color: #666375;
text-decoration: underline;
text-decoration-style: wavy;
}

#linktab a:hover {
color: #f8d900;
}

#fuckedupmusic {
width: 130px;
position:absolute; top:100px; right:20px;
box-shadow:0 0 5px 5px #f8d900;
}

#rob {
width:320px;
position:absolute; top:170px; left:10px;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
pointer-events: none;
}
/* MID END */

/* BOTTOM */
#disclaimer {
  width:150px;
  height:160px;
  
position:absolute; right:10px; top:272px;
  
  font-size:12px;
  font-family: comic;
  color: #959499;
}

#disclaimer a {
color: #f8d900;
transition: 0.5s ease;
text-decoration: underline;
text-decoration-style: wavy;
}

#disclaimer a:hover {
letter-spacing: 1px;
}

#saluditos {
width:160px;
position:absolute; right:0px; top:380px;
}
/* BOTTOM END */

/* ANIMS */
@keyframes tilt {
  from { transform: rotate(5deg); }
  to { transform: rotate(-5deg); }
}

.and {
color: white;
filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
}