/* 
 * What follows are a few rules that make CSS more predictable to work with. 
 * You don't have to understand these, just scroll down to where the file ends.
 * If you are curious, this practice is sometimes called a "CSS reset" or "CSS Preflight", more about that here: https://www.youtube.com/watch?v=RReMYwB594g
 * — Love, 221027
 */

 /* Prevent padding and border from affecting element width. */
 *, ::before, ::after {
  box-sizing: border-box;
  }

/* Remove the margin in all browsers */
body {
  margin: 0;
  line-height: inherit;
}

/* Remove the default font size and weight for headings. */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}


/* Removes the default spacing for appropriate elements. */
blockquote, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0;
}

ol, ul, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. */
img, video {
  max-width: 100%;
  height: auto;
}

/******************************************************************/
/*  ↓  The CSS Reset is over and you can now write your code!  ↓  */

body {
  background-image: url("div/background.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: black;
}
    
.logo {
  position: fixed;
  left: 4px;
  bottom: 2px;
  width: 2%;   
  height: auto;   
  z-index: 999;
}

.line {
  width: 94%;
  height: 2px;
  background-color: rgb(255, 255, 255);
  margin-top: 4vh;
  margin-bottom: 2vh;
  opacity: 0.4;
}



/* ======================================================================================================================================================
  ----------------------------------------------------------------Menu Bar Items-------------------------------------------------------------------------
======================================================================================================================================================= */

/* MENUBAR (main vertical bar) */
.menubar{
  position: fixed;
  top: 0;
  left: 0;                        
  height: 130vh;        
  aspect-ratio: 255 / 2048;

  /* hide bar but let a vh-based piece peek out */
  transform: translateX(calc(-100% + 1.6vh));

  transition: transform 0.13s ease-in-out;
  transition-delay: 0.2s;

  z-index: 1;
  pointer-events: auto;
}

.menu-wrap:hover .menubar{
  transform: translateX(0);
  transition-delay: 0s;
}
.menubar > img{
  display: block;
  width: 100%;
  height: 100%;
}

/* MENUBAR2 (faint bar shown on load) */
@keyframes menubarHideOnLoad{
  from { left: 0; }
  to   { left: -240px; }
}

@keyframes menubar2HideOnLoad{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% + 1.6vh)); }
}

.menubar2{
  position: fixed;
  top: 0;
  left: 0;
  height: 130vh;
  aspect-ratio: 255 / 2048;

  transform: translateX(0);
  animation: menubar2HideOnLoad 0.13s ease-in-out 0.145s 1 both;

  opacity: 0.25;
  z-index: 0;
  pointer-events: none;
}

.menubar2 > img{
  display: block;
  width: 100%;
  height: 100%;
}

/* HOVER ZONE (how easy it is to trigger the menu) */
.menu-wrap{
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;              /* make bigger/smaller */
  height: 100vh;
  z-index: 5;
  pointer-events: none;      /* wrapper ignores clicks */
}

/* DROPDOWN ORIGIN (where the boxes start) */
.menubox{
  position: absolute;
  top: 10px;                 /* move down/up */
  left: 20px;                /* move right/left */
  z-index: 2;
  pointer-events: none;      /* closed */
}
.menu-wrap:hover .menubox{
  pointer-events: auto;      /* open */
}


/* shared: stacked closed state */
.menubox > div{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(0);
  transition: transform 0.18s ease-in, opacity 0.25s ease-in;
  pointer-events: none;
}


.menubox1{
  height: 10.3vh; 
  aspect-ratio: 150 / 83;
}

.menubox2{
  height: 10.3vh; 
  aspect-ratio: 150 / 83;
}           

.menubox3{
  height: 10.3vh; 
  aspect-ratio: 150 / 83;
}       

/* make the <a> fill the box */
.menubox > div > a{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* make the PNG fill the box */
.menubox > div img{
  display: block;
  width: 100%;
  height: 100%;
}

/* OPEN POSITIONS (separate scaling from spacing) */
.menu-wrap:hover .menubox1{
  opacity: 1;
  transform: translateY(0vh);          
  transition-delay: 0s;
  pointer-events: auto;
}
.menu-wrap:hover .menubox2{
  opacity: 1;
  transform: translateY(10.8vh);        
  pointer-events: auto;
}
.menu-wrap:hover .menubox3{
  opacity: 1;
  transform: translateY(21.6vh);       
  transition-delay: 0.10s;
  pointer-events: auto;
}

/* OPTIONAL: text overlay shouldn't steal clicks */
.menuboxtextFrame{
  pointer-events: none;
  position: absolute;
  inset: 0;
}



/* ======================================================================================================================================================
  -----------------------------------------------------------------Font and Text-------------------------------------------------------------------------
======================================================================================================================================================= */

@font-face {
  font-family: "Sunflower";
  src: url("Fonts/Sunflower/Sunflower-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "NTR";
  src: url("Fonts/NTR/NTR-Regular.ttf") format("truetype");
}

.Heading {
  position: absolute;
  bottom: 0px;
  z-index: 2;
  left: 12%;
  display: flex;
  align-items: center;     
  font-family: "NTR";
  font-size: 1.6cqw;
  color: goldenrod;
  text-align: center;
  height: 13%;
  opacity: .9;
}

.MainHeading {
  display: flex;    
  justify-content: left; 
  width: 100%;
  height: 8vh;         
  border-radius: 10px;
  font-family: "Sunflower";
  font-weight: 500;
  font-size: 3cqw;
  opacity: .9;
  color: goldenrod;
  padding-top: 1vh;
  padding-left: 3.2%;
}

.MainHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.MainHeader .MainHeading {
  width: auto;
  flex: 1;
}

.symbol-picker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: 3.2%;
  padding: 0.35rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(218, 165, 32, 0.35);
  background: rgba(0, 0, 0, 0.45);
  font-family: "Sunflower";
  color: goldenrod;
}

.symbol-picker label {
  font-size: 0.85cqw;
  opacity: 0.8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.symbol-picker select {
  background: rgba(0, 0, 0, 0.7);
  color: #e8c56a;
  border: 1px solid rgba(218, 165, 32, 0.45);
  border-radius: 8px;
  padding: 0.25rem 0.65rem;
  font-family: "Sunflower";
  font-size: 0.95cqw;
}

.symbol-picker select:focus {
  outline: 2px solid rgba(218, 165, 32, 0.6);
  outline-offset: 2px;
}

.FirstHeading {
  display: flex;    
  justify-content: left;
  width: 100%;
  opacity: .8;
  font-family: "Sunflower";
  font-size: 1.8cqw;
  margin: 0.4em 0;
  color: goldenrod;
  padding-top: 4.5vh;
  padding-left: 3.2%;
  padding-bottom: 1vh;
}

@media (max-width: 900px) {
  .MainHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 1vh;
  }

  .symbol-picker {
    margin-right: 3.2%;
    align-self: flex-end;
  }

  .symbol-picker label {
    font-size: 3vw;
  }

  .symbol-picker select {
    font-size: 3.2vw;
  }
}

.menuboxtext {
 opacity: .9;
  font-family: "Sunflower";
  font-size: 1.75cqw;
  color: goldenrod;
  position: absolute;
  top: 20%;
  left: 17%;
}

.menuboxtext2 {
  position: absolute;
  opacity: 0.74;
  font-family: "MTR";
  top: 60%;
  left: 35%;
  color: goldenrod;
  font-size: 0.8cqw;
}



/* ======================================================================================================================================================
  -------------------------------------------------------------------Chart Stuff-------------------------------------------------------------------------
======================================================================================================================================================= */

.Informationbox {
  margin-top: 3%;
  margin-bottom: 8%;
  margin-left: 3%;
  margin-right: 1.5%;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  border-radius: 10px;
}

.chartboxflex {
  opacity: 0.9;
  display: flex;
  justify-content: row;
  align-items: left;
  width: 100%;
  height: 100%;
  padding-left: 3.5%;
  gap: 3%;
  padding-bottom: 3%;
}

.chartboxflex.expanded-context {
  position: relative;
  z-index: 2500;
}

.Chart{
  position: absolute;
  width: 98.2%;
  height: 85.6%;
  z-index: 0;
  margin-left: 1.7%;
  top: 0px;
  transition: transform 0.s ease, z-index 0s;
  background-color: #00141b;
}

.Chart.expanded {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  height: 80vh;
  width: 90vw;
  outline: 2px solid white;
}

.chart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.chart-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.close {
  position: absolute;
  top: 2%;
  left: 1.5%;
  width: ayto;
  height: 3vh;
  display: none;
  cursor: pointer;
  z-index: 101;
}

.Chart.expanded .close {
  display: block;
}

.hud {
  position: absolute;
  z-index: 1;
  left: 0px;
  bottom: 0px;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.expand {
  position: absolute;
  width: 5.4%;
  height: auto;
  z-index: 2;
  left: 1%;
  top: 1.3%;
}

.info {
  position: absolute;
  width: 6.7%;
  height: auto;
  z-index: 2;
  bottom: 4%;
  left: 2%;
  cursor: pointer;
}



.chartbox {
  position: relative;
  width: 30%;
  aspect-ratio: 449 / 251;
}

.Descriptor {
  opacity: 0;
  left: 2px;
  pointer-events: none;
  transition: opacity 0.2s ease;
  position: absolute;
  width: 99%;
  height: 80%;
  top: 0px;
  font-family: "NTR";
  font-size: 1cqw;
  color: goldenrod;
  text-align: left;
  line-height: 130%;
  padding-left: 0.3vw;
  padding-right: 0.3vw;
  padding-top: 0.2vh;
  padding-bottom: 0.1vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 3;
  border-radius: 1px;
  outline: 2px solid rgb(255, 255, 255);
}

.Descriptor.show {
  opacity: 1;
  pointer-events: auto;
}