/*TEXT SUFF*/
/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&family=Jersey+20&display=swap');
.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
}


  /* Text: */
  :root {--font: 'Jersey 10', sans-serif;
  --heading-font: Lucida Console, monospace;
  --font-size: 18px;

  /* Text Colors: */
  --text-color: #1d0000;
  --sidebar-text-color: #1b0000;
  --link-color-hover:rgb(255, 255, 255);
  --link-color:rgb(0, 90, 0);

  /* Background Colors: */
  --background-color: rgb(49, 49, 49);
  --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;
}
* {
  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(https://64.media.tumblr.com/b8e12ad509f9224c80eed548be7648a4/e6ba0f904bebdee9-b3/s1280x1920/37b85082a12605f80069eb879fc88684133dea55.jpg);
  
}

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

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

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




/* END BASIC SETTINGS*/

/* GRID BASE AREA START*/
.container {
  
  background-color: #c4b89e;
  border-radius: 20px;
  border: hidden, #bfcdce, 1px;
  display: grid;
  grid-gap: 5px;
  grid-template:
    "header header"
    "sidebar main"
    "footer footer"
    / 220px 1fr;
}

header {  
  grid-area: header;
  padding: 10px;
  text-align: center;
  border-top-left-radius: 20px;
   border-top-right-radius: 20px;
  
  border: solid, #ffffff, 1px;
  background-image: linear-gradient(to bottom, rgb(209, 201, 166), rgb(170, 152, 102));
  background-color: #ffffff;
 }


aside { width: 100%;
  height: 500px;
  justify-items: center;
  grid-area: sidebar; 
  padding: 10px;
   overflow-y: scroll;
overflow-x: hidden;
}

main { 
 
  grid-area: main;
  display: grid;
  background-color: rgba(255, 0, 0, 0);
  overflow-y: scroll;
overflow-x: scroll;
    
   width: 700px;
  height: 500px;
}



footer { grid-area: footer; 
  padding: 10px;
text-align: center;
border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
  
  border: solid, #ffffff, 1px;
  background-image: linear-gradient(to bottom, rgb(170, 152, 102), rgb(209, 201, 166));
  background-color: #ffffff;}

/* GRID BASE AREA END*/



#water { background-color: #ff0000;
grid-column-start:1 ;
grid-column-end:6 ;
grid-row-start:1 ;
grid-row-end:1 ;

}







  
  /* /////////////////////////////////////CUSTOM BLOB//////////////////////////////// */



  #sideblock{width: fit-content;
    justify-items: center;
    height: fit-content;
     border-bottom-left-radius: 0px;
   border-bottom-right-radius: 20px;
   border-top-left-radius: 0px;
   border-top-right-radius: 20px;
  border: solid, #9258287c, 1px;
  background-color:  rgb(170, 152, 102);
  }
  

    #sidetitle{
      color: rgb(0, 0, 0);
     
      margin: 5px;
      margin-right: 5px;
      width: 100%;
      justify-items: center;
     font-size: 12px;
      border-bottom-left-radius: 0px;
   border-bottom-right-radius: 20px;
   border-top-left-radius: 0px;
   border-top-right-radius: 20px;
  border: solid, #50505060, 1px;
 background-color:  rgb(145, 117, 103);}

 #sideblock2{width: fit-content;
    justify-items: center;
    height: fit-content;
     border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
  border: solid, #a5705800, 1px;
  background-image: linear-gradient(to bottom, rgb(110, 86, 86), rgb(61, 49, 49));
  background-color: #ffffff;
  }
  

    #sidetitle2{
      color:black;
      margin: 5px;
      width: 100%;
      justify-items: center;
     font-size: 12px;
 border-radius: 15px;
 border: solid, #50505060, 1px;
 background-color:  rgb(145, 117, 103);


  }

    #title:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
}

  #sidebubble{ 
    color: #000000;
      margin: 5px;
      width: 200px;
      height: 35px;
    justify-items: center;
    justify-content:top;
     font-size: 15px;
  border-bottom-left-radius: 0px;
   border-bottom-right-radius: 20px;
   border-top-left-radius: 0px;
   border-top-right-radius: 20px;
  border: dashed, #53442d, 1px;
  background-color: #ffd4ab;

  }

  #sidebubble2{ 
    color: #382514;
      margin: 5px;
      width: 100px;
      height: 30px;
    justify-items: center;
    justify-self: left;
    justify-content:center;
     font-size: 10px;
  border-radius: 50px;
  border: dashed, #53442d, 1px;
  background-color: #be9b7a;

  }

  #sidebubble:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
}
/* /////////////////////////////////////MAIN PARTS//////////////////////////////// */

#revimg{
  width: 100px;
  height: auto;
}


  .review div:hover {
  -ms-transform: rotate(-2deg); /* IE 9 */
  -webkit-transform: rotate(-2deg); /* Safari 3-8 */
  transform: rotate(-2deg); 
}



.review {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(10, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
width: 600px;
height: auto;
justify-items:stretch;
align-items: start;
justify-content: space-evenly;
align-content:stretch ;
}

.review div{
background-color: #9b7857;
background-image: url();
padding: 10px;
margin: 1px;
border: #817355, solid;
 overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
 flex-direction: column;

}

.title1 { grid-area: 1 / 1 / 2 / 2;
align-self: center;
  }

.title2 { grid-area: 1 / 2 / 2 / 3;
  display: flex;
  align-self: center;}

.title3 { grid-area: 1 / 3 / 2 / 4; 
  display: flex;
  align-self: center;}





.div4 { grid-area: 2 / 1 / 3 / 2; height: 300px;
}

.div5 { grid-area: 2 / 2 / 3 / 3; height: 300px;
;

}

.div6 { grid-area: 2 / 3 / 3 / 4; height: 300px;
}

.div7 { grid-area: 3 / 1 / 4 / 2; height: 300px;
}

.div8 { grid-area: 3 / 2 / 4 / 3; height: 300px;
}

.div9 { grid-area: 3 / 3 / 4 / 4; height: 300px;}

.div10 { grid-area: 4 / 1 / 5 / 2; height: 300px;}

.div11 { grid-area: 4 / 2 / 5 / 3; height: 300px;}

.div12 { grid-area: 4 / 3 / 5 / 4; height: 300px;}

.div13 { grid-area: 5 / 1 / 6 / 2; height: 300px;}

.div14 { grid-area: 5 / 2 / 6 / 3; height: 300px;}

.div15 { grid-area: 5 / 3 / 6 / 4; height: 300px;}

.div16 { grid-area: 6 / 1 / 7 / 2; height: 300px;}

.div17 { grid-area: 6 / 2 / 7 / 3; height: 300px;}

.div18 { grid-area: 6 / 3 / 7 / 4; height: 300px;}

.div19 { grid-area: 7 / 1 / 8 / 2; height: 300px;}

.div20 { grid-area: 7 / 2 / 8 / 3; height: 300px;}

.div21 { grid-area: 7 / 3 / 8 / 4; height: 300px;}

.div22 { grid-area: 8 / 1 / 9 / 2; height: 300px;}

.div23 { grid-area: 8 / 2 / 9 / 3; height: 300px;}

.div24 { grid-area: 8 / 3 / 9 / 4; height: 300px;}

.div25 { grid-area: 9 / 1 / 10 / 2; height: 300px;}

.div26 { grid-area: 9 / 2 / 10 / 3; height: 300px;}

.div27 { grid-area: 9 / 3 / 10 / 4; height: 300px;}

.div28 { grid-area: 10 / 1 / 11 / 2; height: 300px;}

.div29 { grid-area: 10 / 2 / 11 / 3; height: 300px;}

.div30 { grid-area: 10 / 3 / 11 / 4; height: 300px;}


/* /////////////////////////////////////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: #ffffff;

    border-radius: .5em;
    background-color: rgba(255, 255, 255, 0);
    border: 1px hidden rgb(117, 117, 117);
    
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}
#cafe{
  background-color: #000000;
  margin: 15px;
}