@charset "UTF-8";
/* CSS Document */
/* Tom Hunter Photography © */


/* Container to stack tags on the left side of the screen */
.side-tags-container {
  position: fixed;
  left: -10px;
  top: 260px; /* Adjust vertical placement here */
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Spacing between the two tags */
}

/* Base style for the anchor links */
.side-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  min-height: 100px;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  color: #fff !important;
  
  /* Modern border radius & shadow */
  border-radius: 0 12px 12px 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);
  
  /* Smooth modern transition for the hover "pop-out" */
  transform: translateX(0);
  transition: transform 0.3s ease, background-color 0.3s ease;
  
  /* Native vertical text handling */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(0deg); /* Flips text so it reads nicely from top to bottom */
}

/* Hover effect: Makes the tag pop out slightly to the right */
.side-tag:hover {
  transform: translateX(8px) rotate(0deg); /* Keeps the rotation while sliding out */
}

/* Unique colors for each tag */
.side-tag.tag-360 {
  background-color: #444; /* Deep Red */
}

.side-tag.tag-360:hover {
  background-color: #036; /* Lighter Red on hover */
}

.side-tag.tag-www {
  background-color: #444; /* Deep Blue (#036) */
}

.side-tag.tag-www:hover {
  background-color: #036; /* Lighter Blue on hover */
}