.side-img-right {
  height: 110%;
  transform: translate(-50%, -35%) translateX(600px); 
}
.side-img-left {
  height: 90%;
  transform: translate(-50%, -35%) translateX(-780px); 
}




.intro-img {
  background: url('../Images/home/front_img.jpg');
  border-radius: 16px;
  position: relative;
  margin: -2rem;
  background-size: cover;
  height: 75vh;

  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  border-radius : 16px;
}
.intro-text {
  position: relative;
  text-align: center;
  z-index: 2;
  color: white;
}

.intro-text h2{
  font-size: 4rem;
}


/* BODY CONTENT */
#joinsection {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 1.5em;
}

#discordcalltoaction {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  flex-grow: 1;
  flex-basis:30%;
  text-align: right;
  justify-content: flex-end;
  align-content: flex-end;  
}




#FlipTextContainer {
  flex-basis:70%;
  flex-shrink:1;
  text-transform: uppercase;
  font-size:2em;
  font-weight:bold;
  display:inline-block;
  text-align: left;
  white-space: nowrap;
}

 /* I have no clue how this flip thing aligns sorry to anyone trying to maintain */
#flip {
  height:2em;
  overflow:hidden;
}

#flip .container1 {
  color:#fff;
  height:2em;
  padding-left: 15%;
  display: block;
}

#flip .scrolllogo{
  height: 100%;
  vertical-align: middle; 
}

#flip .game {
  display: inline-block;
  height: 100%;
}
#flip .title {
  display: inline-block;
  height: 100%;

  font-size: 1.4em;
  vertical-align: middle; 
}


#flip div:first-child {
  animation: show 5s linear infinite;
}


@keyframes show {
  0% {margin-top:-6em;}
  5% {margin-top:-4em;}
  33% {margin-top:-4em;}
  38% {margin-top:-2em;}
  66% {margin-top:-2em;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-6em;}
}