/* The Pixel Operator font */

@import url('https://fontlibrary.org//face/pixel-operator');

/* The variables, dude. */

:root {
  --coolgrad: linear-gradient(90deg, #4F3E51 0%, #A790AC 100%);
}

@media (max-width: 720px) {
  #container {
  padding: 0px !important;
  }
  .comments {
  max-height: 100% !important;
  }
  #footer {
  position: static !important;
  }
  .topRight {
  flex-direction: column;
  }
}

/* Pixel Operator Font */

@keyframes sky {
  0% {
    background: 
    url(https://i.imgur.com/mPPNFiW.png) 25% 80% / 430px no-repeat scroll, url(https://i.imgur.com/ditxhRK.png) 0% 7.5% / 800px no-repeat scroll,
    url(https://i.imgur.com/cA4ibVH.png) 0% 0% / 498px 278px;
  }
  100% {
    background: 
    url(https://i.imgur.com/mPPNFiW.png) 25% 80% / 430px no-repeat scroll, url(https://i.imgur.com/ditxhRK.png) 0% 7.5% / 800px no-repeat scroll,
    url(https://i.imgur.com/cA4ibVH.png) 498px 278px / 498px;
  }
}

/* Stretch across the skyyyy... */

body {
  background: 
    url(https://i.imgur.com/mPPNFiW.png) 25% 80% / 310px no-repeat scroll, url(https://i.imgur.com/ditxhRK.png) 0% -7.5% / 800px no-repeat scroll, url(https://i.imgur.com/cA4ibVH.png) 0% 0% / 498px;
  image-rendering: pixelated;
  animation: sky 10s infinite linear;
  font-family: PixelOperator8Regular;
  font-size: 12px;
}

/* The magic! */

#container {
  background: none;
  margin-bottom: 50px;
  max-width: 100%;
  padding: 15px;
  padding-left: 100px;
  padding-right: 100px;
}

/* Header. */

#hSub , #header {
  background: #ac9993;
  position: fixed;
  bottom: 0px;
  top: initial;
  font-family: PixelOperator8Regular;
  
  & a {
    color: black !important;
      transition: font-size 1s;
    
    &:hover {
      font-size: 16px;
      transition: font-size 0.2s;
    }
  }
}

#header {

  bottom: -16px;
}

/* STILLBERT MC GILBERT 
stillbert mc gillbert is disabled by default.
i hate him.

.topLeft {
    
    &:after {
    content: "";
    background: url(https://i.imgur.com/yhGLqj3.png);
    background-size: 100% 100%;
    height: 512px;
    width: 190px;
    position: absolute;
    left: 65vh;
    top: 24vh;
  }
}

*/

/* The TOPS, it's all about the tops! */

#name {
  position: relative;
  top: 50px;
  z-index: 5000;
  left: 10px;
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: var(--coolgrad);
  max-width: calc(50% - 50px);
  padding: 5px;
  color: white;
}

.short {
  background: #ac9993;
  padding: 4px;
  border: 4px #c4b0aa outset;
  padding-top: 50px;
}

.boxInfo.box {
  background: #ac9993;
  padding: 4px;
  border: 4px #c4b0aa outset;
  max-width: 256px;
  display: flex;
  flex-direction: column;
}

.url {
  background: #ac9993;
  border: 4px #c4b0aa outset;
  max-width: 256px;
  
  div:nth-child(1) {
    background: var(--coolgrad);
    color: white;
    padding: 4px;
  }
}

.player {
  background: #ac9993;
  border: 4px #c4b0aa outset;
  max-width: 356px
}

audio {
  filter: invert(1) sepia(0.3) hue-rotate(270deg);
}

/* Top. BUT THE RIGHT. IM IN THE RIGHT. YOURE IN THE WRONG. */

.topRight {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 1vh;
}

.rightHead, .boxHead {
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: var(--coolgrad);
  color: white;
  font-weight: bold;
  padding: 5px;
}

.extended {
  background: #ac9993;
  border: 4px #c4b0aa outset;
  height: 25%;
  flex: 1;
  z-index: 10;
  display: flex;
}

.blurbs {
  background: #AC9993;
  padding: 4px;
  border: 4px #c4b0aa outset;
  flex: 3;
  height: 450px;
  
  > h4 {
      color: black;
      text-align: center;
  }
  max-width: 256px;
}

#about {
  background: white;
  padding: 4px;
  height: 150px;
  overflow-y: scroll;
  border: 4px #c4b0aa inset;
}

#who {
  background: white;
  padding: 4px;
  height: 150px;
  overflow-y: scroll;
  border: 4px #c4b0aa inset;
}

/* Friends! Pals! Bros! */


.fwiends {
  background: #AC9993;
  padding: 4px;
  margin-bottom: 10px;
  border: 4px #c4b0aa outset;
  flex: 2;
}

.fwiendCounter {
  color: black;
  text-align: center;
}

#top {
  display: flex;
  flex-direction: column;
  max-height: 256px;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 6px;
  
  > a {
    background: #A09798;
    padding: 10px;
    border: 4px #c4b0aa outset;
    height: 48px;
    width: 48px;
    font-size: 0px;  
  }
}


.fwiendFace {
    > b {
    font-size: 0px;
    }
    > img {
     height: 48px;
     width: 48px;
     filter: var(--coolgrad);
     object-fit: cover;
     border-radius: 100%;
  }
}

/* Comments */

#userWall {
  height: 200px;
  overflow-y: scroll;
}

.comments {
  background: white;
  border: 4px #c4b0aa outset;
  background: #ac9993;
  padding-bottom: 5px;
  
  & a:not(first-child) {
    color: black;
    text-decoration: underline;
  }
  
  & tr {
    background: white;
    display: flex;
    flex-direction: row;
    border: 4px #c4b0aa inset;
    padding: 5px;
    margin: 10px;
    margin-bottom: 10px;
    min-width: 70vh;
  }
}

.tableLeft {
  background: none;
  flex: 2;
  & img {
    width: 48px;
    height: 48px;
    object-fit: cover;
  }
}

.tableRight {
  background: none;
  flex: 4;
}

/* The ONE AND ONLY, footer. */

#footer {
  background: #ac9993;
  border: 4px #c4b0aa outset;
  padding: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

/* Blowgs */

.blogCard {
  background: #ac9993;
  padding: 5px;
  border: 4px #c4b0aa outset;
  max-width: 300px;
  
  #avatar {
    width: 128px
  }
  .boxInfo {
    border: 0px;
  }
}

.blogBody {
  animation: sky 10s infinite linear reverse;
}

.box.blog {
  background: #ac9993;
  padding: 20px;
  border: 4px #c4b0aa outset;
}

div.blogTitle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.blogTitle #name {
  text-align: center;
  position: static;
}

.topRight {
  background: url(https://i.imgur.com/tLDHHJ3.png) 8.4% -3.1% / 175px no-repeat scroll;
  z-index: 200;
  position: relative;
}

.blurbs::before {
  content: "whore";
  background: url(https://i.imgur.com/rb0smVQ.png) 0% -0% / 100% 100%;
  position: absolute;
  left: -10vw;
  top: 224px;
  font-size: 60px;
  color: transparent;
  height: 250px;
  width: 600px;
  z-index: -500;
}