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

body {
  background-color: #102;
  color: black;
  font-family: "Victor Mono", monospace;
}

a {
  color: hotpink;
  font-weight: bold;
  cursor: pointer;
}

a:hover {
  color: pink;
}

b {
  color: #ddccff;
  font-variant: small-caps;
}

i {
  color: #ddccff;
  font-variant: small-caps;
}

sup {
  color: hotpink;
}

ul {
  list-style-type: square;
  margin: 0;
  padding: 10px 15px;
}

hr {
  color: #b38ced;
}

h1 {
  display: block;
  margin: 0.67em 0 0.67em 0;
  font-size: 50px;
  font-weight: bold;
  font-variant: small-caps;
}

h2 {
  display: block;
  margin: 1em 0 1em 0;
  font-size: 25px;
  font-weight: bold;
  font-variant: small-caps;
}

h3 {
  color: #ddccff;
  font-family: "IM Fell DW Pica", serif;
  font-size: 20px;
  font-variant: small-caps;
}

.header {
  display: flex;
  width: 100%;
  height: 80px;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(52,39,72, 0.5), rgba(52,39,72, 0.5)), url('/fog.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 25px 25px 0px 0px;
  border-color: #1c0c34;
  border-style: solid;
  color: #b38ced;
  font-family: "IM Fell DW Pica", serif;
}

.headermenu {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: #1c0c34;
  border-radius: 0px 0px 25px 25px;
  border-color: #1c0c34;
  border-style: solid;
  color: #b38ced;
  font-family: "IM Fell DW Pica", serif;
  }

.headerbutton {
  margin: 5px;
  padding: 5px 10px;
  background: none;
  border-radius: 10px;
  border-style: none;
  font-family: "IM Fell DW Pica", serif;
  font-size: 20px;
  color: #b38ced;
  cursor: pointer;
  transition: 0.3s;
}

.headerbutton:hover {
  background: #b38ced;
  color: #1c0c34;
}

.sidebar {
  display: flex;
  width: 250px;
  height: 50px;
  margin-top: 5px;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(52,39,72, 0.5), rgba(52,39,72, 0.5)), url('/fog.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 25px 25px 0px 0px;
  border-color: #1c0c34;
  border-style: solid;
  color: #b38ced;
  font-family: "IM Fell DW Pica", serif;
}

.sidebarmenu {
  display: flex;
  width: 250px;
  height: 700px;
  overflow: auto;
  background: #1c0c34;
  border-radius: 0px 0px 25px 25px;
  border-color: #1c0c34;
  border-style: solid;
  color: #b38ced;
  font-size: 15px;
  }
  
.mainpagetitle {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  background-image: linear-gradient(rgba(52,39,72, 0.5), rgba(52,39,72, 0.5)), url('/fog.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 25px 25px 0px 0px;
  border-color: #1c0c34;
  border-style: solid;
  color: #b38ced;
  font-family: "IM Fell DW Pica", serif;
}

.mainpagecontent {
  display: flex;
  width: 100%;
  height: 700px;
  overflow: auto;
  background: #1c0c34;
  border-radius: 0px 0px 25px 25px;
  border-color: #1c0c34;
  border-style: solid;
  color: #b38ced;
  font-size: 15px;
  }
  
.important {
  display: flex;
  padding: 10px 20px 10px 20px;
  background: #b38ced;
  border-color: #1c0c34;
  border-radius: 25px;
  border-style: solid;
  color: #1c0c34;
  font-size: 16px;
  font-weight: bold;
  font-style: oblique;
  }
  
/* Tooltip container */
.tooltip {
  color: hotpink;
  display: inline-block;
  position: relative;
  border-bottom: 1px dotted #1c0c34;
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  display: flex;
  position: absolute;
  visibility: hidden; /* Hidden by default */
  z-index: 1; /* Ensure tooltip is displayed above content */
  width: 200px;
  padding: 10px 20px 10px 20px;
  background: #b38ced;
  border-color: #1c0c34;
  border-radius: 25px;
  border-style: solid;
  text-align: center;
  color: #1c0c34;
  font-weight: bold;
  font-style: oblique;
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* Style the button that is used to open and close the collapsible content */
.sh_collapsible, .bhh_collapsible, .fyis_collapsible, .atl_collapsible, .dvce_collapsible, .tmm_collapsible, .ufh_collapsible, .adst_collapsible, .mvh_collapsible, .rfol_collapsible, .tyis_collapsible, .afh_collapsible {
  width: 100%;
  padding: 10px;
  background: none;
  border-radius: 15px;
  border: none;
  outline: none;
  text-align: left;
  color: #b38ced;
  font-family: "Victor Mono", monospace;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .sh_collapsible:hover, .bhh_collapsible:hover, .fyis_collapsible:hover, .atl_collapsible:hover, .dvce_collapsible:hover, .tmm_collapsible:hover, .ufh_collapsible:hover, .adst_collapsible:hover, .mvh_collapsible:hover, .rfol_collapsible:hover, .tyis_collapsible:hover, .afh_collapsible:hover {
  background-color: #b38ced;
  color: #1c0c34;
}

/* Style the collapsible content. Note: hidden by default */
.sh_list, .bhh_list, .fyis_list, .atl_list, .dvce_list, .tmm_list, .ufh_list, .adst_list, .mvh_list, .rfol_list, .tyis_list, .afh_list {
  overflow: hidden;
  max-height: 0;
  padding: 0 5px;
  font-family: "Victor Mono", monospace;
  transition: max-height 0.2s ease-out;
}