body{
  background-repeat: no-repeat;
  background-image: url(../img/Mountains.webp);
  background-size: 2560px, 1440px;
  background-attachment: fixed;
  min-height: 100%;
  padding: 0px;
  margin: 0px;
}

a:link{
  text-decoration: none;
}

footer{
  width: 100%;
  height: 5%;
  display: flex;
  background: linear-gradient(90deg, rgba(120, 169, 197, 0)20%, rgba(161, 219, 253, 1) 25%, rgba(161, 219, 253, 1) 75%, rgba(120, 169, 197, 0) 80%);
  position:fixed;
  flex-direction: row;
  column-gap: 25px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  bottom: 0;
}

@keyframes updateAnimation{
  0%{
    transform: translate(0);
    
  }
  20%{
    transform: translate(10%, 0);
    
  }
  100%{
    transform: translate(-85%, 0);
    
  }
}


.TodaysUpdatePositioner{
  transform: translate(0, 40%);
  min-width: 1.6%;
  min-height: 25%;
  width: 10%;
  height: 100%;
  position:fixed;
  z-index: 90;
}

#TodaysUpdateContainer{
  height: 35%;
  background: linear-gradient(rgb(161, 219, 253) 50%, rgb(120, 169, 197) 100%);
  border-radius: 0 15px 15px 0;
  display: flex;

}


.TodayContent{
  padding: 0 0 0 5px;
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr 1fr 3fr 1fr;

}

.TodayUpdateContent{
    overflow-y: hidden;
    padding: 0 5px 0 5px;
}

.UpdateText{
    
  animation: 10s ease-in-out  0s infinite alternate AutoScrollTodaysUpdate;
}

@keyframes AutoScrollTodaysUpdate{
  0%{
    transform: translatex(0, 0);
  }
  25%{
    transform: translatex(0, 0);
  }
  30%{
    transform: translatex(0, -15%);
  }
  90%{
    transform: translate(0, -50%);
  }
  100%{
    transform: translate(0, -50%);
  }
}



.CurrentlyWorkingOn{
 padding: 10px 10px 0 0;
 text-align: center;
}

.TitleText, .OnHold, .QueuedForRework, .MayBeScrappedReworked, .NotStarted, .Preproduction, .NotStarted, .SomeWorkDone, .PartiallyImplemented, .MostlyImplemented, .EssentiallyDone, .FullyImplemented, .TodayUpdateContent, .last-Updated{
  text-align: center;
}

.TodayBreak{
  background-color: rgba(42, 59, 42, 0.5);
  width: 90%;
  height: 5px;
  border-radius: 5px;
}

.ShowHideTodayButton{
  flex: 1;
}

#TodayButton{
  width: 100%;
  height: 100%;
  margin: 0 0 0 0;
  border-radius: 0 15px 15px 0;
  background-color: rgb(161, 219, 253);
  cursor: pointer;
  border-style: none;
  transform: translate();
  flex: 1;
}

#TodayButton:hover{
  background-color: rgb(120, 169, 197);
}

.SVGs{
  width: 20px;
  height: 20px;
}

.separator{
  width: 5px;
  height: 90%;
  z-index: 91;
  background-color: rgba(42, 59, 42, 0.5);
  border-radius: 5px;
}

.footertext{
  width: 500%;
}

.ContentContainer{
  backdrop-filter: blur(2px);
  border-style: solid;
  border-color: rgba(30, 60, 60, 0.8);
  bottom: 0px;
  width: 80%;
  height: 100%;
  background: linear-gradient(rgba(123, 176, 118, 0.25) 0%, rgba(76, 101, 69, 0.9) 100%);
  z-index: 11;
  display: grid;
  grid-template-rows: 1fr;
  align-content: center;
  margin: auto;
  padding-bottom: 1000px;
  
}

.DescriptionContainer{
  display: inline-flex;
  flex-direction: row;
  column-gap: 25px;
  z-index: 12;
}

.Discord{
  flex: 1;
  width: 20%;
  min-width: 20%;
  
}

.GameDescription{

  padding: 25px 10px 10px 50px;
  background: radial-gradient(circle, rgba(236, 248, 255, 0.75) 0%, rgba(161, 219, 253, 0.2) 300%);
  border-style: solid;
  border-radius: 10px;
  border-color: rgba(30, 60, 60, 0.8);
  transform: translate(1%, 0);
  background-filter: blur(16px);
}


.EmbedBorderImage{
  width: 94%;
  height: auto;
  transform: translate(5.4%, -84%);
  pointer-events: none;
}

.EmbedContainer{
  width: 100%;
  height: 100%;
  position:relative;
  align-content: center;
  z-index: 10;
}


.UpdateProgressEmbed{
  width: 80%;
  height: 65%;
  margin: 0 0 0 10%;
  border-radius: 0 80px 0 0;
}

.spacer{
  width: 100%;
  height: 200px;
}