@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300..700&display=swap');
@font-face {
    font-family: GothicPixels;
    src:url("../assets/fonts/GothicPixels.ttf") format("woff2");
}
@font-face {
  font-family: SpaceMono-Bold;
    src:url("../assets/fonts/SpaceMono-Bold.ttf") format("woff2");
}


body {
  background-color: rgb(0, 0, 0);
  height: 16rem;
  background-image: radial-gradient(circle, rgb(36, 45, 56) 2px, rgb(0, 0, 0) 2px);
  background-size: 2.5rem 2.5rem;
  background-position: center center;
}

.menu{
  padding: 15px;
  font-family: "GothicPixels";
  font-size: 1.5vw;
  color: rgb(197, 197, 233);

}


.ui-btn {
  --btn-default-bg: rgba(41, 41, 41, 0);
  --btn-padding: 15px;
  --btn-hover-bg: rgba(51, 51, 51, 0);
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #00ff62;
  --default-btn-color: rgb(197, 197, 233);
  --font-size: 1.5vw;
  --font-weight: 100;
  --font-family:"GothicPixels";
}

.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  border: none;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
}

.ui-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn:hover, .ui-btn:focus {
  background: var(--btn-hover-bg);
}

.ui-btn:hover span, .ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before, .ui-btn:focus span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "№:0";
  }

  30% {
    content: "#{+.";
  }

  35% {
    content: "@}-?";
  }

  40% {
    content: "?{4@%";
  }

  45% {
    content: "=.,^!";
  }

  50% {
    content: "?2@%";
  }

  55% {
    content: "\;1}]";
  }

  60% {
    content: "?{%:%";
    right: 0;
  }

  65% {
    content: "|{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}


.link{
  font-family: "GothicPixels";
  position: sticky;
  font-size: 2vw;
  padding: 12px;
}

a{
 color:rgb(255, 255, 255);
 text-decoration: none; 
 text-align: center;
}

.imgg{
  display: block;
  width: 15vw;
  margin-left: auto;
  margin-right: auto;
  width: 80% auto;
  border-radius: 50%;
  margin-bottom: 100px;
  filter:grayscale(100%) drop-shadow(0px 10px 10px #161633) ;
}

.main{
  font-family: SpaceMono-Bold;
  min-height: 25vw;
  font-size: 1vw;
  color: white;
  display: block;
  width: 85%;
  margin: auto;
  background-color: rgb(21, 21, 29);
  outline-style: solid;
  border-style: none none solid none;
  border-width: 10px;
  padding: 2%;
  border-radius: 0px;
}

.headd{ 
  position: sticky;
  text-align: center;
  background-color: rgb(36, 36, 48);
  width: 80% auto;
  max-height: 10;
  outline-style: solid;
  border-style: none none solid none;
  border-width: 10px;
  padding: 8px;
  margin: 50px;
  border-radius: 2px;
}

.icons{
  margin-left: 10px;
  margin-right: 10px;
  font-family: monospace;
  text-decoration: none;
}

.icons:hover{
  color: black;
}

.footer{
  position:relative;
  bottom: 0;
  padding: 5%;
  text-align: center;
  letter-spacing: 3px;
  color: white;

}

.folder-container {
  display: flex;
  margin-top: 40px;
  min-height: 350px;
  gap: 0;
  position: relative;
}

.folder-tabs {
  display: flex;
  flex-direction: row;
  /* align-items: stretch; */
  background: #32332e00;
  min-width: 72px;
  z-index: 2;
}

.folder-tab {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  height: 30vh;
  width: 45px;
  margin-left: -5px;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  padding-top: 10px;
  margin-top: 10vh;
  filter: brightness(0.7);
  cursor:grab;
}

.cynfolder{
  z-index: 99998;
  background-color: #938E7C;
}

.cyntab{
  font-family: "Bungee Shade", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 1.7em;
  z-index: 99999;
  background-color: #938E7C;
  color: #535148;
}

.basfolder{
  z-index: 9998;
  background-color: rgb(143, 45, 45);
}

.bastab{
  font-family: "Fascinate Inline", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1.7em;
  z-index: 9999;
  background-color: rgb(143, 45, 45);
  color: rgb(80, 31, 31);
}

.pfolder{
  z-index: 998;
  background-color: rgb(15, 59, 100);
}

.ptab{
  font-family: "Rubik Glitch", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1.7em;
  z-index: 999;
  background-color: rgb(15, 59, 100);
  color: rgb(43, 110, 173);
}

.folder-tab-body{
  writing-mode: vertical-lr;
  text-orientation: mixed;
  /* background-color: white; */
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  margin-left: -45px;
  min-width: 10px;
  padding: 24px 7px;
  min-height: 70vh;
  font-weight: bold;
  font-family: 'Roboto Mono', 'JetBrains Mono', monospace;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  box-shadow: 
    rgba(0, 0, 0, 0.568) 24px 0px 55px,
    rgba(0, 0, 0, 0.12) 12px 0px 30px,
    rgba(0, 0, 0, 0.12) 8px 0px 6px,
    rgba(0, 0, 0, 0.17) 16px 0px 13px,
    rgba(0, 0, 0, 0.09) 4px 0px 5px;
  min-width: 90px;
  filter: brightness(0.7);
}

.folder-tab.active{
  filter: brightness(1);
}

.folder-tab-body.active{
  width: 150px;
  box-shadow: none;
  filter: brightness(1);
}

.folder-content-container {
  flex: 1;
  position: relative;
  overflow: visible;
  background-color: rgb(139, 100, 25);
  margin-left: 10px;
  border-radius: 0px 0px 0px 0px;
  border-width: 0px 0px 6px 6px;
  border-style: solid;
  border-color: rgb(88, 58, 0);
  background-image: linear-gradient(
    50deg,
    rgb(139, 100, 25) 50%,
    rgb(129, 92, 22) 60%,
    rgb(139, 100, 25) 50%
  );
  background-size: 1em 1em;
  background-repeat: space;
  box-shadow: rgb(156, 113, 31) 3px 3px 6px 0px inset, rgb(95, 67, 16) -3px -3px 6px 1px inset;
}

.folder-content {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 70vh;
  background: rgb(250, 250, 240);
  box-shadow: 4px 0 44px 0 rgba(44,44,44,0.06);
  border-radius: 2px;
  margin: 20px 20px 0px 20px;
  z-index: 1;
  animation: folder-expand 0.5s cubic-bezier(.44,.58,.58,1.17);
  padding-left: 50px;
  background-image: linear-gradient(
      90deg,
      transparent 50px,
      #ffb4b8 50px,
      #ffb4b8 52px,
      transparent 52px
    ),
    linear-gradient(#e1e1e1 0.1em, transparent 0.1em);
  background-size: 100% 20px;
  box-shadow: 
    rgba(0, 0, 0, 0.25) 0px 54px 55px, 
    rgba(0, 0, 0, 0.12) 0px -12px 30px, 
    rgba(0, 0, 0, 0.12) 0px 4px 6px, 
    rgba(0, 0, 0, 0.17) 0px 12px 13px, 
    rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

@keyframes folder-expand {
  from { width: 0; opacity: 0; }
  to   { width: 80%; opacity: 1; }
}

.folder-content.active {
  display: block;
}

.markdown-scroll {
  overflow-y: auto;
  height: 100%;
  padding: 25px;
  height: 64vh;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: #212117;
}

.linkk{
  color: blue;
  font-family: "Noto Emoji";
  font-optical-sizing: auto;
  font-style: normal;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background-color: #ffd883;
  color: rgb(0, 0, 0);
}

.tg th, .tg td {
  border: 1px solid #fc7100;
  padding: 12px 15px;
  text-align: left;
  word-break: normal;
}

.tg th {
  background-color: #fc7100;
  color: #ffffff;
  font-weight: 600;
}

.tg tr:nth-child(even) {
  background-color: #ffc037;
}

.tg tr:hover {
  background-color: #ffae00;
  transition: background-color 0.2s ease-in-out;
}

.tg .tg-0pky {
  vertical-align: top;
}

.tg caption {
  caption-side: top;
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
  padding: 10px;
}

.box {
  background-color: beige;
  z-index: 999999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: rgba(#000, 0.5);
  width: 100%;
  max-width: 600px;
  padding: 5px;
  border: 2px solid #b78846;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, 
  rgba(0, 0, 0, 0.12) 0px -12px 30px, 
  rgba(0, 0, 0, 0.12) 0px 4px 6px, 
  rgba(0, 0, 0, 0.17) 0px 12px 13px,
  rgba(0, 0, 0, 0.09) 0px -3px 5px;
  &:before, &:after {
    content: "•";
    position: absolute;
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: #b78846;
    border: 2px solid #b78846;
    line-height: 12px;
    top: 5px;
    text-align: center;
  }
  &:before {
    left: 5px;
  }
  &:after {
    right: 5px;
  }
  .megamind {
    position: relative;
    border: 2px solid #b78846;
    padding: 40px;
    &:before, &:after {
      content: "•";
      position: absolute;
      width: 14px;
      height: 14px;
      font-size: 14px;
      color: #b78846;
      border: 2px solid #b78846;
      line-height: 12px;
      bottom: -2px;
      text-align: center;
    }
    &:before {
      left: -2px;
    }
    &:after {
      right: -2px;
    }
  }
}

.scroller{
  overflow-y: auto;
  max-height: 60vh;
}

.index-H{
  color: #000000;
  font-size: 25px;
  font-weight: 800;
  font-family: "Noto Emoji";
}

.index-H:hover, .index-N:hover{
  font-style: italic;
  text-decoration: underline;
}

.index-N{
  color: #242424;
  font-size: 20px;
}

.table-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  gap: 20px;
  margin: 20px 0;
}


h2{
  text-decoration: underline;
}

mark{
  background-color: #00ff62;
}

.linkk:hover{
  font-style: italic;
}

/* Responsive */
@media (max-width: 700px) {
  .folder-content {
    width: 88vw;
    min-width: 154px;
  }
}


/* CSS lighting */

*
{
	padding: 0px;
	margin: 0px;
}

#wrap
{
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

#lightings
{
	bottom: -60px;
	position: absolute;
	width: 100%;
}


section
{
	/*border-radius*/
  
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	height: 20px;
	width: 100%;
	position: relative;
	margin: auto;

}

#one
{
	/*animation*/
	-webkit-animation: one 5s ease-in-out infinite alternate;
	-moz-animation: one 5s ease-in-out infinite alternate;
	-ms-animation: one 5s ease-in-out infinite alternate;
	-o-animation: one 5s ease-in-out infinite alternate;
	animation: one 5s ease-in-out infinite alternate;
}
@-webkit-keyframes 
one { from {
-webkit-box-shadow: 0 0 250px 20px #473C78;
}

to { -webkit-box-shadow: 0 0 100px 15px #F72A3B; }
}
@-moz-keyframes 
one { from {
-moz-box-shadow: 0 0 250px 20px #473C78;
}

to { -moz-box-shadow: 0 0 100px 15px #F72A3B; }
}
@-o-keyframes 
one { from {
-o-box-shadow: 0 0 250px 20px #473C78;
}

to { -o-box-shadow: 0 0 100px 15px #F72A3B; }
}

@keyframes 
one { from {
box-shadow: 0 0 250px 20px #473C78;
}

to {box-shadow: 0 0 100px 15px #F72A3B; }
}

#two
{
	width: 90%;
	/*animation*/
	-webkit-animation: two 4s ease-in-out infinite alternate;
	-moz-animation: two 4s ease-in-out infinite alternate;
	-ms-animation: two 4s ease-in-out infinite alternate;
	-o-animation: two 4s ease-in-out infinite alternate;
	animation: two 4s ease-in-out infinite alternate;
}
@-webkit-keyframes 
two { from {
-webkit-box-shadow: 0 0 250px 20px #18C499;
}

to { -webkit-box-shadow: 0 0 100px 15px #D8F05E; }
}
@-moz-keyframes 
two { from {
-moz-box-shadow: 0 0 250px 20px #18C499;
}

to { -moz-box-shadow: 0 0 100px 15px #D8F05E; }
}
@-o-keyframes 
two { from {
-o-box-shadow: 0 0 250px 20px #18C499;
}

to { -o-box-shadow: 0 0 100px 15px #D8F05E; }
}

@keyframes 
two { from {
box-shadow: 0 0 250px 20px #18C499;
}

to { box-shadow: 0 0 100px 15px #D8F05E; }
}

#three
{
	width: 80%;
	/*animation*/
	-webkit-animation: three 3s ease-in-out infinite alternate;
	-moz-animation: three 3s ease-in-out infinite alternate;
	-ms-animation: three 3s ease-in-out infinite alternate;
	-o-animation: three 3s ease-in-out infinite alternate;
	animation: three 3s ease-in-out infinite alternate;
}
@-webkit-keyframes 
three { from {
-webkit-box-shadow: 0 0 250px 20px #FFDD00;
}

to { -webkit-box-shadow: 0 0 100px 15px #3E33FF; }
}
@-moz-keyframes 
three { from {
-moz-box-shadow: 0 0 250px 20px #FFDD00;
}

to { -moz-box-shadow: 0 0 100px 15px #3E33FF }
}
@-o-keyframes 
three { from {
-o-box-shadow: 0 0 250px 20px #FFDD00;
}

to { -o-box-shadow: 0 0 100px 15px #3E33FF }
}

@keyframes 
three { from {
box-shadow: 0 0 250px 20px #FFDD00;
}

to { box-shadow: 0 0 100px 15px #3E33FF }
}

#four
{
	width: 70%;
	/*animation*/
	-webkit-animation: four 2s ease-in-out infinite alternate;
	-moz-animation: four 2s ease-in-out infinite alternate;
	-ms-animation: four 2s ease-in-out infinite alternate;
	-o-animation: four 2s ease-in-out infinite alternate;
	animation: four 2s ease-in-out infinite alternate;
}
@-webkit-keyframes 
four { from {
-webkit-box-shadow: 0 0 250px 20px #781848;
}

to { -webkit-box-shadow: 0 0 100px 15px #F2BBE9; }
}
@-moz-keyframes 
four { from {
-moz-box-shadow: 0 0 250px 20px #781848;
}

to { -moz-box-shadow: 0 0 100px 15px #F2BBE9; }
}
@-o-keyframes 
four { from {
-o-box-shadow: 0 0 250px 20px #781848;
}

to { -o-box-shadow: 0 0 100px 15px #F2BBE9; }
}

@keyframes 
four { from {
shadow: 0 0 250px 20px #781848;
}

to { shadow: 0 0 100px 15px #F2BBE9; }
}

#five
{
	width: 60%;
	/*animation*/
	-webkit-animation: five 1s ease-in-out infinite alternate;
	-moz-animation: five 1s ease-in-out infinite alternate;
	-ms-animation: five 1s ease-in-out infinite alternate;
	-o-animation: five 1s ease-in-out infinite alternate;
	animation: five 1s ease-in-out infinite alternate;
}
@-webkit-keyframes 
five { from {
-webkit-box-shadow: 0 0 250px 20px #42F2A1;
}

to { -webkit-box-shadow: 0 0 100px 15px #F4F6AD; }
}
@-moz-keyframes 
five { from {
-moz-box-shadow: 0 0 250px 20px #42F2A1;
}

to { -moz-box-shadow: 0 0 100px 15px #F4F6AD; }
}
@-o-keyframes 
five { from {
-o-box-shadow: 0 0 250px 20px #42F2A1;
}

to { -o-box-shadow: 0 0 100px 15px #F4F6AD; }
}

@keyframes 
five { from {
box-shadow: 0 0 250px 20px #42F2A1;
}

to { box-shadow: 0 0 100px 15px #F4F6AD; }
}