@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');

@font-face {
  font-family: 'Blade Runner';
  src: url('fonts/BLADRMF_.TTF');
}

@font-face {
  font-family: 'Philosopher';
  src: url('fonts/Philosopher-Regular.ttf');
}

:root {
  --clr-neon: #14f7ff;
  --clr-neon-dark: #B069DB;
  --clr-neon-light:#ff007f;
  --clr-bg: #001414;
  --font-size: 25px;
}

*, 
*::after,
*::before {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background:black;
}

.elysian-navbar, .elysian-footer {
  width:100%;
  background:black;
  height:60px;
  border:5px var(--clr-bg);
  justify-content:center;
  display:flex;
  align-items:center;
}

.elysian-navbar {
  justify-content:space-between;
  display:flex;
  border-style: inset;
  border-width: 3px;
  border-color: rgba(0, 0, 0, 1);
  border-radius:5px;
  box-shadow: 0px 0px 5px 2px skyblue, inset 0px 0px 5px 2px skyblue;
}

#elysian-open-links, #elysian-logo, #elysian-appeals {
  width:30vw;
  height:50px;
  background-image:url('images/ec_top.png');
  background-size:150px 100px;
  background-repeat:no-repeat;
  background-position:center center;
  transform:translateY(2px);
}

#elysian-open-links {
  background-image:url('images/openlinks.png');
  background-size:100px 50px;
  filter:brightness(2)
  drop-shadow(skyblue 2px 2px 2px);
}

#elysian-logo {
  filter: drop-shadow(skyblue 2px 2px 2px);
}

#elysian-appeals {
  background-image:url('images/appealscrop.png');
  background-size:150px 150px;
  filter: drop-shadow(skyblue 2px 2px 2px);
}

.elysian-links-one, .elysian-links-two {
  display:none;
  justify-content:space-between;
  align-content:center;
  flex-direction:row;
  align-items:center;
  background:url(images/steel7.jpg) 100px 90vw;
  width:90vw;
  height:100px;
  margin-top:10px;
  margin-left:auto;
  margin-right:auto;
  gap:15px;
  opacity:0;
}


[id^=elysian-link] {
  height:50px;
  width:150px;
  background:rgba(0, 0, 0, 0.5);
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  align-content:center;
  font-weight:bold;
  font-family:'Philosopher', serif;
  color:gold;
  font-size:12px;
  padding-left:5px;
  padding-right:5px;
  text-align:center;
  box-shadow:0 0 5px 5px gold;
  opacity:0;
}

[id^=elysian-link] span {
  width:35px;
  height:35px;
  border-radius:50%;
  background:black;
}

#elysian-link-1, #elysian-link-5 {
  display:flex;
  justify-content:flex-end;
}

#elysian-link-1 p, #elysian-link-5 p {
  padding-right:10px;
}

#elysian-link-1 span:nth-child(2), #elysian-link-5 span:nth-child(2) {
  background:url(images/arrow5.png);
  background-size:100% 100%;
}

#elysian-link-1 span:nth-child(3), #elysian-link-5 span:nth-child(3) {
  background:url(images/arrow5.png);
  background-size:100% 100%;
}

#elysian-link-2 span:nth-child(1) {
  background:black;
  background-size:100% 100%;
  color:gold;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:15px;
}

#elysian-link-2 span:nth-child(3) {
  background:url(images/inferno.jpg);
  background-size:100% 100%;
}

#elysian-link-3 span:nth-child(1) {
  background:black;
  background-size:100% 100%;
  color:gold;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:15px;
}

#elysian-link-3 span:nth-child(3) {
  background:url(images/accessremote.jpg);
  background-size:100% 100%;
}

#elysian-link-4 span:nth-child(1) {
  background:black;
  background-size:100% 100%;
  color:gold;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:15px;
}

#elysian-link-4 span:nth-child(3) {
  background:url(images/ec_gary.jpg);
  background-size:100% 100%;
}

#elysian-link-6 span:nth-child(1) {
  background:black;
  background-size:100% 100%;
  color:gold;
  display:flex;
  font-size:15px;
  justify-content:center;
  align-items:center;
}

#elysian-link-6 span:nth-child(3) {
  background:url(images/pwstore2.jpg);
  background-size:100% 100%;
}




#elysian-link-7 span:nth-child(1) {
  background:black;
  background-size:100% 100%;
  color:gold;
  display:flex;
  font-size:15px;
  justify-content:center;
  align-items:center;
}

#elysian-link-7 span:nth-child(3) {
  background:url(images/soundcloud.jpg);
  background-size:100% 100%;
}


#elysian-link-8 span:nth-child(1) {
  background:black;
  background-size:100% 100%;
  color:gold;
  display:flex;
  font-size:15px;
  justify-content:center;
  align-items:center;
}

#elysian-link-8 span:nth-child(3) {
  background:url(images/fs1.jpg);
  background-size:100% 100%;
}


/* The footer area */


.elysian-footer-img {
  width:100px;
  height:50px;
  margin:auto;
  background-image:url('images/ec_bottom.png');
  background-size:100px 50px;
  background-repeat:no-repeat;
  background-position:center center;
  border-style: inset;
  border-width: 3px;
  border-color: rgba(0, 0, 0, 1);
  border-radius:5px;
  box-shadow: 0px 0px 5px 2px skyblue, inset 0px 0px 5px 2px skyblue;
}

.elysian-footer {
  text-align:center;
  margin-top:5px;
  margin-left:auto;
  margin-right:auto;
  width:50vw;
  border-style: inset;
  border-width: 3px;
  border-color: rgba(0, 0, 0, 1);
  border-radius:5px;
  box-shadow: 0px 0px 5px 2px skyblue, inset 0px 0px 5px 2px skyblue;
}

.elysian-intro {
  margin-left:10%;
  margin-right:10%;
}

.elysian-intro p, .elysian-footer p {
  font-family:'Philosopher', serif;
  color:white !important;
}

.elysian-image {
  width:100%;
  height:150px;
  margin-top:50px;
  background-image:url('images/ec_front.webp');
  background-size:200px 150px;
  background-repeat:no-repeat;
  background-position:center center;
  z-index:1 !important;
}

.elysian_buttons {
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  min-height:25vh;
  width:100%;
  margin-bottom:25px;
  place-items: center;
  background: var(--clr-bg);
  color: var(--clr-neon);
  font-family: "Balsamiq Sans";
  font-family:'Blade Runner', serif;
  overflow: hidden;
}

.join-btn, .visit-btn, .reg-btn {
  width:150px;
  height:50px;
  font-size: var(--font-size);
  font-family:'Blade Runner', serif;
  font-weight:bold;
  color:black;
  /*display: inline-block;*/
  position: relative;
  cursor: pointer;
  border: var(--clr-neon) 0.125em solid;
  padding: 0.25em 1em;
  border-radius: 0.25em;
  background:black;
  text-shadow: 
    0 0 5px silver,
    0 0 10px var(--clr-neon);
  box-shadow: 
    inset 0 0 .5em var(--clr-neon),
          0 0 .5em var(--clr-neon);
  transition:all 0.5s ease;
}

.visit-btn {
  border: var(--clr-neon-dark) 0.125em solid;
  text-shadow: 
    0 0 5px silver,
    0 0 10px var(--clr-neon-dark);
  box-shadow: 
    inset 0 0 .5em var(--clr-neon-dark),
          0 0 .5em var(--clr-neon-dark);

}

.reg-btn {
  border: var(--clr-neon-light) 0.125em solid;
  text-shadow: 
    0 0 5px silver,
    0 0 10px var(--clr-neon-light);
  box-shadow: 
    inset 0 0 .5em var(--clr-neon-light),
          0 0 .5em var(--clr-neon-light);
  font-size:20px;
  text-align:center;
}

.reg-btn p {
  text-align:center;
  margin:auto;
  transform:translateX(-3px);
}

.join-btn::before, .visit-btn::before, .reg-btn::before {
  content: "";
  position: absolute;
  top: 140%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-neon);
  transform: 
    perspective(0.2em)
    rotateX(10deg) 
    scale(1.3, 0.40);
  filter: blur(0.5em);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 100ms linear;
}

.visit-btn::before {
  background:var(--clr-neon-dark);
}

.reg-btn::before {
  background:var(--clr-neon-light);
}

/* Shadow around the button during hover */
.join-btn::after, .visit-btn::after, .reg-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--clr-neon);
  box-shadow: 0 0 2em var(--clr-neon);
  z-index: -1;
  opacity: 0;
  transition: opacity 100ms linear;
}

.visit-btn::after {
  background: var(--clr-neon-dark);
  box-shadow: 0 0 2em var(--clr-neon-dark);
}

.reg-btn::after {
  background: var(--clr-neon-light);
  box-shadow: 0 0 2em var(--clr-neon-light);
}

.join-btn:hover::after,.visit-btn:hover::after, .reg-btn:hover::after  {
  opacity: 1;
}
.join-btn:hover, .join-btn:focus {
  color: var(--clr-neon);
  -webkit-text-stroke:1px black;
}
.visit-btn:hover, .visit-btn:focus {
  color: var(--clr-neon-dark);
  -webkit-text-stroke:1px black;
}
.reg-btn:hover, .reg-btn:focus {
  color: var(--clr-neon-light);
  -webkit-text-stroke:1px black;
}

.join-btn:hover::before, .visit-btn:hover::before, .reg-btn:hover::before {
  opacity: 0.8;
}

/* Appear and disappear */

.appear {
  animation:forwards 5s openSesame;
}

@keyframes openSesame {
  0% { opacity:0; /*display:flex;*/ }
  100% { opacity:1; }
}

.disappear {
  animation:forwards 3s closeSesame;
}

@keyframes closeSesame {
  0% { opacity:1; }
  100% { opacity:0; /*display:none;*/ }
}

/* Login Page Colors */

#reg_username { color:skyblue; }

/* Responsive CSS */
@media only screen and (max-width: 650px) {
  .elysian-links-one, .elysian-links-two {
    flex-direction:column;
    width:60vw;
    height:250px;
    margin-top:30px;
    background:url(images/steel7.jpg) 60vw 250px;
    justify-content:center;
  }
  .arrow { transform:rotate(90deg); }
  .elysian_buttons { grid-template-columns:1fr; gap:75px; padding-bottom:60px; padding-top:25px; }
  #elysian-open-links { background-size: 80px 40px; }
  #elysian-logo { background-size: 120px 90px; }
  #elysian-appeals { background-size: 100px 100px; }
}

@media only screen and (max-width: 350px) {
  #elysian-open-links { background-size: 60px 30px; }
  #elysian-logo { background-size: 80px 60px; }
  #elysian-appeals { background-size: 75px 75px; }
}

/* ✅ Prevent the open-links icon from disappearing when clicked */
#elysian-open-links,
#elysian-open-links:active,
#elysian-open-links:focus {
  background-image: url('images/openlinks.png') !important;
  background-size: 100px 50px;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(2) drop-shadow(skyblue 2px 2px 2px);
  opacity: 1 !important;
}