body {
  background-color: gray;
  padding: 0;
  margin: 0;
  width: 100svw;
  height: 100svh;
  overflow: hidden;
}

/* * {
  border: 1px solid blue;
} */

h1 {
  font-family: "Neonderthaw", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15em;
  color: white;
  line-height: 0%;
}

h2 {
    font-family: "Gaegu", serif;
    font-weight: 700;
    color: red;
    font-style: italic;
}

.transparent-grid {
  width: 100svw;
  height: 100svh;
  background-size: 100px 100px;
  background-image:
  /* repeating-linear-gradient(to right, transparent 0px, transparent 0.5px, rgba(255, 255, 255, 0.2) 0.5px, rgba(255, 255, 255, 0.2) 29.5px, transparent 29.5px, transparent 30px),
  repeating-linear-gradient(to bottom, transparent 0px, transparent 0.5px, rgba(255, 255, 255, 0.2) 0.5px, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2) 29.5px, transparent 29.5px, transparent 30px);
   */
   url('assets/media/diamond-upholstery.png');
}

.centered-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bg-gradient {
  inset: 0;
  position: absolute;
  z-index: -1;
  min-width: 100vw;
  min-height: 100vh;
}

.tooltip {
  visibility: hidden;
  z-index: 10;
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  text-align: center;
  padding: 0.5svw 1svw;
  border-radius: 5px;
  position: absolute;
  bottom: 85%;
  left: 30%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  font-size: 2svw;
  white-space: nowrap;
}

.tooltip-target {
  cursor: pointer;
}

.tooltip-target:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/* WebRing Styles */
#WR_container_wrapper {
  display: relative;
  position: absolute;
  top: 61svw;
  left: 85svw;
  width: 10svw;
  height: 10svw;
}
.smallimage {
  width: 100%;
}

#defaultW {
  position: absolute;
  clip-path: polygon(10% 10%, 50% 0%, 50% 100%, 10% 90%, 0% 50%);
}

#defaultR {
  position: absolute;
  clip-path: polygon(50% 0%, 90% 10%, 100% 50%, 90% 90%, 50% 100%);
}

.hoverW {
  opacity: 0;
  width: 100%;
  position: absolute;
  margin: 0 auto;
  pointer-events: none;
}

.hoverR {
  opacity: 0;
  width: 100%;
  position: absolute;
  margin: 0 auto;
  pointer-events: none;
}

#defaultW:hover ~ .hoverW {
  opacity: 1;
}

#defaultR:hover ~ .hoverR {
  opacity: 1;
}