.sidebar {
  /* background-color: #8df0cb; */
  /* background: linear-gradient(180deg, rgba(255, 113, 206, 255) 0%, rgba(141, 240, 203, 255) 80%, rgba(255, 255, 255, 0) 100%); */
  /* background: linear-gradient(180deg, rgba(255, 255, 255, 255) 0%, rgba(255, 255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%); */
  background-image: url("/img/sidebar_background2.png");

  border-radius: 2px;
  margin-top: 55px;
  width: 150px;
  height: 550px;

  position: fixed;
}

.vertical_sidebar {
  /* background-color: rgba(141, 240, 203, 255); */
  background: linear-gradient(180deg, rgba(255, 113, 206, 255) 0%, rgba(141, 240, 203, 255) 100%);
  /* background-image: url("/img/sidebar_background.png"); */

  border-color: black;
  border-width: 1px;
  border-style: solid;

  display: block;

  margin-top: -130px;
  margin-left: -5px;
  margin-right: -5px;
  width: 110%;

  position: fixed;

  visibility: hidden;

  text-align: center;
}

@media (width < 850px) {
  .sidebar {
    visibility: hidden;
  }
  .vertical_sidebar {
    visibility: visible;
  }
}

.header {
  display: block;
  margin-left: auto; 
  margin-right: 10;

  text-align: center;
}

.pfp {
  display: block;
  border-radius: 50%;
  margin-top: 50px; 
  margin-left: auto; 
  margin-right: auto;
  width: 80px;
}

.header_text {
  margin-top: 2px;
  margin-bottom: 2px;
}

@media (orientation: portrait) and (pointer: none) {
  .header_text {
    font-size: 1.85vh;
  }
}

.sidebar_link_current {
  background-color: var(--pl_lineart_blue);

  border-radius: 3px;

  display: block;
  margin-top: 5px; 
  margin-bottom: 5px; 
  margin-left: 12px;
  margin-right: 12px;
  height: 24px;

  color: white;

  text-align: center;
  line-height: 24px;
}

@media (orientation: portrait) and (pointer: none) {
  .sidebar_link_current {
    font-size: 1.85vh;
  }
}

.sidebar_link {
  border-radius: 3px;

  display: block;
  margin-top: 5px;
  margin-bottom: 5px; 
  margin-left: 12px;
  margin-right: 12px;
  height: 24px;

  color: black;

  text-align: center;
  line-height: 24px;

  transition: color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}

@media (orientation: portrait) and (pointer: none) {
  .sidebar_link {
    font-size: 1.85vh;
  }
}

@media (width < 850px) {
  .sidebar_link_current {
    display: inline flow-root;
  }
  .sidebar_link {
    display: inline flow-root;
  }
}

.sidebar_link:hover {
  background-color: var(--pl_lineart_green);

  border-radius: 3px;

  /* display: block; */
  margin-top: 5px;
  margin-bottom: 5px; 
  margin-left: 12px;
  margin-right: 12px;
  height: 24px;

  color: white;

  text-align: center;
  line-height: 24px;

  transition: color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}

.sidebar_link_icon_set {
  display: flex;
  margin-top: 5px; 
  margin-bottom: 5px; 
  margin-left: auto; 
  margin-right: auto;
  width: 100%;

  justify-content: center;
  align-items: center;
}

.sidebar_link_icon {
  margin-top: 5px; 
  margin-bottom: 5px; 
  margin-left: 5px; 
  margin-right: 5px;
  width: 24px;

  transition: filter 0.2s ease-in-out;
}

.sidebar_link_icon:hover {
  margin-top: 5px; 
  margin-bottom: 5px; 
  margin-left: 5px; 
  margin-right: 5px;
  width: 24px;

  filter: invert();

  transition: filter 0.2s ease-in-out;
}