:root {
	--bg-color: 20, 22, 26;
	--primary-color: 187, 0, 255;
}


body {
  color: #f0f0f0;
  font-family: "Fira Code", monospace;
}

#hexGlowCanvas {
	opacity: .35;
}

.hex-panel {
  background: rgba(var(--bg-color), 0.35);
  border-radius: 1rem;
  padding: 2rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 30px rgba(var(--primary-color), 0.1);
  max-width: 500px;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

.hex-panel:hover {
  transform: scale(1.015);
  box-shadow: 0 0 40px rgba(var(--primary-color), 0.2);
}

.button.is-glow {
  background-color: transparent;
  color: rgb(var(--primary-color));
  border: 1px solid rgb(var(--primary-color));
  box-shadow: 0 0 10px rgba(var(--primary-color), 0.3);
  transition: all 0.2s ease;
}

.button.is-glow:hover {
  background-color: rgb(var(--primary-color));
  color: rgb(var(--bg-color));
  box-shadow: 0 0 20px rgba(var(--primary-color), 0.5);
}


/* Header */

.header {
	background: rgba(var(--bg-color), .35);
	padding: 0 1.5rem;
	box-shadow: 0 0 8px rgba(var(--primary-color), 0.1);
	backdrop-filter: saturate(180%) blur(8px);
	animation: pulseGlow 4s ease-in-out infinite;
	z-index: 1000;
	top: 0;
}
.header .logo {
	margin: 10px 0;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 6px rgba(var(--primary-color), 0.25);
  }
  50% {
    box-shadow: 0 0 12px rgba(var(--primary-color), 0.75);
  }
}

/* Header - End */

/* Social Icons */
.social-icon {
    display: inline-block;
	position: relative;
    width: 64px;
    height: 48px;
    transition: transform 0.3s ease;
}
.social-icon:nth-child(odd) {
  top: -6px;
}
.social-icon:nth-child(even) {
  top: 6px;
}

.social-icon:before {
	content: "";
	display: block;
    width: 96px;
    height: 48px;
	
	position: absolute;
	left: -25%;
    background-size: 96px 48px;
    background-repeat: no-repeat;
    background-position: center;
}

.social-icon:hover {
  transform: scale(1.1);
}
.social-icon:nth-child(odd):hover {
  transform: scale(1.1) translate( 0px, 10px );
}
.social-icon:nth-child(even):hover {
  transform: scale(1.1) translate( 0px, -10px );
}

.social-icon.gamefound:before {
  background-image: url('../img/svg/gamefound.svg');
}
.social-icon.instagram:before {
  background-image: url('../img/svg/instagram.svg');
}
.social-icon.itch:before {
  background-image: url('../img/svg/itch.svg');
}
.social-icon.reddit:before {
  background-image: url('../img/svg/reddit.svg');
}
.social-icon.tiktok:before {
  background-image: url('../img/svg/tiktok.svg');
}
/* Social Icons - End */


/* PopUp */
.popup {
  position: fixed;
  bottom: 0; left: 0;
  width: 100vw; height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(var(--bg-color), 0.8);
  backdrop-filter: blur(10px);
}

.popup.is-hidden {
  display: none;
}

.popup-box {
  max-width: 400px;
}
/* PopUp - End */

/* Accordion */
.accordion .message-header {
  cursor: pointer;
}
.accordion .is-active .icon {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
/* Accordion - End */

/* Div */

.deck-img {
	position: relative;
}
.deck-img img {
	position: relative;
	max-width: 480px;
	z-index: 1;
}
.deck-img:before {
    content: "";
    display: block;
	height: 120px;
	width: 150vw;
	background-color: rgba(var(--primary-color), 0.5);
	position: absolute;
	bottom: 40px;
	left: -50vw;
	z-index: 0;
}

/* Div - End */