/*TEXT SUFF*/
/* FONT IMPORT */

@import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&display=swap');


.bitcount-grid-single{
  font-family: "Bitcount Grid Single", system-ui;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
}

  /* Text: */
  :root {--font:"Bitcount Grid Single", system-ui;
  --heading-font: Lucida Console, monospace;
  --font-size: 15px;

  /* Text Colors: */
  --text-color: #1d0000;
  --sidebar-text-color: #1b0000;
  --link-color-hover:rgb(255, 191, 52);
  --link-color:rgb(238, 113, 200);

  /* Background Colors: */
  --background-color: rgb(255, 255, 255);
  --content-background-color:rgb(131, 131, 131);
  --sidebar-background-color: rgb(131, 131, 131);

  /* Other Settings: */
  --margin: 5px;
  --padding: 5px;
  --border: .5px solid #422525;
  --round-borders: 0px;
  --sidebar-width: 240px;

    /* CRT */
    --crt-red: rgb(218, 49, 49);
  --crt-green: rgb(112, 159, 115);
  --crt-blue: rgb(40, 129, 206);
}
* {
  box-sizing: border-box;
}


/* Links: */
a { color: var(--link-color);
  text-decoration:none;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: underline;
}


body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--padding);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
 background-image: url();
  
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
background: rgba(112, 112, 112, 0); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(184, 184, 184, 0); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #000000; 
}




/* END BASIC SETTINGS*/



/* GRID BASE AREA START*/
.parent {
display: grid;
grid-template-columns: 350px 1fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 1px;
grid-row-gap: 1px;
justify-items:stretch;

}

/* GRID BASE AREA END*/

  /* /////////////////////////////////////CUSTOM BLOB//////////////////////////////// */
.menu{ 
  background-color: #e4e4e4;
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
  border-radius: 1.5em;
  padding: 10px;
  margin: 3px;
  overflow: hidden;
  }

  .menu2{ 
  background-color: #000000;
  border-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-radius: 1.5em;
  padding: 10px;
  margin: 3px;
  overflow: hidden;
  }
  

#shad{border: 1px solid;
  padding: 10px;
  box-shadow: 2px 2px rgb(0, 0, 0);
  margin: 20px;}
#shad2{border: 1px solid;
  padding: 10px;
  box-shadow: 2px 2px rgb(255, 255, 255);
  margin: 20px;}

/* /////////////////////////////////////MAIN PARTS//////////////////////////////// */
/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}





/* /////////////////////////////////////CUSTOM BORDERS//////////////////////////////// */

.rawr1 {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACZ0lEQVR4AezcW07DMBCF4bQbgP2vElZQ5Df7WJnh1JMQoh/JUqZzqfPV8iPPTf6+X1+vaEn57cPIouUUYALVAmJPAFDPK60GNCXyCp7tHuhX1t7Xtmetb59FS+uPjqO9tJx+f/usX5rXuK9tz5xQFVqMAV0E1HZAVWQxnkA/Hp+PfmXz273Rr763PWt/X3vGs35/21O/dA9ar3Hf2541P4FqAbEnAKjnlVYDmhJ5BSlouyf6tW1b+A3unRQOOyDp7q9/9/ac9aegB7zTrUcCWvzzAno0qN4RGrvf3+6daOk8rV3NZ/N0vsbu+3NCVXAxBnQRUNsBVZHF2AbN7qQsr/vN6lfz1d+n8zS2QXUA8SgA6OixHAG6TDgOmECzO2ts37Zf1mvbZWJ3/1n9BHqZN/2nGwG0+IcD9GzQ7M4o3s/lxrnvzwkt/gkBBbRYoHgcJxTQYoHicZxQQIsFisdd+YQWv+o54wAtdgYU0GKB4nGcUECLBYrHcUIBLRYoHscJBbRYoHgcJxTQYoHicXc7ocU8/jhAfbOwA9CQx08C6puFHYCGPH4SUN8s7AA05PGTgPpmYQegIY+fBNQ3CzsADXn8JKC+WdgB6LaFQG4SUFcsqQc0AXLTgLpiST2gCZCbBtQVS+oBTYDcNKCuWFI/gbr/YyOZf7t05jOB3k7g5BcCtBgc0LNBszsjyxfvt3xctv+d/O4+OKG7NO8lAH3PbbcL0F2a9xI2qHunZPV/nVe2bD9ar7ENqgOIRwFAR4/lCNBlwnHA0/2fGmP7HGV30NXz8xvFn6gfJzT2srOA2mRxA6Cxj539AQAA///vV09SAAAABklEQVQDAMfG1vs11x4uAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}


    .journal {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAB5klEQVRYR+1Zy5aDIAytrmX8/8+0djt2QvGBkZgEg9pzxlWLkFxuXhCrB3qca9947Pj/AUTUixj4WcOQH+37rpLI30xyzgHQ+iPWC9p//J62elKjlDw1UIpJqSBuS1LLUfpmOtZAF1OdAjQyAQl0AjhN8P/9utfoO/i9ljlqfkpvau6Eq6IWzMBbCC4g2JrZLKB7DJ7NaGzZBwDrXyEr8IyO6eosRldAo/TFArXySSynAQI8VRQwbMnLgLKxgSxJpCf74KHyqJjRSQBO+NY+aQZ0AfwDsVaZp6MCQMOh5LaMnl3rGygkVVRIuOAig2kyVSlmOWDq9HRpZdIkfOfKBJcJo1eenrJL6NeYvlStT5v+DWnx+QlwdTCVBKo5Xv7Xes4S2itQ4rp88xKKT1GlKhKlh8urW0YbYBRG7w+00B1JdszbSU+cAC4oct9/dTDV0EDo+j6d8KU9oS1zqEOXSa36zkTdnTL1i5dlAz07Ta30QW+y70JnJPjwANknuALZRG1hoqbRKqaQmKjOo3iHgm4uUk35brrpi3GT51GKCcsWeei1D2C+qD1OKFYDpXznqIml6zfnUW5hqRO+Vi/7RcLSBWJw3gl+96J5nDx3nKU74+aZvo8+oYiBmgI4IIw1/QHZpkv/AKhgd0nbK4EFAAAAAElFTkSuQmCC') 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid; 
  }
  
      .journal2 {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABoUlEQVRYR+1Y3RqCIAzNriPf/zHLrq0hYgTOsxGUfh/e6cY4nv1Cd4oeY/pn/O39bkUdL7YSgUpoYBhuwKDTTpS2gW5jXJOe6eO4sUwNlAMoNaT9Be1+C6PGXMlpqRd2A9T/mQeE3rXMcfrafTq0IJb/D2hPLh+70zajT5LfRdkp/RFEUGznQIxeqG4SVxyjUoa0ekUYtbXvJizEWoBePwVqqOqcF8IS18cL/XutssQDdR2R2zeoo5+tsz5QV7elIce20PpAPxlEZfB4QLW9NzeJiseoMzhSDA1FC3020J7mTzuG7aPX8x1Q1pkoP4eHbMCVhoQNtbBew2QyoDMhA1JgsV6RzhQW3sMAzWUMrVMzipIJbZgrn0LOJvEc+8hz6y20QvJ8HaPpUOLOu62FzsyoYxS5JDcG0boGFDGklTdGtYwh/WKMJhuh2y4kZ5B/fRQJ7bI3icorxjWsHuiFpinbfeDh7l9lihukYzzs9D7F0A9a6QI0Gjd1QNd8lRmLKLm8PNv10g0mvYIxK2ZUBfAHylVOmDVwN6ClWW2Mlmb0BWbr2zrwSBZMAAAAAElFTkSuQmCC') 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid; 
  }
  
    .journal3{
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAQNJREFUWEftmFEOxCAIROsBvP9BPcBusqn9YEPGsaDQtJ9NLI8ZCsRyJHlKEs5jGLTW+tmRVGvtx/gc0K5kz2yVqjIuVDQd6Colu3PTioYFXW25jDesaDpQb8u1mqQVDQu6ynJUk1DR8KDaLPeaSNOKhgdlM7P6udi4hT3wgp77rjrrH6OoldXyO6xAsEbDgHYQ2Z68+qeMR8/6NKBapuGsf0EVS+i/HrWNcNaHX0q09tTfe7Up2nr2gFUpsHHhZPLa+NODSseu2zw2M2/rp0GtwFAbRCUGazQM6O7tSbNavr/uR3dtTzQoavxeJTA6UP5unLVRGg7UC+jud+Ed/t0AVue/ONUwST1ngoMAAAAASUVORK5CYII=') 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid; 
  }
  
      .note {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAsklEQVR4AezX0QqAIAwF0Ord//9QP6CeLkiy5ugStN1AFk5Hnvbisf3kqfehrbVzHOwfVUcUir33fRyYZ8nmE4XQPUJsdd5ahzpWzCeKk459+PTurUd+NeYV9QTQg9D21q/m64qyJSFeVxQC7ChRibIF2PXUoxJlC7DrpetRNlC4nkTDZM4GiTpA4bREw2TOhryiuGW+jQ7glM4nitslO050xkQ+UeOgn01LlE0t0bKiFwAAAP//JXtcRgAAAAZJREFUAwCp7LhVEeSV7gAAAABJRU5ErkJggg==') 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid; 
  }




  /*STATUS*/
  #statuscafe {
    color: #000000;

  
    
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}
#cafe{
  background-color: #ffffff;
  margin: 10px;
  padding: 5px;
  border-radius: 5px;
  border: solid,black;
}

/* -------------------------PHOTOSPile------------------------------- */
.photopile { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.photopile figure { 
  display: inline-block;
  max-width:60%;
  background: white;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  transform: rotate(2deg);
  margin: 0 -25px;
}
.photopile figure img {
  max-width: calc(100% - 2rem);
  margin: 1rem 1rem 0 1rem;
  border: 2px rgb(0,0,0,0.55) inset;
}
.photopile figcaption {
  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile figure:hover { 
  z-index: 3;
}
.photopile figure:nth-child(2n) { 
  transform: rotate(-10deg);
}
.photopile figure:nth-child(3n) {
  transform: rotate(5deg);
}
.photopile figure:nth-child(4n) { 
  transform: rotate(4deg);
}
.photopile figure:nth-child(5n) { 
  transform: rotate(-2deg);
}
.photopile figure:nth-child(6n) {
  transform: rotate(-7deg);
}


/* ////////////////////CRT SHIT//////////////////// */

.code {
  color: attr(data-color);
}
.wrapper {
  padding-top: 2rem;
  padding-left: 1rem;
  display: inline-block;
  white-space: nowrap;
}
.code {
  animation: typewriter 1s steps(14) 1s 1 normal both;
  line-height: 1;
  margin: 0;
  display: inline-block;
  white-space: nowrap;
  overflow-x: hidden;
}
.cursor {
  display: inline-block;
  animation: blinkTextCursor 500ms infinite normal;
}

/* Animation */
.anim-typewriter{

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes blinkTextCursor {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}}

.crt {
  background-color: rgb(25, 25, 30);
  text-shadow: 0 0 0.2em currentColor, 1px 1px rgba(255, 0, 255, 0.5),
    -1px -1px rgba(0, 255, 255, 0.4);
  position: relative;
  &:before,
  &:after {
    content: "";
    transform: translateZ(0);
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 999;
  }

  &:before {
    background: repeating-linear-gradient(
      var(--crt-red) 0px,
      var(--crt-green) 2px,
      var(--crt-blue) 4px
    );
  }
  &:after {
    background: repeating-linear-gradient(
      90deg,
      var(--crt-red) 1px,
      var(--crt-green) 2px,
      var(--crt-blue) 3px
    );
  }
}