/* 
HELLO! Welcome to my css, have a nice day.
*/

@import url("https://fontlibrary.org//face/ledfont-sharp");
@import url("https://fontlibrary.org//face/courier-prime-code");
@import url("https://fontlibrary.org//face/scramblefont");

@import url("https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Green%20Hell/loudanimals.css");

/* once again shout out to the oneandonly aydoplaydoh for making all these fonts into base64 and
also for being an amazing wizard */
@import url(https://aydoplaydoh.neocities.org/fonts.css);

/* import christmas theme */
/* @import url("https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Album%20Covers/Cover.Jpg"); */

@keyframes corner {
  0% {translate: -100% -100%; border-color: red;}
  50% {translate: 100% 100%; border-color: lime;}
  100% {translate: -100% -100%; border-color: red;}
}

/* variables and stuff like that brooo */

@keyframes clocksten {
  0% {
    background: repeating-conic-gradient(from 0deg at 50% 50%, #FF0000FF 0%, #FF0000FF 5%, #073AFF00 5%, #073AFF00 100%) 0px 0px / cover fixed,repeating-radial-gradient(20px 20px at 50% 50%, #054D00FF 0%, #054D00FF 34%, #006600FF 35%, #006600FF 50%, #006600FF 51%, #006600FF 85%, #054D00FF 85%, #054D00FF 100%) 0px 0px / cover fixed;
  }
  100% {
    background: repeating-conic-gradient(from 180deg at 50% 50%, #FF0000FF 0%, #FF0000FF 5%, #073AFF00 5%, #073AFF00 100%) 0px 0px / cover fixed,repeating-radial-gradient(20px 20px at 50% 50%, #054D00FF 0%, #054D00FF 34%, #006600FF 35%, #006600FF 50%, #006600FF 51%, #006600FF 85%, #054D00FF 85%, #054D00FF 100%) 0px 0px / cover fixed;
  }
}

@keyframes shake {
  30% {
    translate: -1% -1%;
  }
  35% {
    translate: 2% 2%;
  }
  40% {
    translate: -2% -2%;
  }
  45% {
    translate: 1% 1%;
  }
  50% {
    translate: -1% -1%;
  }
  60% {
    translate: 1% 1%;
  }
}

@keyframes messages {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

:root {
  counter-reset: tops;
  --spookybg: repeating-radial-gradient(20px 20px at 50% 50%, black 0%, black 34%, black 35%, #022000 50%, #022000 51%, #022000 85%, #022000 85%, #022000 100%) 0px 0px / cover fixed;
  --songcover: url(https://mayospace.pages.dev/nowmusic.png);
  --darkgreen: #00ae00;
  --glowgreen: lime;
  --notepad: linear-gradient(90deg, #F2FDFF00 0%, #FFFFFF00 10%, rgb(1, 46, 7) 12%, #FFFFFF00 14%, #F2FDFF00 100%),repeating-linear-gradient(0deg, rgb(43, 43, 43) 0%, rgb(43, 43, 43) 43%, rgb(1, 46, 7) 47%, rgb(43, 43, 43) 51%, rgb(43, 43, 43) 100%);
  --gradical: linear-gradient(0deg, #344A36FF 0%, #121A12 100%);
  --blackborder: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}


@media (max-width: 1000px) {
  .box.blog {width: 140% !important;}
  div.box.blog h1 {font-size: 30px !important;}
  #container {max-width: 100%}
  #blasted {  max-width: 100%;
  display: block !important;
  position: relative;
  height: 100% !important;
  }
  .tableLeft {
    width: 256px;
    & a {display: flex; max-height: 24px; flex-direction: row;}
    & img {left: 0px; margin: 0px !important; width: 24px !important; padding: 0px !important; height: 24px !important; border: 0px !important; border-radius: 0px !important; outline: 0px !important;}
    & a > div {font-size: 8px !important; width: 256px;}
  }
  #userWall tr { display: flex !important; flex-direction: column !important;} 
}


blockquote {
  border: 0px !important;
  font-weight: 500;
  text-shadow: 1px 1px #33420d !important;
  font-family: Arial !important;
  display: flex;
}



/* 
Main Page
*/


html {
    image-rendering: pixelated;
}

/*backgrounds yo*/

body {
  background:
  url(https://i.imgur.com/Mi8Aoon.png) 99% 40% / 256px 256px no-repeat,
  url(https://i.imgur.com/pU5qKOB.png) 50px 20% / 512px 384px no-repeat, 
  linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(28, 0, 66, 0.3) 100%) center / 100% fixed, 
  url(https://i.imgur.com/nY8h2CQ.png) 50% 100% / 100% 50vh no-repeat, 
  var(--spookybg);
  outline: 20px solid black;
  border: 20px solid black;
  transition: background-image;
}

#container {
  max-width: 80rem;
  margin-bottom: 600px;
}

#hSub {
  background: #000;
  font-family: 'CourierPrimeCodeRegular'; 
  & a:hover {
    text-transform: uppercase;
    font-size: red;
    position: relative;
    bottom: 2px;
  }
}

a:hover[href$="?news"] { background: url(https://i.imgur.com/W0kWwkt.gif) 0% 0% / 100% 100%;
  font-size: 15px; color: transparent !important; }

a:hover[href$="?music"] { background: url(https://i.imgur.com/SOdpghJ.gif) 0% 0% / 100% 100%;
  font-size: 15px; color: transparent !important; }

/* Old Bio Table */

#about table:nth-child(1 of table) {
  overflow: hidden;
  background: #1e1e1e; max-height: 40px; border: 4px inset #0f0f0f; align-content: center; margin: 5px;
  text-transform: none; color: black; font-size: 15px;
  display: flex; flex-direction: column; z-index: 340;
  &:hover {max-height: 256px; overflow-y: scroll; transition: max-height 0.5s;}
  & thead {
    background: #2b2b2b; padding: 4px 6px; color: white; box-sizing: border-box; display: flex;
  }
  & tr {
    display: flex; padding: 2px;
  }
  & tr td {
    background: #000;
  }
  & tr td:nth-child(1) {
    flex: 1;
    display: flex;
    color: lime; font-weight: bold; padding: 3px;
    place-items: center;
  }
  & tr td:nth-child(2) {
    padding: 3px; flex: 2;
  }
}

/* THE SHOPPING CART! (will use for like, extra topped friends probably */

#about table:nth-child(2 of table) {
  position: fixed; top: 30px; right: 0px;
  overflow: hidden;
  background: #000; max-width: 256px; max-height: 32px; border: 0px; margin-left: 20px; align-content: center;
  font-family: Arial; text-transform: none; color: black; font-size: 15px;
  display: flex; flex-direction: column;
  transition: max-height 0.5s;
  z-index: 340;
  &:hover {max-height: 256px; overflow-y: scroll; transition: max-height 0.5s;}
  & thead {
    background: transparent; padding: 4px 6px; color: white; box-sizing: border-box;
    justify-content: end;
    display: flex;
  }
  & tr {
    display: flex; padding: 2px;
  }
  & tr td:nth-child(1) {
    background: #BFDBFE;
    flex: 1;
    display: flex;
    color: #003399; font-weight: bold; padding: 3px;
    place-items: center;
  }
  & tr td:nth-child(2) {
    background: #DBEAFE; padding: 3px; flex: 2;
    & img {width: 50%;}
  }
  & .player.box {
    position: relative; background: yellow; border-radius: 5px;
    & .songName {
      font-size: 0px;
      &:before { content: "KILL THE POOR!!!"; font-size: 15px;}
    }
  }
}

button, input {
  background: url(https://i.imgur.com/44mdTyi.png) 50% / 100% 100% no-repeat;
  height: 64px; width: 64px; border: 0px; padding: 5px; margin: 4px;
  font-family: courier; font-weight: 800;
  transition: background-size 0.2s;
  &:hover {
    transition: background-size 0.2s; filter: brightness(1.3); background-size: 90% 90% !important;
  }
}

.tableRight input {background: url(https://i.imgur.com/VDGk2Bi.png) 50% / 100% 100% no-repeat; color: white;}

#header {
  background: black;
  border-bottom: 2px solid black;
  font-family: 'CourierPrimeCodeRegular'; 
  
  & a:hover {text-transform: uppercase; font-size: red; position: relative; bottom: 2px;}
}



/* Top Left */




.topLeft {
  margin: 10px;
  border: 10px outset #1e1e1e;
  background-size: 50% 10%; background-position: 0px 0px;
  background-image: linear-gradient(0deg, #304032 14%, #0c150d 14%, #0c150d 27%, #8a4d932e 27%, #0c150d 100%);
  width: 300px;
  position: relative;
}

.topLeft::after {
  background: url(https://i.imgur.com/zEEjGZy.png) 0% 100% / 56px 83px , url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Green%20Hell/kornguy.gif) 100% 100% / 56px 83px;
  background-repeat: no-repeat; position: absolute; pointer-events: none;
  content: ""; bottom: 0; right: 0; height: 50%; width: 100%;
}

.topLeft tr {
   display: flex; flex-direction: column; border: 8px solid #0f0f0f;
   max-width: 400px; background: #0c150d; padding: 10px; align-items: center;
  }

#name {
  font-family: ranchers;
  font-size: 40px;
  margin-bottom: 10px;
  margin-top: 10px;
  color: transparent;
  text-transform: uppercase;
  background: url(https://mayospace.pages.dev/heyguys.png) 0% / 100% 100%;
  height: 110px;
  width: 290px;
}

#name::after {
  content: "HI!";
  color: transparent;
  text-shadow: none;
  background: url(https://i.imgur.com/QK2IwJJ.gif) 0px 0px / 100% 100%;
  width: 48px;
  height: 48px;
  position: absolute;
  margin: 5px;
}

#imgPreview::after {
  overflow: hidden; pointer-events: none; position: absolute; width: 100%; height: 100%; 
  content: "wacker"; background: url(https://i.imgur.com/L0PEhmM.png) 100% 100% / 25% no-repeat;
}

#imgPreview {width: 100%; background: #000000b5;backdrop-filter: invert(1);}

#imgPreview img {
  display: inline;
  position: fixed;
  border: 10px solid;
  animation: corner 20s infinite linear;
  max-height: 100%;
  max-width: 100%;
}


.topLeft .shortRight {
  background: black; padding: 10px; border: 4px inset #0f0f0f;
  font-family: 'CourierPrimeCodeRegular'; color: green; font-weight: 1000;
  text-align: center;
  position: relative;
}

/* ONLINE NOW */

img[src$="/res/online.gif"] {width: 196px; content: url(https://i.imgur.com/0WK2pOs.gif);}

/* 
TIME TO CHOOSE
*/



td.shortRight div:nth-last-child(1) {
  color: white;
  font-size: 0px !important;
  background: black;
  padding: 10px;
}

td.shortRight div:nth-last-child(1):before {
  content: "Today is:";
  font-size: 15px;
}

@keyframes countdown {
  0%   {content: "00/00/0000";}
  10%  {content: "10/23/2077";}
  20%  {content: "04/13/2009";}
  30%  {content: "02/19/2023";}
  40%  {content: "05/03/3005"; color: yellow;}
  60%  {content: "14/09/2023"; var(--glowgreen);}
  70%  {content: "99/99/9999";}
  80%  {content: "03/03/1979";}
  90%  {content: "09/08/2723";}
  100% {content: "00/00/0000";}
}

#lastLogin {
  color: var(--glowgreen);
  font-size: 0px;
}

#lastLogin::after {
  content: "11/09/04";
  font-size: 15px;
  animation: countdown 1s infinite;
  font-family: 'ledfontsharpRegular';
  font-weight: normal;
  text-transform: uppercase;
}



/* 
BOXINFO AND MUSIC PLAYER YAHYAH
*/




.boxInfo {
  border: 0px;
  display: flex;
  flex-direction: column;
  & a {
    text-decoration: none;
    background: #304032;
    border: 2px solid #1e1e1e;
    margin-bottom: 20px;
    box-shadow: 0px 4px #00000082;
  }
}

.boxHead {
  background: none;
  color: white;
  text-shadow: #1e1e1e 0px 3px 0px;
}
.boxButton {
  color: white;
  overflow: hidden;
  overflow-wrap: normal;
}

.url.box {
  border: 5px #0f0f0f inset; margin: 10px; padding: 2px;
  background: black; background-size: 50%; color: white;
  font-size: 0px; font-family: 'ledfontsharpRegular'; font-weight: normal; font-style: normal; text-align: center; text-transform: uppercase;
  
  
  & a {
  font-size: 20px;
  color: white !important;
  font-weight: bold;
  text-shadow: var(--blackborder);
    
    &:hover {
      color: #c700ff !important;
    }
  }
  position: relative;
}

.url.box:after {
    margin: 10px; border: 0px gray inset;
    content: "THE CAPTION IS YOU!!!!!!";
    margin-left: auto; margin-right: auto;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 18px;
    background: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Green%20Hell/coffe%20and%20tv.gif);
    height: 200px; width: 200px;
    background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important;
    text-shadow: var(--blackborder); text-align: center;
}

@keyframes music {
  0%   {background-size: 90%;}
  25%   {background-size: 94%;}
  50%  {background-size: 93%;}
  75%   {background-size: 91%;}
  100% {background-size: 90%;}
}

.player.box {
  background: #0c150d;
  border: none;
}

.topLeft .player.box::after {
  content: "";
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
  background: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Green%20Hell/newaswesomespeaker.png);
  height: 256px;
  width: 256px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;
}

.topLeft .player.box:has(audio._playing):after {
  animation: music 0.18s infinite;
}

.topLeft .player.box:has(audio._paused._ended):after {
  background-image: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Green%20Hell/speakerBUSTED.png);
}

.topLeft .songName {
  position: relative; display: flex; flex-direction: column;
  background: radial-gradient(75% 75% at 50% 50%, #000 0%, #000000A6 100%), url(https://tapmusic.net/collage.php?user=skewlaton&type=overall&size=10x10) 0% 0% / 100%, black; padding: 4px; border: 5px inset #0f0f0f;
  font-size: 1.3rem; color: lime; font-family: 'ScrambleFontRegular'; font-weight: normal; font-style: normal; text-shadow: var(--blackborder);
  place-items: center; animation: inmyeyes 100s infinite linear;

  & b {
    font-size: 0px;
  }
  text-align: center;
}

.topLeft .songName img {
    content: var(--songcover);
    position: relative; background: gray;
    min-width: 128px; min-height: 128px;
    border: 8px inset #282828; padding: 5px;
}

.topLeft .songName::after, div.url.box::before, td.shortRight::before, #about::before, .svmsg p::after {
  backdrop-filter: brightness(1.5) saturate(0.8);
  content: ""; background: url(https://i.imgur.com/THrh02h.gif) 0% / 25%;
  height: 100%; width: 100%;
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  opacity: 0.3;
  pointer-events: none !important;
  z-index: 200;
}

/* TOP RIGHT */

.topRight {
  float: none;
  width: 100%;
}

.extended.box {
  border: 0;
  background: url(https://i.imgur.com/9dWEMMV.png) 50% 50% / contain no-repeat;
  image-rendering: pixelated;
  max-height: 96px;
  font-family: 'Courier New'; 
  padding-bottom: 20px;
  margin-bottom: 0px;
  transition: background-color 1s linear; 
}

.extended.box:hover {
  transition: background-color 1s linear; 
  background: radial-gradient(50% 50% at 50% 80%, #FFFFFF8F 0%, #00000000 100%) 0px 0px / 100% 100%, url(https://i.imgur.com/9dWEMMV.png) 50% 50% / contain no-repeat;
}

.extended a, .extended h3 {
  font-size: 8vh;
  color: transparent !important;
}

.box.blurbs {
  border: 10px outset #171717;
  background-size: 50% 10%;
  background-position: 0px 0px;
  padding: 20px;
  background: #0c150db5;
  font-family: 'Courier New';
  color: white;
}

div.box.blurbs div.blogs {
  color: white;
  max-height: 20vh;
  overflow-y: scroll;
  background: var(--notepad);
  background-size: 100% 15%;
  background-position: 0px 0px,0px 0px;
  padding: 4px;
  text-align: center;
}

.box.blurbs div.blogs div:not(:first-child) {
  color: var(--darkgreen);
  display: flex;
  flex-wrap: wrap;
  max-width: 50vh;
  align-items: center;
  font-size: 15px;
  padding-left: 10px;
  
  
  & a {
    color: var(--glowgreen);
    padding: 1px;
    text-decoration: underline;
  }
  
  &:not(:first-child):before {
  counter-increment: tops;
  content: counter(tops) ".- ";
  }
}

#about {
  border: 10px inset #0f0f0f;
  padding: 15px;
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: var(--gradical);
  color: var(--glowgreen);
  & a {
    color: green;
  }
  position: relative;
}

#about::before {opacity: 0.1;}

#about table, p, h6 {
  max-width: 600px;
}

h6#blasted {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: end;
  position: relative;
  height: 0px;
  margin: 0px;
}

/* MARKSDOWN SHIT */

.rightHead {
  background: 0;
  font-size: 20px;
  color: lightgray;
  text-shadow: darkgray 2px 2px 10px;
  text-align: center;
}

h4 {
  color: white;
  font-size: 22px;
  text-align: center;
  text-shadow: white 0px 0px 10px;
}

/* extra bros */

#who { display: grid; }

#who ul {
  position: absolute;
  display: flex;
  translate: 0% 250px;
  max-width: 500px;
  justify-self: center;
  padding: 0;
  padding-inline: 4px;
}

#who li {
  color: white;
  display: flex;
  flex-direction: column;
}

li h1 {
  text-decoration: none;
  font-size: 12px;
  color: white;
  position: relative;
  padding-right: 20px;
  padding-left: 20px;
  font-family: Arial;
}

#who li::marker { font-size: 0px; }

#who ul li {
  width: 24%;
}

/* LIST OF BROS */

.fwiendCount {
  color: yellow;
  font-size: 50px;
  text-shadow: 0px 2px red, 0px 4px white;
  &::before {content: "Skullaton has "; color: black; text-shadow: 2px 2px white; font-size: 20px;}
  &::after {content: " bros."; color: black; text-shadow: 2px 2px white; font-size: 20px;}
}

.fwiendCounter {
  font-size: 0px;
}

.box.fwiends {
  flex-direction: column;
  display: flex;
  align-items: center;
}

#top {
  max-width: 500px;
  position: relative;
  & a b {
  text-decoration: none;
  font-size: 12px;
  color: white;
  position: relative;
  padding-right: 20px;
  padding-left: 20px;
  }
  a b::before {
  color: black;
  }
  overflow: visible;
  margin-top: 200px;
}

.fwiendFace img {
  border-radius: 100%;
  border: 4px solid black;
  background: red;
  padding: 5px;
  width: 120px;
  height: 120px;
  outline: 2px white solid;
  margin-top: 15px;
  box-shadow: 0px 6px yellow , 0px 12px white;
  margin-bottom: 15px;
  position: relative;
  bottom: 0px;
  object-fit: cover;
  right: 0px;
  transition: right 0.1s ease-in-out , bottom 0.1s ease-in-out;
  
  &:hover {
   bottom: 15px;
   right: 25px;
   transition: right 0.1s ease-in-out , bottom 0.1s ease-in-out;
  }
}

@keyframes inmyeyes {
  0% {background-position: 0% 0%;}
  100% {background-position: 1746px 1740px;}
}

#viewFriends {
  background: url(https://i.imgur.com/b4JUQef.png);
  padding: 20px;
  image-rendering: auto;
  color: white;
  border: 4px solid black;
  border-radius: 20px;
  animation: inmyeyes 10s infinite linear;
  
  & a {
  color: #fff;
  background: #548d40;
  padding: 5px;
  border-radius: 100%;
  }
  
  & b {
  background: #00000082;
  border-radius: 10px;
  padding: 4px;
  }
}

/* COMMENTS */

.comments { width: calc(90% - 50px); margin-left: auto; margin-right: auto; }

.comments .boxHead:first-child {
  border: 10px #1e1e1e outset;
  background: black;
  color: blue;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 0px;
  &:after {
    content: "LEAVE a. comment. or. two. try two. hell yeah. 2.";
    font-size: 16px;
    font-weight: bold;
    font-family: 'Courier New';
  }
  border-radius: 50px 50px 5px 5px;
  padding-top: 15px;
}

#commentInput {
  max-width: 33rem;
  border: 10px inset #1e1e1e;
  border-radius: 5px 5px 50px 50px;
  text-shadow: 0px 0px 2px blue;
  padding: 5px;
  padding-right: 200px;
  color: blue;
  font-family: 'Courier New';
  font-size: 14px;
  background: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Green%20Hell/yesmancomment.png) 100% -20px / 200px 200px no-repeat , black;
}

#userWall {
  margin-bottom: 20vh
    /* i forgot what this is */
  --commentgradPLACEHOLDER: linear-gradient(90deg, #d3d3d3 17%, #D3D3D385 100%);
  --commentgrad: linear-gradient(90deg, transparent 17%, transparent 100%);
}

.tableLeft {
  background: transparent;
  
  & a > div {
  font-size: 12px;
  color: var(--glowgreen);
  background: black;
  border: 4px solid lightgray;
  padding: 2px;
  border-top: 4px solid white;
  border-bottom: 4px solid #737373;
  font-family: 'ledfontsharpRegular';
  font-weight: normal;
  text-transform: uppercase;
  }
}

.tableLeft img {
  -webkit-border-radius: 100%;
  margin-top: 10px; border: 4px solid #f00; border-radius: 100%; padding: 5px;
  outline: 4px solid white; background: white;
  width: 128px; height: 128px;
  object-fit: cover; position: relative;
  transition: bottom 1s; bottom: 0px; right: 5px;
    &:hover {transition: bottom 0.2s; bottom: 5px;}
}

.tableRight {
  background: url(https://i.imgur.com/YcWuXa7.png) 100% 100% / 40vh 100% no-repeat, lightgray;
  padding: 10px;
  vertical-align: top;
  overflow-wrap: anywhere;
  border: 10px solid #0f0f0f;
  transition: background 2s;
}

/* comment drawings */


tr:nth-child(2n) td.tableRight {background: url(https://i.imgur.com/uhwKsFX.png) 100% 100% / 40vh 100% no-repeat, lightgray;}

tr:nth-child(3n) td.tableRight {background: url(https://i.imgur.com/PnG2ovV.png) 100% 100% / 40vh 100% no-repeat, lightgray;}

tr:nth-child(4n) td.tableRight {background: url(https://i.imgur.com/bPkAb6O.png) 100% 100% / 40vh 100% no-repeat, lightgray;}

/* SPECIAL PEOPLE */

a[href$="?id=970"] img {content: url(https://i.imgur.com/rrtxJye.png);}

a[href$="?id=2"] div {color: #ff00e3;}

a[href$="?id=6"] img:hover {content: url(https://i.imgur.com/P5MxgXu.gif);}

a[href$="?id=15"] img:hover {content: url(https://i.imgur.com/61YC3Ke.png);}

a[href$="?id=8"] img:hover {content: url(https://i.imgur.com/bDyV0Ml.png);}

a[href$="?id=21"]:hover:before {position: absolute; content: ""; background: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Green%20Hell/battletech.gif) 0% / 100% 100%; width: 130px; height: 14px; translate: -1px -17px;;}

a[href$="?id=175"] img:hover {content: url(https://i.imgur.com/OVsqTR9.jpg);}

a[href$="?id=790"] img:hover {content: url(https://i.imgur.com/xFedSIz.png);}

a[href$="?id=800"] img:hover {content: url(https://i.imgur.com/MOY1zWo.png);}

a[href$="?id=912"] img {content: url(https://i.imgur.com/Unvtzyj.png);}

a[href$="?id=97"] img {background: red; border: 25px solid black; width: 50%; height: 50%;}

/* co lor */

a[href$="?id=6"] div {color: yellow;}
a[href$="?id=970"] div {font-size: 0px;}
a[href$="?id=970"] div:after {content: "David Seville"; font-size: 12px;}
a[href$="?id=912"] div {color: yellow; font-size: 0px;text-transform: none;}
a[href$="?id=912"] div:after {content: "audioplayer"; font-size: 12px;}

a[href$="?id=21"] div {color: lime; font-size: 0px !important; text-transform: none;}
a[href$="?id=21"] div:after {content: "RAGMaYoЯ"; font-size: 12px;}

a[href$="?id=794"] div {color: purple;}

a[href$="?id=190"] div {color: red;}

a[href$="?id=39"] div {font-family: comic sans ms; font-size: 17px; text-transform: none; color: cyan;}

a[href$="?id=175"] div {color: orange;}

a[href$="?id=97"] div {color: orange; font-size: 0px; &:after {content: "hideous cogima"; font-size: 13px;}}

/* still way too tired :) */

/* blogs */

.blogTitle {
  background: black;
  border: solid #000;
  box-shadow: 0 0 0 100vmax #000;
  clip-path: inset(0px -100vmax);
  padding-top: 20px;
  margin-top: -20px;
  text-align: center;
  & button {
    background: darkgray;
    border: 10px outset darkgray;
    font-family: 'Courier New', Arial;
    width: 200px;
  }
}

.topRight.blogPost {
  width: 100%;
}

.topRight.blogPost .box.comments {
  width: calc(100% - 70px);
}

.topRight.blogPost #commentInput {
  max-width: calc(100% - 250px);
  display: flex;
}

div .blogCorpus {
  background: black;
  padding-top: 10px;
  padding-bottom: 10px;
}

.blogCorpus:nth-child(3):after {
  content: "LIKE"; float: right; padding: 10px;
}

.blogCorpus input {
  background: none; color: lime; font-family: ledfont-sharp; text-transform: UPPERCASE;
}

.topLeft.blogCard div ul{
  display: flex; max-height: 250px; background: black;
  overflow-x: hidden; overflow-y: scroll; flex-direction: column;
  border: 10px inset lightgray; padding: 10px; 
  text-align: center; & a {color: lime;}
}

.blogBody .topLeft {
  color: lime !important; ext-align: center;
  background: black; display: flex; flex-direction: column; place-items: center;
}

.box.blog {
  background: #1e1e1e;
  color: lime;
  font-family: Courier New;
  & a {color: yellow;}
  & h1 {
    font-family: Courier New; color: BLACK; font-size: 40px;
    background: #B6B6B6; padding-left: 15px; margin-bottom: -5px; margin-top: -5px;
  }
  font-size: 17px;
}

/* 8 ball */


#fortune {
  font-family: courier;
  height: 64px;
  width: 64px;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: url(https://i.imgur.com/4DrZltp.png) 50% / 100%;
  color: white !important;
  place-content: center;
  padding: 70px;
  animation: shake 2s linear;
  margin-inline: auto;
}
#fortune:not(b) {
  font-size: 0px;
}

#fortune b {
  font-size: 10px;
}

/* re-tom */

#userWall tbody::after {
    content: " ";
    position: absolute;
    background: url(https://i.imgur.com/8YN9RxI.png);
    background-repeat: no-repeat;
    width: 52%;
    height: 20vh;
    background-size: contain;
}

/* recycled the code from the freeapple page */

@keyframes conveyor {
    0% { transform: translate3d(100%, 0, 0);}
    100% { transform: translate3d(-100%, 0, 0);}
}

/* top server msesage o meg thanks for the update opuwawder your rock, recycled code from the freeapple page */
#ospSvmsg {
  border: 0px;
  padding: 0px;
  background: black; position: fixed;
  margin-top: 0px; top: 5px; left: 200px; z-index: 500;
  max-width: 10%; max-height: 24px; font-size: 12px;
  place-items: center; display: flex; place-content: center; overflow: hidden;
}
#ospSvmsg p {animation: conveyor 10s linear infinite; white-space: nowrap;}

#ospSvmsg a { color: red; text-decoration: none; }
#ospSvmsg a::after {content: 
  ": They added, groups and shit.";}

/* 
footer

this might be the worst css i have ever written ! 

SELF REMINDER: rewrite this shit bro
*/

#footer div {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  margin-right: auto;
  color: white;
  padding-top: 25px;
  position: static;
  bottom: 25px;
  text-align: left;
  background: gray;
  padding: 10px;
  padding-top: 20px;
  overflow: visible;
  border: 4px inset darkgray;
  margin-bottom: 10px;
  
  & a {
    color: yellow;
    text-decoration: underline 2px;
    padding: 2px;
  }
  & img {
    max-width: 88px;
    max-height: 31px;
    padding: 4px;
    background: url(https://i.imgur.com/VAnZkTh.png) 0px 0px / 100% 100%;
  }
}

#footer88x31s {
    border: 0px !important;
        &:after {
        content: "the foooter, broo.";
        white-space: nowrap;
        bottom: 10px;
        font-size: 24px;
        background: var(--gradical);
        border: 4px darkgray inset;
        padding: 5px;
        position: relative;
  }
}

/* COMMENT WALLPAPERS!!!!!!
maybe not that bad of an idea? aydo thought it was cool. oh well.
  Feel free to use This Stuff :) ) ) ) ) */

/* upwaddler */
tr:has(a[href$="?id=2"]) td.tableRight {
  color: white;
  text-shadow: 1px 2px black;
  font-family: Arial;
  background: url(https://f46n.org/res/sega/master.gif) 50% / cover;
  transform: rotateZ(-2deg);
  z-index: 3
}

/* aydo */
tr:has(a[href$="?id=6"]) td.tableRight {
  color: yellow;
  text-shadow: 1px 2px black; font-family: Arial;
  background: var(--commentgrad), url(https://i.imgur.com/IiXQtjQ.png) 50% 0% / cover;
}

/* lolman */
tr:has(a[href$="?id=8"]) td.tableRight {
  color: white;
  background: url(https://trol.ovh/res/ms/vhs.gif) 50% / 50%;
  border: 2px white solid;
}


/* nepeno */
tr:has(a[href$="?id=11"]) td.tableRight {
  color: white;
  text-shadow: var(--blackborder);
  background: var(--commentgrad), url(https://i.imgur.com/iIUb25q.png) 50% / cover;
}

/* HUNK. HUNK HOGAN. */
tr:has(a[href$="?id=12"]) td.tableRight {
  color: black;
  background: var(--commentgradPLACEHOLDER), url(https://i.gifer.com/SjSe.gif) 0% 50% / cover;
}

/* me */
tr:has(a[href$="?id=21"]) td.tableRight {
  color: green;
  background: var(--commentgrad), url(https://i.imgur.com/nibmIU4.png) 30% 30% / cover;
  text-shadow: black 2px 2px 4px;
}

/* krirz */
tr:has(a[href$="?id=32"]) td.tableRight {
  color: black;
  background: url(https://i.imgur.com/XsE18Fn.png) 30% 30% / cover;
  text-shadow: black 2px 2px 4px;
  & div {
    background: rgba(72, 118, 50, 0.7);
    box-shadow: 0 0 0 0.8vmax rgba(72, 118, 50, 0.7);
    clip-path: inset(0px -100vmax);
  }
  font-family: "Terminus (TTF)", "Terminus", "MS PGothic", "MS Gothic", monospace;
}

/* ARK63 */
tr:has(a[href$="?id=39"]) td.tableRight {
  color: black;
  background: url(https://i.ibb.co/zGvQZM9/5780-A84-E-584-D-4-E06-8-D93-0-D08-C547-D41-F.gif) 0% 0% / 100% 100%;
  & div {
    background: cyan;
    color: darkblue;
    font-family: comic sans ms;
  }
}

/* Bill. Bill Clint. on.. */
tr:has(a[href$="?id=71"]) td.tableRight {
  background: var(--commentgradPLACEHOLDER), url(https://i.imgur.com/Kceqbfc.gif) 0% 50% / cover;
}

/* White Guy */
tr:has(a[href$="?id=97"]) td.tableRight {
  color: white; background: url(https://i.imgur.com/vb2dAqH.gif) 0% 50% / cover;
  text-shadow: var(--blackborder);
}

/* microsawft */
tr:has(a[href$="?id=113"]) td.tableRight {
  color: black;
  background: white;
  font-family: 'Segoe UI Light','Calibri';
}

/* lm. elnom bobñl a */
tr:has(a[href$="?id=115"]) td.tableRight {
  color: black;
  background: var(--commentgradPLACEHOLDER), url(https://i.pinimg.com/564x/3a/86/5a/3a865a0cf2dd3a3b13d868b1c4035aee.jpg) 50% / cover;
}

/* taki */
tr:has(a[href$="?id=126"]) td.tableRight {
  color: black;
  background: white;
  background: var(--commentgradPLACEHOLDER), url(https://taki.moe/mspace/img/feed/) 0% 50% / cover;
}

/* googleplex */
tr:has(a[href$="?id=175"]) td.tableRight {
  color: orange;
  font-family: monospace;
  text-shadow: 1px 2px black;
  background: var(--commentgrad), url(https://i.imgur.com/YPtK5KQ.png) 50% / 25%;
}

/* reoina */
tr:has(a[href$="?id=196"]) td.tableRight {
  color: black; font-family: century gothic;
  background: url(https://64.media.tumblr.com/be62545f6915b239f35799377105512d/affab11b77f6db3a-70/s2048x3072/3c9dd4d46a5f94a042b6753ef6338a91ff02f80a.jpg) 0% / 100%;
  & div {
    padding: 6px;
    width: calc(75% - 50px);
    margin-inline: auto;
    background: url(https://img.freepik.com/free-photo/white-paper-texture_1194-2301.jpg) 50% 50%;
    border-radius: 10px;
  }
}

/* e,laine  */
tr:has(a[href$="?id=198"]) td.tableRight {
  color: white; font-family: century gothic;
  background: url(https://i.pinimg.com/originals/60/35/1a/60351a31e6365049a1c4937c08893d3e.gif) 0% / 100%;
  & div {
    padding: 6px;
    width: calc(60% - 50px);
    margin-inline: auto;
    background: black;
    border: ridge #000000 8px;
  }
  & div:nth-child(1) {border-bottom: 0px;}
  & div:nth-child(2) {border-top: 0px;}
}

/* wret. wret.go wthe guy with the fridge letters */
tr:has(a[href$="?id=231"]) td.tableRight {
  color: black;
  background: var(--commentgradPLACEHOLDER), url(https://myspace.f46n.org/u/231/avatar.png?v=1684972825) 0% 50% / cover;
}

/* jhytgahgbh */
tr:has(a[href$="?id=267"]) td.tableRight {
  color: white;
  padding: 0px;
  & div {
    backdrop-filter: invert(1);
    padding-top: 5px; padding-left: 5px;
  }
  & div:nth-child(2) {
    min-height: calc(18vh);
  }
}

/* microsawft */
tr:has(a[href$="?id=282"]) td.tableRight {
  color: black;
  background: var(--commentgradPLACEHOLDER), url(https://512pixels.net/downloads/os9-5k/Mac-OS-Background.jpg) 0% 30% / cover;
  font-family: 'Segoe UI Light','Calibri';
}

/* Slam. Slam. */
tr:has(a[href$="?id=375"]) td.tableRight {
  color: lime;
  background: linear-gradient(0deg, #7D9F7BFF 0%, #2A2A2AFF 100%); ;
}

/* That. That guy. Blockly. Yeah. blcks,. irv,l  */
tr:has(a[href$="?id=529"]) td.tableRight {
  background: var(--commentgrad), url(https://blockly806.neocities.org/img/back.png) 50% 50% / cover;
  color: white;
}

/* biflkfurin  */
tr:has(a[href$="?id=560"]) td.tableRight {
  padding: 5px;
  background: url(https://imgpile.com/images/Gg3jSS.gif) 50% 50% / 512px;
  color: white;
  & div {
    margin: 10px;
    backdrop-filter: blur(3px);
  }
}

/* MY FRIEND CHAT GPT  */
tr:has(a[href$="?id=566"]) td.tableRight div {
  padding: 5px;
  background: #2f2f39e0;
  color: white;
}

/* Counter Strike Source */
tr:has(a[href$="?id=593"]) td.tableRight {
  color: lime;
  background: black;
  font-family: 'CourierPrimeCodeRegular';
}

/* Could He?. No he could not. */
tr:has(a[href$="?id=616"]) td.tableRight {
  color: black;
  background: silver;
  border: 2px white solid;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  padding: 10px;
  & div:nth-child(1) {
    background: linear-gradient(135deg,#000178 0,#1180D1 100%);
    color: white;
    padding: 5px;
  }
}

/* Ce. Ra. Ti. */
tr:has(a[href$="?id=618"]) td.tableRight {
  color: black;
  background: var(--commentgradPLACEHOLDER), repeating-conic-gradient(black 10%, white 20%) 0% 50% / cover;
}

/* Satan */
tr:has(a[href$="?id=666"]) td.tableRight {
  border: 10px #505050 outset;
  color: #00ff00;
  text-shadow: 0 0 3px #00ff00;
  background: linear-gradient(to right, #505050, #707070, #505050);
  filter: drop-shadow(-8px 0px 3px #000000d4);
}

/* WIBOWS */
tr:has(a[href$="?id=714"]) td.tableRight {
  color: black;
  background: var(--commentgradPLACEHOLDER), url(https://media.tenor.com/vp-3xHMSevwAAAAC/microsoft-windows98.gif) 0% 100% / cover;
}

/* door */
tr:has(a[href$="?id=790"]) td.tableRight {
  color: black;
  background: var(--commentgradPLACEHOLDER), url(https://myspace.f46n.org/u/790/avatar.jpg?v=1694998768) 0% 40% / cover no-repeat;
}

/* gamers agaisnt giuaga .-afg-. g0'2 4 */
tr:has(a[href$="?id=800"]) td.tableRight {
  color: white;
  background: url(https://i.imgur.com/ryJgvM7.png) 50% / cover;
  & div {
    background: #830000;
    padding: 4px;
    border: 8px darkred outset;
    margin: 2px;
    color: black;
  }
}

/* cat */
tr:has(a[href$="?id=802"]) td.tableRight {
  color: green; text-shadow: 0px 2px 0px black, 0px -1px 0px black;
  background: url(https://i.ytimg.com/vi/441WknFOshc/maxresdefault.jpg) 0% 40% / cover no-repeat;
}

/* teambo */
tr:has(a[href$="?id=822"]) td.tableRight {
  font-family: "Fantasy", Papyrus;
  color: brown;
  border: 9px dashed #B1826D;
  background: url(https://img.wattpad.com/dd07ed6a10b4229c03b14237c580203d99ff7aa2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f67376742305644415f43733368513d3d2d3239383438373736342e313561363838633266396265376334343339373930353637363137302e676966) 50% 50% / cover;
  & div {
    background: #F0F8FF;
  }
}

/* munky */
tr:has(a[href$="?id=823"]) td.tableRight {
  background: url(https://i.ibb.co/bsZ3Q56/help-me.gif) 50%;
  color: black;
  text-shadow: 2px 1px #ff0066;
  border-image: url(https://i.ibb.co/Xj6JB2s/gogo.gif) stretch 6;
  border-inline: none;
    & div {
    padding: 4px; background: rgba(0, 0, 0, 0.3);
  }
}

/* hehe. tree */
tr:has(a[href$="?id=826"]) td.tableRight {
  font-family: Times New Roman; color: #e6ffe6;
  background: url(https://i.pinimg.com/originals/d2/05/b1/d205b1880d7db71d05146f91904e3981.gif) 50% / cover;
  & div {
    padding: 4px;
    background: #203c51ba;
  }
}

/* kink of rats */
tr:has(a[href$="?id=848"]) td.tableRight {
  padding: 0px;
  font-family: Times New Roman; color: #e6ffe6;
  background: url(https://file.garden/Y5EOCz_qkQx7G0Vm/lrod_english.jpg) 50% 7% / cover;
  & div {
    margin-inline: 30px; padding: 4px; transition: all 1s;
    backdrop-filter: blur(10px) brightness(60%); background: #ffffff30; border: 2px solid #5d06ff50; border-radius: 3px;
    &:hover {
      background: transparent; backdrop-filter: none;
      transition: all 1s;
    }
  }
}

/* SEX! */
tr:has(a[href$="?id=852"]) td.tableRight {
  font-family: SimSun,Arial,sans-serif !important; color: black;
  background: white;
  & div:nth-child(1) {
    background: linear-gradient(#fff,#bbb 50%,#999 50%,#999); box-shadow: inset 0 0 0 1px #ffffff40,0 0 0 1px #00000070,0 1px 2px #000000b8;
    border-radius: 40px; margin: 10px; padding: 8px;
  }
}

/* he typed something that wasnt "aperape" in my comments */
tr:has(a[href$="?id=871"]) td.tableRight {
  color: red;
  & div {
    background: #000000c7;
    padding: 2px;
    border: 4px #820000 solid;
    backdrop-filter: invert(1);
  }
  & div:nth-child(1) {border-bottom: 0px;} & div:nth-child(2) {border-top: 0px;}
}

/* CIRNO. best user. */
tr:has(a[href$="?id=888"]) td.tableRight {
  color: cyan; background: url(https://myspace.f46n.org/u/888/avatar.gif?v=1705703714) 00% / 50% 100%;
  & div {
    background: url(https://myspace.f46n.org/res/discord/attachments/804018120372649994/1186326589433184326/speed.gif?ex=6592d7bb&is=658062bb&hm=2dc3ea943a6d9461b7418c97925a246d824f60892ead4dcd302f6640e2a7b1b4&=&width=266&height=355) 100% 0%;
    padding: 2px;
    border: 4px cyan solid;
    backdrop-filter: invert(1);
  }
  & div:nth-child(1) {border-bottom: 0px;} & div:nth-child(2) {border-top: 0px;}
}

/* aydo 2 */
tr:has(a[href$="?id=912"]) td.tableRight {
  color: yellow;
  text-shadow: 1px 2px black; font-family: Arial;
  background: url(https://i.imgur.com/HHbMC0Q.png) 50% 100% / cover;
  position: relative;
  &:after {
    content: "yujmmyhorse"; font-size: 0px; pointer-events: none;
    bottom: 0; left: 0; min-height: 64px; min-width: 64px; position: absolute;
    background: url(https://i.imgur.com/MYgwOnD.png) 0% 0% / 100%;
  }
}

/* evil penis */
tr:has(a[href$="?id=917"]) td.tableRight {
  background: url(https://file.garden/ZayvfAInEXlJII0o/evilpattern.png) 75% 100% / 50%;
  position: relative;
  &:after {
    content: "hi"; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url(https://file.garden/ZcssXF00ZC8vpiDA/SuperSinner.jpg) 0% / 100%;
    mix-blend-mode: multiply; pointer-events: none;
  }
  & div {
    color: white;
  }
}

/* ALBIN */
tr:has(a[href$="?id=970"]) td.tableRight div:nth-child(2) {
  font-size: 0px;
}

tr:has(a[href$="?id=970"]) td.tableRight div:nth-child(2)::before {
  content: "AAAALVINNN!!!!"; font-size: 15px;
}

/* faith by george miachels and also the lim bizkit cover */

a[href$="?id=972"] img {
  background: black;
  outline-color: black;
  border-color: #4b0191;
}

tr:has(a[href$="?id=972"]) td.tableRight {
  background: black;
  color: gray;
  font-family: 'faith';
}

/* babbu  */
tr:has(a[href$="?id=986"]) td.tableRight {
  padding: 0px;
  & div {
    backdrop-filter: contrast(2);
    padding-top: 5px; padding-left: 5px;
  }
  & div:nth-child(2) {
    min-height: calc(18vh);
  }
}


/* idk my best friend or something */

tr:has(a[href$="?id=1052"]) td.tableRight {
  text-shadow: 2px 2px 2px #d3d3d3, -2px -2px 2px #d3d3d3;
  background: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Green%20Hell/persona5city.png) 0% 0% / 100%
}


/* worms are my best friend */

tr:has(a[href$="?id=1139"]) td.tableRight {
  border: 10px solid white; 
  background: #fc9;
  font-size: 9pt;
  font-family: verdana,arial,sans-serif,helvetica;
}

/* i like ants too */

tr:has(a[href$="?id=1083"]) td.tableRight {
  border: 2px solid gray; 
  background: white;
  font-family: "Nintendo DS BIOS", sans-serif; /* ill efficienftly import this font later */
  font-size: 16px;
}


/* 

unique blog css

*/



a[href$="?couchtheme"] {
  font-size: 0px;
  position: absolute;
}

body:has(a[href$="?couchtheme"]) {
  background: 
  url(https://i.imgur.com/hLxp7hm.gif) 0px 0px / 512px 512px repeat, var(--spookybg);
}

a[href$="?lahlahluvyou"] {
  font-size: 0px;
  position: absolute;
}

body:has(a[href$="?lahlahluvyou"]) {
  background: 
  url(https://i.imgur.com/Y9SbdnE.png) 0px 0px / 512px 512px repeat, var(--spookybg);
}

/* HOME RUN!! */

.box.blog:has(a[href$="?tabletest"]) table {
  margin: 50px; margin-left: auto; margin-right: auto; justify-content: center;
  background: gray; box-shadow: 0px 0px 0px 20px lightgray;
  font-family: Courier; padding: 20px; text-transform: none;
  & thead {
    font-size: 0px;
    &:after {
      content: "Original Pranksta";
      font-size: 16px;
      color: black;
      font-weight: bolder;
    }
  }
  & tbody td:nth-child(1) {
    padding-right: 10px;
  }
  & tbody tr:nth-child(1), 
  & tbody tr:nth-child(3)  {
    color:  green;
  }

  & tbody tr:nth-child(2),
  & tbody tr:nth-child(4) {
    color: blue;
  }
  
  & tbody tr:nth-child(5) {
    color: magenta;
  }
}

a.money {
  font-size: 100px;
  text-decoration: none;
  color: lime !important;
  pointer-events: none;
  font-weight: 600;
}

h6#galaxy {
  display: none;
  height: 0px;
}
h6#galaxy:target {
  display: grid;
  & audio {
    position: fixed;
    left: 49%;
    top: 49%;
    z-index: 5000;
    transform: none;
    width: 64px;
    border: 10px solid black;
    filter: none;
  }
}

html:has(h6#galaxy:target) {
  animation: anim_acid 5s infinite linear;
  & img { animation: messages 5s infinite linear; }
  & body {
    background: black;
  }
}

#about .sillynote {color: transparent; &:hover {color: #08ff002b;}}
#about .scaryfox { display: none; } @-moz-document url-prefix() { 
  #about .scaryfox {display: block;}
}

body:has(a[href$="#munky"]) .blogCorpus table {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0px;
  padding: 0px;  
  z-index: 5000;
  border-spacing: 5px;
  border-collapse: collapse;
  
& th {
    height: 0px;
}
  
& tbody tr td {
  background: black;
  min-width: 100px;
  min-height: 100px;
  max-height: 100px;
  max-width: 100px;
} 

& tbody tr:nth-child(2) td:nth-child(n+4) {
  background: cyan;
  height: 50px;
  min-width: 20px;
}

& tbody tr:nth-child(-n+5):nth-child(n+3) td:nth-child(4) {
  background: cyan;
  width: 20px;
  height: 50px;
}

& tbody tr:nth-child(5) td:nth-child(-n+6):nth-child(n+5) {
  background: cyan;
}

& tbody tr:nth-child(4) td:nth-child(-n+7):nth-child(n+6) {
  background: cyan;
  width: 100px;
}

& tbody tr:nth-child(4) td:nth-child(7) {
  background: red !important;
  height: 100px;
  & img {
    width: 100%;
    height: 100%;
  }
}
  
}

body:has(a[href$="#munky"]) {
  overflow: hidden;
}

#hey:hover, #hey:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#rufflePlayer {
  position: fixed; width: 743px; height: 600px; display: none;
  clip-path: inset(11.66% 100px 44.66% 103px round 1.5%); margin: auto;
  left: 0; top: 0; right: 0; bottom: 0; z-index: 320;
  transform: scaleX(1.2) scaleY(1.2);
}

.svmsg {
  display: flex;
  margin: 30px; margin-inline: auto;
  width: 400px; height: 80px; color: white;
  background: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Buggy/1w.png) 50% / 100% 100%;
  border: 30px solid;
  border-image: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Buggy/1wborder.png) 42 174 round; border-image-outset: 30px; border-image-repeat: stretch;
}

.svmsg p:before {
      content: "Your Overlords Say:";
}

.svmsg p {
    background: var(--gradical);
    padding: 10px;
    position: relative;
    border: 4px black solid;
}

.svmsg a {
  color: lime;
  text-decoration: none;
  font-weight: bold;
  &:hover {
    color: white;
  }
}

.box.blog ol {
  display: flex;
}
.box.blog ol img {
  max-height: 256px;
  max-height: 256px;
  box-shadow: 5px 5px #002f00;
  margin: 20px;
}
.box.blog ol {
  font-size: 0px;
}