body {
  background-color: rgb(237, 255, 117);
  color: black;
  font-family: 'Courier New', Courier, monospace;
  overflow-x: hidden;
  
  display: flex;
  min-height: 100vh;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



html {
  scrollbar-color: rgb(100, 0, 100) rgb(247, 243, 5);
  scrollbar-width: auto;
}

::-webkit-scrollbar-track {
  background: rgb(247, 243, 5);
}

::-webkit-scrollbar-thumb {
  background: rgb(100, 0, 100);
}



.big-line {
  text-align: left;
  color: rgb(100, 0, 100);
  font-size: xx-large;
  font-weight: bold;
  width: 100%;
}

.bigish-line {
  text-align: left;
  color: rgb(100, 0, 100);
  font-size: x-large;
  font-weight: bold;
  width: 100%;
}

.line {
  text-align: left;
  color: rgb(100, 0, 100);
  font-size: large;
  width: 100%;
}

.bold-line {
  text-align: left;
  color: rgb(100, 0, 100);
  font-size: large;
  width: 100%;
  font-weight: bold;
}

.smol-line {
  text-align: left;
  color: rgb(100, 150, 100);
  font-size: small;
  width: 100%;
}

hr {
  background-color: rgb(195, 252, 8);
  height: 2px;
  border: none;
}

.download-button {
  background-color: rgb(237, 255, 117);
  transition: background-color 0.2s ease;
  
  font-size: 24px;
  color: rgb(0, 0, 100);
  text-decoration: none;
  cursor: default;
}

.download-button a {
  color: inherit;
  display: block;
  cursor: default;
}

.download-button a:active {
  background-color: rgb(132, 255, 0);
}

.download-button:hover {
  background-color: rgb(187, 255, 0);
}

.download-button-reg {
  background-color: rgb(237, 255, 117);
  transition: background-color 0.2s ease;
  
  font-size: large;
  color: rgb(0, 0, 100);
  text-decoration: none;
  cursor: default;
}

.download-button-reg a {
  color: inherit;
  display: block;
  cursor: default;
}

.download-button-reg a:active {
  background-color: rgb(132, 255, 0);
}

.download-button-reg:hover {
  background-color: rgb(187, 255, 0);
}





.new-page-button {
  background-color: rgb(247, 243, 5);
  transition: background-color 0.2s ease;
  
  font-size: 26px;
  color: rgb(100, 0, 100);
  text-decoration: none;
  cursor: default;
}

.new-page-button a {
  color: inherit;
  display: block;
  text-decoration: none;
  cursor: default;
}

.new-page-button a:active {
  background-color: rgb(132, 255, 0);
}

.new-page-button:hover {
  background-color: rgb(187, 255, 0);
}


.dropdown {
  position: relative;
  display: inline-block;
  color: rgb(100, 0, 100);
}

.dropdown-parent {
  background-color: rgb(247, 243, 5);
  transition: background-color 0.2s ease;
  
  font-size: 26px;
  font-family: 'Courier New', Courier, monospace;
  color: inherit;
  text-decoration: none;
  text-align: left;
  
  border: none;
  
  width: 250px;
}
.dropdown-parent:hover {
  background-color: rgb(187, 255, 0);
}
.dropdown-parent:active {
  background-color: rgb(132, 255, 0);
}


.dropdown-content {
  background-color: rgb(247, 243, 5) !important;
  transition: background-color 0.2s ease;
  
  display: none;
  
  font-size: 26px;
  font-family: 'Courier New', Courier, monospace;
  color: inherit;
  border: none;
  text-decoration: none;
}

/* Force the dropdown to appear when the 'show' class is present */
.dropdown-content.show {
  display: block !important;
}

.dropdown-content a {
  padding: 0px 0px 0px 40px;
}






.side-bar {
  position: fixed;
  width: 250px;
  height: 800px;
  background-color: rgb(247, 243, 5);
}

.side-bar-ghost {
  width: 250px;
  height: 100vh;
  background-color: rgb(247, 243, 5);
  display: flex;
}

.text-container {
  /*transform: translateX(250px);*/
  flex: 1;
  padding: 20px;
  background-color: rgb(237, 255, 117);
  border-left: 2px solid rgb(100, 0, 100);
  border-right: 2px solid rgb(100, 0, 100);
}