/* 
so back at it again with another theme, keepin the fonts coz of course!
*/

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

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

:root {
  counter-reset: tops;
  --spookybg: 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;
  --songcover: url(https://file.garden/Zfe2qw_uZRgXD50Y/cover.jpg);
  --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;
}

body {
  background: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Green%20Hell/coffe%20and%20tv.gif) 0% / 100% fixed;
}

#header, #hSub {
  right: 0;
  left: 0;
  margin-inline: auto;
  max-width: 70rem;
  min-width: 70rem;
  padding-inline: 20px;
  background: #640080;
}

#container {
  padding-inline: 0px;
  max-width: 70rem;
  background: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Postopocodicktic/mindwall.png) 0% 0% / 50%;
  display: flex;
  flex-direction: column;
  color: white;
  border-inline: 20px #3c3c3c solid;
  box-shadow: 20px 20px black, -20px 20px black;
}

.topLeft, .topRight {
  width: 100%;
}

.topLeft {
  display: flex;
}

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

#name {
  background: url(https://file.garden/Zfe2qw_uZRgXD50Y/myspace/Postopocodicktic/ragmayortest.png) 0 / 100% 100%;
  position: absolute;
  color: transparent;
  font-size: 30px;
  height: calc(6rem + 2vh);
  width: calc(10rem + 10vw);
  translate: 0 -40px;
}

.boxInfo {
  display: flex; flex-direction: column;
  width: 17%;
  margin-inline: 20px;
  border: 0px;
}

.url.box {
  width: 200px; max-height: 200px; border: 0px; margin: 20px; 
  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: 15px;
  color: white !important;
  font-weight: bold;
  text-shadow: var(--blackborder);
    
    &:hover {
      color: #c700ff !important;
    }
  }
  position: relative;
  padding: 0px;
}

.url.box:after {
    margin: 10px; border: 10px gray inset;
    content: "THE CAPTION IS ME";
    margin-left: auto; margin-right: auto;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 14px;
    background: url(https://i.imgur.com/V2sPIcU.png);
    height: 100px; width: 100px;
    background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important;
    text-shadow: var(--blackborder); text-align: center;
}

.player {
  width: 200px; height: 200px;
  margin: 20px; border: 0px; padding: 0px;
}

.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;
  text-align: center; font-size: 15px; color: white; 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;
  }
}

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

.extended, .rightHead, .boxHead {
  padding: 10px;
  text-align: start;
  background: green;
  border: 0px;
  color: white;
  & h3 {
    margin: 0px;
  }
}

.topLeft .boxHead {
  background: none;
}

/* SEAMLESS TRANSITION */

.blurbs {  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  grid-template-rows: 0.1fr 0.5fr 4.0fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "extended about"
    "blogs about"
    "who about";
  max-height: 1024px;
  overflow-y: scroll;
}

.extended { grid-area: extended; max-height: 20px;}

#blogs { grid-area: blogs; }

#about { grid-area: about;}

#who { grid-area: who;}

.blurbs .rightHead {
  display: none;
}

.blurbs h4 {
  display: none;
}


.blogs div:not(:nth-child(1)) {
  border: 4px inset gray;
  background: gray;
  width: 80%;
  position: relative;
  color: white;
  & a {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    font-size: 0px;
  }
}

.blogs div:nth-last-child(1) {
  background: transparent; border: 0px;
  & a {
    font-size: 15px;
    display: relative;
    color: red;
    text-transform: full-width
  }
}

/* TOPS */

.fwiendFace img {
  max-width: 300px;
  max-height: 300px;
  height: 106px;
  width: 106px;
  object-fit: cover;
  background: blue;
}

#who ul {
  position: absolute;
  display: flex;
  top: 0px;
  translate: -30px calc(1600px - 1vh);
  max-width: 480px;
  display: flex;
  flex-wrap: wrap;
}

#who ul h1 {
  font-size: 15px;
}

#who ul li::marker {
  font-size: 0px;
}
.fwiendFace b {
  color: white;
}

#top {
  /* i gave up here because i got tired so im just gonna do a tom and do an unecessary calc() function if i dont fix this when im done hit me up so i can do that*/
  margin-top: calc(160px);
  max-width: 480px;
  display: flex;
  flex-wrap: wrap;
}


.tableRight {
  background: transparent;
}
tr {
}
#userWall tbody {
  display: flex-inline;
  flex-direction: column;
}
.tableLeft img {
  height: 128px;
  width: 128px;
  object-fit: cover;
}
.tableLeft {
  background: transparent;
  & a {
    color: white;
  }
  width: 10%;
}

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

#about table:nth-child(2 of table) {
  position: fixed; top: 1px; right: calc(82px + 20vw);
  overflow: hidden;
  background: transparent; max-width: 128px; 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-width: 256px; 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: "Seas Of Cheese"; font-size: 15px;}
    }
  }
}