/* +++++++++++++++++++++++++++++++++++++++++ */
/*                  WRAPPERS                 */
/* +++++++++++++++++++++++++++++++++++++++++ */

.left_side_wrapper {
  z-index: 1;
}

.left_stack_wrapper {
  margin-top: 150px;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.left_sidebar {
  display: flex;
  flex-direction: column;
  gap: 5px;

  width: 230px;
  margin-inline: 5px;
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                    BADGE                  */
/* +++++++++++++++++++++++++++++++++++++++++ */

.badge_box {
  width: 1px;
  height: 1px;

  margin-left: 97px;
  margin-top: 177px;
}

.badge_img {
  height: 25px;
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                DISPLAY IMAGE              */
/* +++++++++++++++++++++++++++++++++++++++++ */

.display_box {
  width: 1px;
  height: 1px;
  margin-right: 270px;
}

.display_img {
  height: 160px;
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*               LEFT SIDEBAR                */
/* +++++++++++++++++++++++++++++++++++++++++ */

/* +++ */
/* PFP */
/* +++ */

.pfp {
  height: 235px;
}

.pfp {
  /* TEST */
  background-image: conic-gradient(
    from var(--angle),
    #164580,
    #1f2b44,
    #1a2944
  );
  animation: 4s spin linear infinite;
}

.pfp_img {
  background-position: -50px 0px;
  background-size: cover;
  background-image: url(img/pictures/7b6.gif);
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*          NAVIGATION - CONTAINER           */
/* +++++++++++++++++++++++++++++++++++++++++ */

.navigation {
  height: 330px;
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*               SUBMENU TITLE               */
/* +++++++++++++++++++++++++++++++++++++++++ */

.submenu_list_title {
  border-radius: 4px;
  display: flex;
  color: var(--menu-color);
  background-color: var(--menu-background-color);
  border: var(--border) var(--clr-border);
  font-size: 0.7rem;
  font-weight: bolder;

  details summary {
    text-align: center;
    color: var(--menu-color);
    padding: 5px;
    padding-bottom: 10px;
  }
}

/* For submenu Dropdown */
.navigation_content {
  overflow: auto;

  details summary {
    display: flex;
  }

  details[open] ul {
    padding-top: 5px;
    padding-left: 1px;
  }
}

.nv_bt_pd {
  padding: 4px 20px;
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                 GIF IMAGES                */
/* +++++++++++++++++++++++++++++++++++++++++ */

.nav_button_img:before {
  content: url(img/pixel/pixel2.gif);
  margin-right: 5px;
}

.nav_button_img1:before {
  content: url(img/pixel/pixel.webp);
  margin-right: 10px;
}

.nav_button_img2:after {
  content: url(img/pixel/guitar.webp);
  margin-left: 10px;
}

.nav_button_img3:after {
  content: url(img/pixel/pixel5.webp);
  margin-left: 10px;
}

.nav_button_img4:before {
  content: url(img/pixel/pills.gif);
  margin-right: 10px;
}

.submenu_list_title:before {
  content: url(img/pixel/pixel1.webp);
  margin-right: -5px;
}

.sub_img:before {
  content: url(img/pixel/pixel4.webp);
  margin-right: 10px;
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                    IMG                    */
/* +++++++++++++++++++++++++++++++++++++++++ */

.rd_box {
  height: 235px;
}

.rd_box_img {
  background-size: cover;
  background-position: center;
  background-image: url(img/gif-webp/glitch-flip.gif);
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                 PLACEHOLDER               */
/* +++++++++++++++++++++++++++++++++++++++++ */

.placeholder {
  height: 235px;
}

.placeholder_img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(img/gif-webp/undercon.gif);
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                    IMG1                   */
/* +++++++++++++++++++++++++++++++++++++++++ */

.rd_box1 {
  height: 235px;
}

.rd_box_img1 {
  background-size: cover;
  background-position: center;
  background-image: url(img/gif-webp/glitch3.webp);
}