/* 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." */

@font-face {
  font-family: "PixeloidSans";
  src: url("/PixeloidSans.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  background: linear-gradient(to bottom, #22032e 0%, #0f0e23 100%);
  background-color: #0f0e23;
  font-family: "PixeloidSans", sans-serif;
  overflow: visible;
  filter: drop-shadow(2 2 5px #ffffff) brightness(150%);
}



/* stuff for the top bar, this took a while to figure out lol, thank you gpt for helping me somehwat learn this properly */

.top-bar-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 35%;
  height: auto;
  display: flex;                  /* use flexbox */
  justify-content: space-between; /* left and right stick to edges */
  align-items: center;            /* vertical centering if heights differ */
  padding: 0 0px;                /* optional spacing from edges */
  z-index: 100;
}

.top-bar-left img, .top-bar-right img {
  width: 100%;
  height: auto;
  display: block;
}

.top-bar-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
  display: flex;                  /* use flexbox */
  justify-content: space-between; /* left and right stick to edges */
  align-items: center;            /* vertical centering if heights differ */
  padding: 0 0px;                /* optional spacing from edges */
  z-index: 99;
}

.top-bar-left.visible, .top-bar-right.visible {
  transform: TranslateY(0);
  transition: transform 0.6s ease-out
}

.top-bar-left.hidden, .top-bar-right.hidden {
  transform: TranslateY(-50vh);
  transition: transform 0.6s ease-in
}




/* stuff for the top left, the title and my bean :3 */

.top-bar-left .title, .top-bar-left .bean {position: absolute}

.top-bar-left .title {
  width: 90%;
  height: auto;
  top: 2%;
  left: 2%;
}

.top-bar-left .bean {
  width: 20%;        /* % of bar width */
  height: auto;
  bottom: 19.75%;        /* % from bottom */
  right: 25%;         /* % from right */
}



/* main page stuff */

.main {
  margin-top: 250px;
  padding: 20px;
  background-color: #0f0e23;
  width: 1200px;
  height: 1800px;
  position: relative;
  left: 25px;
  margin-left: auto;
  margin-right: auto;
  
}


/* idk how to java script effectively, thank you internet */

canvas#particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* so clicks pass through */
  z-index: -1;          /* behind everything else */
}