/* +++++++++++++++++++++++++++++++++++++++++ */
/*               CURSOR STYLES               */
/* +++++++++++++++++++++++++++++++++++++++++ */

html,
body {
  cursor: none;
}

.site_wide_cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 2;
  background-image: url(img/cursor/b_w.gif);
  background-size: cover;
  transform-origin: center;
  transition: transform 0.02s linear;
}

.box_cursor {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  background-size: cover;
  transform-origin: center;
  transition: transform 0.1s ease-out;
}

.cursor_1 {
  /* Position */
  top: 10%;
  left: 3%;

  width: 28px;
  height: 33px;
  background-image: url(img/cursor/skulldice.gif);
}

.cursor_3 {
  /* Position */
  top: 8%;
  left: 3%;

  width: 28px;
  height: 33px;
  background-image: url(img/cursor/gracefuldice.gif);
}

.cursor_2 {
  /* Position */
  top: -80%;
  left: -20%;

  width: 70px;
  height: 87px;
  background-image: url(img/cursor/dmg.gif);
}

.cursor_4 {
  /* Position */
  top: 10%;
  left: 3%;

  width: 39px;
  height: 53px;
  background-image: url(img/cursor/magichat.gif);
}

.cursor_5 {
  /* Position */
  top: 10%;
  left: 3%;

  width: 45px;
  height: 30px;
  background-image: url(img/cursor/a-hanekuri01.gif);
}

.cursor_6 {
  /* Position */
  top: 7%;
  left: 9%;

  width: 25px;
  height: 40px;
  background-image: url(img/cursor/marshmallonyuug.gif);
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                  ToolTip                  */
/* +++++++++++++++++++++++++++++++++++++++++ */

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltiptext {
  margin-left: 120px;
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 100;
  transition:
    visibility 0.3s,
    opacity 0.3s;
  opacity: 0;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* <div class="tooltip"> */
/* <span class="tooltiptext">testing</span> */

/* +++++++++++++++++++++++++++++++++++++++++ */
/*            INTERACTION EFFECTS            */
/* +++++++++++++++++++++++++++++++++++++++++ */

.site_wide_cursor.active,
.box_cursor.active {
  transform: scale(1.5);
  transition: transform 0.3s ease;
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*             INTERACTION EFFECTS           */
/* +++++++++++++++++++++++++++++++++++++++++ */

/* Text selection highlight */
::selection {
  background: rgba(77, 74, 81, 0.9);
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                TABS STYLING               */
/* +++++++++++++++++++++++++++++++++++++++++ */

input[type="radio"] {
  display: none;
}

input:checked + label .tab_name {
  background: var(--menu-active-background-color);
  font-weight: bold;
  font-size: 20px;
}

input:checked + label .tab_content {
  opacity: 1;
  z-index: 1;
}

.tab_name {
  cursor: help;
  transition:
    background-color 0.3s ease,
    font-weight 0.3s ease,
    font-size 0.3s ease;
}

.tab_content {
  opacity: 0;
  z-index: 0;
  transition:
    opacity 0.3s ease,
    z-index 0.3s ease;
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*               HOVER EFFECTS               */
/* +++++++++++++++++++++++++++++++++++++++++ */

.item:hover {
  animation-play-state: paused !important;
  cursor: cell;
  z-index: 1;
}

.item img {
  pointer-events: auto;
  transition:
    transform 0.3s ease,
    outline 0.3s ease;
}

.item:hover > img {
  outline: 10px double hotpink;
  animation: spins 1.5s linear infinite;
}

.submenu_list_title:hover {
  transition: var(--transition-hover);
  background-color: var(--clr-border);
}

.nav_button:hover {
  transition: var(--transition-hover);
  background-color: var(--menu-active-background-color);
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                 ANIMATIONS                */
/* +++++++++++++++++++++++++++++++++++++++++ */

@keyframes spins {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*               CURSOR BOXES                */
/* +++++++++++++++++++++++++++++++++++++++++ */

.box {
  cursor: auto;
}

.dash_1,
.dash_3,
.dash_5,
.dash_7,
.pfp_img,
.right_1,
.right_2,
.right_3,
.ft_img_1,
.footer_1 {
  cursor: none;
}