.loading {
    opacity: 0;
    visibility: hidden;
}

#whole_menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-out;
}

#whole_menu.loaded {
    opacity: 1;
    visibility: visible;
}

:root {
  background-color: black;
  color: white;
  overflow: hidden;
  font-family: "capitolium-2", serif;
  font-weight: 300;
  font-style: normal;
  -webkit-text-stroke: 1px var(--color-gold-bright);
}

body {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0%;
}

#under-construction {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  margin-top: 20%;
}

.link, #name, .link_image, #bg_circle_image, #circle_overlay, .bg_gradient, .link_container, .link_cogwheel,
.circular_menu, .circle_container, .ring, .ring_metric, #circular_menu_mask {
  transition: all 0.8s ease-out;
  position: absolute;
}

#circular_menu {
  width: 100%;
  height: 100%;
}

#circle_overlay {
  z-index: 150;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 60%, rgb(0, 0, 0) 70%);
}

.link_container {
  z-index: 110;
}

.link_cogwheel {
  z-index: 109;
}

a {
  display: inline-block;
  text-decoration: none;
  color: var(--color-gold-dark);
}

a:hover {
  color: var(--color-gold-hover);
}

#name {
  z-index: 300;
  text-align: center;
}

#circular_menu_mask {
  z-index: 100;
}

.link {
  z-index: 210;
}

.link_image {
  object-fit: scale-down;
  z-index: 110;
}

.circle_container {
  z-index: 100;
  overflow: hidden;
}

#bg_circle_image {
  z-index: 98;
  object-fit: contain;
  transition: opacity 0.5s ease-in-out;
}

#ring_outer {
  z-index: 201;
}

#ring_middle {
  z-index: 200;
}

#ring_inner {
  z-index: 201;
}

.ring_metric {
  z-index: 202;
  pointer-events: none;
}

#bg_gradient_upper {
  z-index: 102;
  background-image: radial-gradient(circle at 33% 55%, rgba(0, 0, 0, 0) 50%, var(--color-gold-amber) 70%, var(--color-gold) 85%, var(--color-gold-pale));
}

#circular_menu_mask {
  z-index: 100;
}

/* Add these styles for the vertical social links */
.social-links-vertical {
    position: fixed;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 300;
}

.social-links-vertical .social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    background-color: black;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
    cursor: pointer;
    display: block;
}

.social-links-vertical .social-icon:hover {
    transform: scale(1.1);
    border-color: white;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

@media (orientation: portrait) {
    .social-links-vertical {
        position: fixed;
        right: auto;
        top: auto;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
    }
}/*# sourceMappingURL=style.css.map */