/* OLDISH CSS FILE FROM 17/05/26. new css based on feedback from azman. thanks bro */





/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*birdstems site formatting ; ive been thinking about different formats / main format remixing depending on the page though*/
/*like wouldnt it be cool if the qnb mainpage and subsequent pages had a different format from main*/
/*bc main is kinda like. half a blog half whatever i want it to be depending on how im feeling that day*/
/*so to keep it distinct.*/

body {
    font-family: "PixelOperatorMonoBold";
    background-image:url(/assets/background1.png);
    background-position: 50% 10%;
    background-size: 1000px;
    background-color:#260a21; /* rgba(38,10,33,25); <- i attempted to layer this over bg-image but no such luck :( */
    color: white;
    font-size: 0.95em;
    line-height: 1.5em;
}

/* more info on vendor-prefixed properties (e.g. '-o-'' or '-moz-' : https://stackoverflow.com/questions/18083056/what-are-moz-and-webkit */

/* Hide scrollbar for Chrome, Safari and Opera */
.noscroll::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE and Edge*/
.noscroll {
  -ms-overflow-style: none;  /* IE and Edge */
}

/* Hide scrollbar for Firefox */
.noscrollf {
  scrollbar-width: none;
}

p { 
    font-weight: bold;
}

.clickable {
  border:none;
  border-right:double;
  border-color:#fce694 !important;
  background-color:#5d3c46 !important;
  font-family:'Play';
  opacity: 1;
  transition: 0.7s, transform 0.7s;
}

.clickable:hover {
  background-color:#a4838d !important;
  margin-right:10px;
  transition: 0.7s, transform 0.7s;
}

.idimages {
  height:2.4em;
  width:auto;
  opacity:0.75;
}


h1 {
  color: #FCE694;
  font-family: "Taviraj", serif;
}

h2 {
  color: #f6feaa;
}

h3 {
  color: #C7DFC5;
}

h4 {
  color: #C1DBE3;
}

b {
  color: white;
}

a:link {
  color: #fbdd9d;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #a5a18f;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

/*CONTENT MANAGEMENT STARTS HERE YAY*/
/*CONTENT MANAGEMENT STARTS HERE YAY*/
/*CONTENT MANAGEMENT STARTS HERE YAY*/

.contenter {
  display:flex;
  flex:1;
  flex-direction: column;
  flex-wrap: wrap;
}

/* meant for wider screens ; resized ver available */

button {
  font-family: "PixelOperatorMonoBold";
    color: white;
    font-size: 0.9em;
    line-height: 1.5em;
}

.container {
  position: relative;
  min-height:70vh;
  max-height:70vh;
  margin:15px 4% 0vh 4%;
  display:flex;
  flex:1;
  flex-direction: column;
  flex-wrap: wrap;
}

/*think of a desktop background basically, but for the main site instead*/

/*background-image:url(https://upload.wikimedia.org/wikipedia/commons/a/a5/Tsunami_by_hokusai_19th_century.jpg);*/
/*https://upload.wikimedia.org/wikipedia/commons/a/a5/Tsunami_by_hokusai_19th_century.jpg*/
/*https://www.pockettactics.com/wp-content/sites/pockettactics/2022/05/sans-undertale.jpg*/
/*/assets/background1.png*/
#bestbox {
  max-width: 1100px;
  margin: 0px auto;
  border: 1px solid rgba(255, 255, 255, .0);
  border-radius: 4px;
  background-position: 50% 10%;
  background-size: 1000px;
  padding: 0px 4px;
  gap: 4px;
}

/* header image */
/* background:center url(https://64.media.tumblr.com/3a11c91cc684f2b03b0207762e3941a9/dfd08965db1a9ad6-bd/s2048x3072/5541d4ace0bcc7dabcd7d2139b872104030bcb56.jpg); */
header {
  background-color:rgb(93, 60, 70);
  background-size:100%;
  box-sizing: border-box;
  height: 100px;
  width: 100%;
  margin:4px 0px;
  border-radius:2px;
  border-style:solid;
  border-width:1px;
  border-color:rgba(255, 255, 255, 0.5);
}

/* header:hover { */
/*  background:center no-repeat url(/assets/header2.png); */
/*  mix-blend-mode: multiply; */
  
/*} */

#header-txt {
  position:absolute;
  margin:90px 0 90px 3.5%;
  text-align:start;
  text-transform:uppercase;
  font-weight:700;
  -webkit-text-stroke:5px transparent;
  -webkit-text-stroke-fill:rgb(37, 36, 102);
  background:url(/assets/background1.png) no-repeat;
  background-clip:text;
  z-index:40;
}

#contentbox-border {
  overflow:hidden;
  border-radius:4px;
  box-shadow:#5d3c46 5px 5px 2px, #5d3c46 -5px -5px 2px;
  float:none;
  padding:4px;
  height:auto;
  min-width:60%;
  max-width:60%;
  min-height:inherit;
  max-height:inherit;
  margin-bottom:0;
  left:0;
  order:4;
  gap:5%;
  display:flex;
  flex:1;
  flex-direction: column;
  flex-wrap: wrap;
}

/*border-radius:4px; box-shadow:rgba(42, 58, 89, 0.75) 0px 0px 0px 999px inset; height:650px; padding:9px; width:auto;*/
/*got rid of display: grid; so that the tab would work*/
.contentbox {
  border-radius:4px;
  border:#270a21 double;
  box-shadow:rgba(93, 60, 70, 0.85) 0px 0px 0px 999px inset;
  flex:1;
  flex-direction:column;
  flex-wrap: wrap;
  overflow:auto;
  max-height:100%;
  padding:10px;
  line-height:1.5em;
}

/*SIDEBAR*/

/* meant for wider screens ; resized ver available */
#sidebar {
  border-radius:4px;
  box-shadow:rgba(39, 10, 33, 1) 0px 0px 0px 999px inset;
  padding:8px;
  overflow:scroll;
  min-height:20vh;
  min-width:300px;
  line-height:1.5em;
  position:relative;
  margin:0;
  order:4;
  display:flex;
  flex:1 1 40px;
  flex-direction: column;
}

/*  overflow:auto; */
#side-navi {
  box-sizing:border-box;
  background-image:url(/assets/sbult.png);
  background-position:0 50%;
  background-size:290px auto;
  background-repeat:no-repeat;
  height:fit-content;
  width:70%;
  border-radius:4px;
  border-style:solid;
  border-width:0px;
  padding:0;
  color:#2a3a59;
  text-align:center;
  line-height:30px;
  margin:5% auto;
}

#side-deco2 {
  display:none;
}

#side-deco {
  position:absolute;
  margin:63vh 0 90px 690px;
  right:0;
  height:47px;
  z-index:40;
}

.notright {
  text-align:right;
}

.clickone {
  width:115px;
  height:35px;
  margin:0;
  transform:skewX(-20deg)
}

.clicktwo {
  width:145px;
  height:35px;
  margin:27px 0px;
  transform:skewX(-20deg)
}

.clickthree {
  width:200px;
  height:35px;
  margin:0;
  transform:skewX(-20deg)
}


/* MEANT FOR NARROWER SCREENS -700px */

/* meant for narrower screens */
@media (max-width:700px){

body {
    font-family: "PixelOperatorMonoBold";
    background-image:url(/assets/background1.png);
    background-position: 50% 10%;
    background-size: 1000px;
    background-color:#260a21; /* rgba(38,10,33,25); <- i attempted to layer this over bg-image but no such luck :( */
    color: white;
    font-size: 1.05em;
    line-height: 1.5em;
}

button {
  font-family: "PixelOperatorMonoBold";
    color: white;
    font-size: 1.5em;
    line-height: 1.5em;
}

#bestbox {
  min-height: 80vh;
  margin: 0;
}

.clickable {
  border:none;
  border-color:#fd3449 !important;
  background-color:#5d3c46 !important;
  opacity: 1;
  transition: 0.7s, transform 0.7s;
}

.clickable:hover {
  background-color:#a4838d !important;
  margin-right:0;
  transition: 0.7s, transform 0.7s;
}

.container {
  position: relative;
  min-height:75vh;
  max-height:75vh;
  margin:15px 2% 0 2%;
  display:flex;
  flex:1;
  flex-direction: column;
  flex-wrap: nowrap;
}

header {
  background-color:rgb(93, 60, 70);
  background-size:100%;
  box-sizing: border-box;
  height: 50px;
  width: 100%;
  margin:4px 0px;
  border-radius:2px;
  border-style:solid;
  border-width:1px;
  border-color:rgba(255, 255, 255, 0.5);
}

#header-txt {
  position:absolute;
  margin:40px 0 0 3.5%;
  text-align:start;
  text-transform:uppercase;
  font-weight:700;
  -webkit-text-stroke:5px transparent;
  -webkit-text-stroke-fill:rgb(37, 36, 102);
  background:url(/assets/background1.png) no-repeat;
  background-clip:text;
  z-index:40;
}

#contentbox-border {
  box-shadow: none;
  max-width:100%;
  min-height:60vh;
  max-height:60vh;
  flex-wrap: nowrap;
}

#sidebar {
  border-radius:4px;
  box-shadow:rgba(39, 10, 33, 1) 0px 0px 0px 999px inset;
  padding:15px 0;
  box-sizing:border-box;
  overflow:scroll;
  min-height:60px;
  max-height:90px;
  line-height:1.5em;
  position:relative;
  margin:0 0 10px 0;
  right:0px;
  order:3;
}

#side-icon {
  display:none;
}

#side-navi {
  background-image:none;
  background-position:50%;
  background-repeat:no-repeat;
  width:100% !important;
  margin:auto;
}

#side-deco2 {
  display:block;
  position:absolute;
  margin:0 390px 0 0;
  right:0;
  height:47px;
  z-index:40;
  pointer-events:none;
}

#side-deco {
  position:absolute;
  margin:5vh 0 90px 690px;
  right:0;
  height:47px;
  z-index:40;
  pointer-events:none;
}

.notright {
  text-align:center;
}

.clickone, .clicktwo, .clickthree {
  width:25%;
  height:60px;
  margin:0;
  transform:skewX(-15deg)
}

/* there's simply not enough space 4 that */
.nospace {
  display:none;
}

.colmidclick {
  margin:0;
}

}


/* animations */

.fade {
  opacity: 0.1;
  animation: fadeIn 2s forwards;
}

.fade .contentslow {
  opacity: 0;
  animation: fadeIn 2.5s forwards;
}

@keyframes fadeIn {
  to {
  opacity: 1;
  }
}


/* EXTERNAL CODE. additional context: 'i did not write the code for this' */

scarf1{
    width:75px;
    height:450px;
    position:fixed;
    margin:-70px 0px 0px 0px;
    right:120px;
    transition: all 1s, transform 1s;
    -moz-transition: all 1s, -moz-transform 1s;
    -webkit-transition: all 1s, -webkit-transform 1s;
    -o-transition: all 1s, -o-transform 1s;
    opacity:0.60;
}

scarf1:hover{
    margin-top:-30px;
    transition: all 1s, transform 1s;
    -moz-transition: all 1s, -moz-transform 1s;
    -webkit-transition: all 1s, -webkit-transform 1s;
    -o-transition: all 1s, -o-transform 1s;
    opacity:1.00;
}




/*ok fine im going to make a qnb page css here. ok*/
/*maybe make separate css file? for organization*/

.qnbbestbox {
  background-image:url();
  background-size: 1000px;
  border: 1px solid #000;
  border-radius: 4px;
  display: grid;
  height: 700px;
  width: 1100px;
  margin: 0px auto;
}