* {
  padding: 0;
  margin: 0;
}

/* The Modal (background) */
.modal {
	opacity: .7;
	font-family: 'Courier New', serif;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 25vw;
  top: 25vh;
  width: 50vw; /* Full width */
  height: 50vh; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
#player {
  position: absolute;
  width: 100vw;
  height: auto;
  display: grid;
  grid-template-areas: "night bubble noise"
                        "witch playing parent"
                        "tarot infinite bullets"
                        "social social social";
grid-template-columns: repeat(3,33vw);
  grid-template-rows: repeat(4,25vh);
}

#version {
font-size: 3px;
}

.tracks {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
opacity: .5;
cursor: pointer;
  width: 100%;
  height: 100%;
  transition: background-image 5s ease-in-out;
  font-size: 2vh;
  color: blue;
   font-family: 'Splash', serif;
  animation: glow 1s ease-in-out infinite alternate;
}

#playlink {
  z-index: 1000;
  position: relative;
  color: white;
  opacity: .5;
	text-shadow: -2px -2px black;
  animation: glow 1s ease-in-out infinite alternate;
}

.tracks:hover {
  border: 2px solid black;
opacity: 1;
  text-shadow: -2px -2px black;
	color: white;
}

#night {
  grid-area: night;
  background-color: black;
}

#night:hover {
  background-image: url('one.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#bubble {
  grid-area: bubble;
  background-color: grey;
}


#mailit {
	grid-area: c;
  object-fit: contain;
  opacity: .7;
}


#bubble:hover {
  background-image: url('nine.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#noise {
  grid-area: noise;
  background-color: lightslategrey;
}
#noise:hover {
  background-image: url('three.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#witch {
  grid-area: witch;
  background-color: slategrey;
}

#witch:hover {
  background-image: url('nineteen.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#parent {
  grid-area: parent;
  background-color: darkgray
}

#parent:hover {
  background-image: url('eleven.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


#sub {
  border: 2px solid black;
  color: lightblue;
  background-color: black;
}

#formCont {
	grid-area: playing;
  display: none;
  flex-direction: column;
  align-items: center; 
  justify-items: center;
  z-index: 1000;
  width: fit-content;
  height: 10vh;
  border: 3px solid lightblue;
  box-shadow: 1px 1px black;
  font-family: 'Splash', serif;
  background-color: white;
}

#tarot {
  grid-area: tarot;
  background-color: lavender;
}

#tarot:hover {
  background-image: url('thirteen.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#infinite {
  grid-area: infinite;
  background-color: lightskyblue;
}

#infinite:hover {
  background-image: url('twentyOne.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

a {text-decoration: none;}

a:hover {text-decoration: none;}

.soc {
  height: 10vw;
  width: 10vw;
}

#bullets {
  grid-area: bullets;
  background-color: lightgreen;
}

#bullets:hover {
  background-image: url('twentyTwo.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#social {
  height: 100%;
  width: 100%;
  grid-area: social;
  position: absolute;
}

img {
  object-fit: scale-down;
}

#playing {
  text-align: center;
  display: grid;
  grid-area: playing;
  grid-template-areas: "text"
                        "btn";
width: 100%;
  height: 100%;
  position: absolute;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
}

#text {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  grid-area: text;}
#playingbtn {
  cursor: pointer;
   display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
             grid-area: btn;}
#a {
  grid-area: a;
}

#b {grid-area: b;
   }

#c {grid-area: c;}

#d {grid-area: d;}

#f {grid-area: f;}
#h {grid-area: h;}
#i {grid-area: i;}
#j {grid-area: j;
   display: flex;
   align-items: center;
   justify-content: center;
font-size: 3vh;}

.road {
  opacity: .5;
  font-size: 6vh;
  color: blue;
   font-family: 'Splash', serif;
  text-shadow: -2px -2px black;
  animation: glow 1s ease-in-out infinite alternate;
}

.roadz {
  opacity: .5;
  font-size: 2vh;
  color: blue;
   font-family: 'Splash', serif;
  text-shadow: -2px -2px black;
  animation: glow 1s ease-in-out infinite alternate;
}

.glowy {
animation: glow 1s ease-in-out infinite alternate;
cursor: pointer;
}

#song {
display: flex;
  grid-area: song;
  align-items: center;
  justify-items: center;
  font-family: 'Homemade Apple', cursive;
  color: white;
  font-size: 3vh;
text-shadow: -2px -2px 5px black;
text-align: center;}

#name {
  justify-content: start;
  grid-area: name;
  width: 100%;
  font-family: 'Homemade Apple', cursive;
  color: white;
   font-size: 3vh;
text-shadow: -2px -2px 5px black;
}

.blink {
  visibility: hidden;
}

@keyframes fade {
  0% {background-color: ''}
  50% {background-color: black}
  100% {background-color: ''}
}

#btn {
  grid-area: play;
  display: flex;
  align-items: center;
  justify-items: center;
  font-family: 'Homemade Apple', cursive;
  color: white;
  text-shadow: -2px -2px 5px black;
  cursor: pointer;
  font-size: 3vh;
}

.gridz {
  cursor: pointer;
  transition: opacity 1s;
  justify-content: center;
  align-content: center;
  align-items: center;
}

#n {
  font-size: 5vh;
  display: flex;
  grid-area: n;
  background-color: white;
  opacity: .3;
  justify-self: stretch;
  align-items: stretch;
  z-index: 150;

}
#g {
  display: flex;
  grid-area: g;
}

#k {
  display: flex;
  grid-area: k;
}

#kp {
  z-index: 100;
  object-fit: none;
  opacity: 0.5;
}

#gp {
  z-index: 100;
  object-fit: none;
  height: 200vh;
  opacity: 0.5;
}

@keyframes grow {
  0% {transform: skew(30deg, 60deg)}
  25% {transform: skew(-30deg, -60deg)}
  50% {transform: skew(0deg, 0deg);
      opacity: 1}
  55% {opacity:0}
  95%{opacity:0}
  100%{opacity:1}
}

@keyframes wide {
  0% {transform: skewX(-10deg);
     opacity: 0}
  25% {transform: skew(75deg,20deg);
      opacity: 1}
  40% {transform: skew(60deg,-60deg);
      opacity: .5}
  50% {transform: skew(-90deg,180deg);
        opacity:0}
  55% {opacity:0}
  95%{opacity:0}
  100%{opacity:1}
}

#s {
  font-size: 5vh;
  display: flex;
  grid-area: s;
  background-color: white;
  opacity: .3;
  justify-self: stretch;
  align-items: stretch;
z-index: 150;}

#w {
   font-size: 5vh;
  display: flex;
  grid-area: w;
  background-color: white;
  opacity: .3;
  justify-self: stretch;
  align-items: center;
  z-index: 150;
}

#e { 
  font-size: 5vh;
  display: flex;
  grid-area: e;
  background-color: white;
  opacity: .3;
  justify-self: stretch;
  align-items: center;
  z-index: 150;
}

#blood {
  height: auto;
  width: 100vw;
  display: none;
}

@keyframes inout {
  0% {opacity: 0}
  50% {opacity: .9}
  100% {opacity: 0}
}

@keyframes glow {
 from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px lightblue, 0 0 40px lightblue, 0 0 50px lightblue, 0 0 60px lightblue, 0 0 70px lightblue;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px aqua, 0 0 40px aqua, 0 0 50px aqua, 0 0 60px aqua, 0 0 70px aqua, 0 0 80px aqua;
  }
}
  #app {
  position: absolute;
  display: grid;
    width: 100%;
    grid-auto-flow: column;
  grid-template-areas: "j n n n i"
                      "w name b play e"
                      "w d song a e"
                      "w g c k e"
                      "h s s s f";
  grid-template-columns: 10% 30% 20% 30% 10%;
  grid-template-rows: 10vh 20vh 40vh 20vh 10vh;
  background-image: url('four.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;   
  transition: background-image .1s ease-in;
}