/* START SecButton */

.secbutton {
position:absolute;
left:1023px;
top:155px;
}

/* START HoverPointer */

.HoverImagePointer {
  position:absolute;
  z-index: 1;
  top:350px;
  left:10px;
}

/* END HoverPointer */


/* START Scroller */

.scrolling-text-container {
	display:flex;
	border-radius: 4px;
	overflow: hidden;
}

.scrolling-text-inner {
	display: flex;
	white-space: nowrap;
	font-family:"Cambria";
	font-size:25px;
	font-style:Italic;
	padding: 20px 0;
}

.scrolling-text {
	margin-left: 90%;
}

.scrolling-text-item {
	padding: 0 20px;
}

.scrolling-text-inner>div {
animation: var(--direction) var(--marquee-speed) linear infinite;
}

@keyframes scroll-left {
		transform: translateX (0%);
	0% {
	}
	
	100% {
		transform: translateX(-190%);
	}
}

/* END Scroller */

/* BEGIN Webamp */


/* END Webamp */

/* BEGIN Landing Page */

.landerbox {
  justify-content: center;
  align-items: center;
  margin: auto;
  text-align:center;
  filter: drop-shadow(2px 2px black);
}

.landersubbox {

}


.buttongrid {
  display:grid;
  grid-template-columns: auto auto auto auto auto;
  grid-gap:5px;
  padding:5px;
  align-items:center;
  justify-content: center;
  object-fit: contain;
}

.pixelate {
  
  image-rendering: pixelated;
  
  }


/* END Landing Page */

.topblake {
  float:left;
  position:absolute;
  width:100px;
  height:100px;
}

.bottomblake {
  position:absolute;
  width:100px;
  height:100px;
}

.flexcontainer {
  display:flex;
}

.blogheadercontainer {
  display: flex;
  align-items:center;
  justify-content: center;
  margin-top:2%
}

.blogflexcontainer {
  display: flex;
  align-items:center;
  justify-content: center;
  margin-top:3%;
  margin-bottom:3%;
}

.nothin {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  width: 90vw;
  margin: auto;
  text-align:center;
  filter: drop-shadow(2px 2px black);
}

.blakefall {
  justify-content: center;
  align-items: center;
  width:50vw;
  width:50vh;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

.guide {
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  text-align:center;
  border-radius: 30px;
  outline-style: solid;
  outline-color: white;
  outline-width: 2px;
  height: 15%;
  width: 10%;
  margin:auto;
  margin-top:15px;
  padding:5px;
}

.creditsguide {
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  text-align:center;
  border-radius: 30px;
  outline-style: solid;
  outline-color: white;
  outline-width: 2px;
  height: 15%;
  width: 10%;
  margin-top:15px;
  margin-left:15px;
  padding:5px;
}

.landerimage {
  
  display:inline-flex;
}

.landersectionleft {
  text-align:left;
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  border-radius: 30px;
  outline-style: solid;
  outline-color: white;
  outline-width: 2px;
  padding:15px;
}

#landersectionleftcontainer {

  width: 250px;
  padding:15px;
  height:350px;

}

.landersectionright {

}

.landersectionlinks {
  text-align:right;
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  border-radius: 30px;
  outline-style: solid;
  outline-color: white;
  outline-width: 2px;
  padding:10px;
}
  

#landersectionrightcontainer {

  width: 250px;
  padding:15px;

}

.blogbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60%;
  width: 60%;
  text-align:center;
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  border-radius: 30px;
  outline-style: solid;
  outline-color: white;
  outline-width: 4px;
}

.blogtitletext {
  text-align:center;
  font-family:"Cambria";
  font-style:Italic;
  font-size:60px;
  margin-top:10px;
  filter: drop-shadow(3px 2px black);
}



.blogtext {
  margin-left: 7%;
  margin-right: 7%;
  font-family:"Verdana";
  font-style:Italic;
  font-size:20px;
  text-align:left;
  line-height: 1.5;
}


.blogbuttontext {
    filter: drop-shadow(2px 2px black);
}


#zonebuttoncontainer {
	display:flex;
	justify-content:center;
  width:800px;
  margin:auto;
}





.artbutton {

}

.blogbutton {

}




.blogtitledate {
      filter: drop-shadow(2px 2px black);
      font-size:30px;
      font-family:"Cambria";
      font-style:Italic;
      margin:3%;
	  display:inline;
}

.blogvideo {
  margin:auto;
  align-items:center;
  margin-top:5%;
  margin-bottom:5%;
}

/* BEGIN CREDITS PAGE */

.creditscontainer {
  margin:auto;
}

.creditsheader {
  position:static;
  align-items: flex-start;
  text-align:center;
  font-family:"Cambria";
  font-style:Italic;
  font-size:60px;
  margin-top:40px;
  filter: drop-shadow(3px 2px black);
}

.creditstextbox {
  margin:auto;
  padding:15px;
  height: 50%;
  width: 50%;
  font-size: 20px;
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  border-radius: 30px;
  outline-style: solid;
  outline-color: white;
  outline-width: 4px;
}




/* END CREDITS PAGE */

/* BEGIN WARNPAGE */

.warnbannercontainer {
  margin:auto;
}

.warnbannertextbox {
  margin:auto;
  padding:15px;
  height: 50%;
  width: 50%;
  font-size: 20px;
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  border-radius: 30px;
  outline-style: solid;
  outline-color: white;
  outline-width: 4px;
}

.warnchoicecontainer {
    margin:auto;
  padding:20px;
  height: 50%;
  width: 50%;
  font-size: 20px;
  background: linear-gradient(30deg,rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 50%, rgba(255, 255, 0, 0.4) 100%);
  border-radius: 30px;
  outline-style: solid;
  outline-color: white;
  outline-width: 4px;
}

.warnchoiceyes {
      margin:auto;
      display:inline-block;
      filter: drop-shadow(2px 2px black);
      padding:10px;
      font-size:25px;
      font-family:"Cambria";
      font-style:Italic;
      border-radius: 30px;
      outline-style: solid;
      outline-color: green;
      outline-width: 4px;
      background: linear-gradient(30deg,rgba(200, 255, 255, 0.2) 0%, rgba(255, 200, 255, 0.2) 50%, rgba(255, 255, 200, 0.2) 100%);
}

.warnchoiceno {
      margin:auto;
      display:inline-block;
      filter: drop-shadow(2px 2px black);
      padding:10px;
      font-size:25px;
      font-family:"Cambria";
      font-style:Italic;
      border-radius: 30px;
      outline-style: solid;
      outline-color: red;
      outline-width: 4px;
      background: linear-gradient(30deg,rgba(200, 255, 255, 0.2) 0%, rgba(255, 200, 255, 0.2) 50%, rgba(255, 255, 200, 0.2) 100%);
}



/* END WARNPAGE */

p {
  color: rgba(255, 255, 255, 1);
}

a {
  color: cyan;
}

a:visited {
  color: #7cfffa;
}


body {
  width:1900px;
  background-color: #5A3C65;
  background-image:url("media/angelbglow6.png");
  background-size:cover;
  background-repeat:repeat;
  color: white;
  font-family: Verdana;
}

/* body {
  background-color: #1e211b;
  background-repeat:repeat;
  background-position:bottom;
  color: white;
  font-family: "Times New Roman";
}

put PlushDance under nothin for left side (desktop)

.wrapper {
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid yellow;
  border-radius: 5px;
  padding: 1em;
  color: white;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(500px, auto);
}

.Left {
  grid-column: 1 / 2;
  grid-row: 1 / 1;
}

.Right {
      grid-column: 2 / 10;
  grid-row: 1 / 2
}


/*
center image:
  display: block;
  margin-left: auto;
  margin-right: auto;
  
position:
static: default value
relative: static but the box can be offset from its original position with the properties top, right, bottom and left.
absolute: anywhere on page with top, right, bottom, left
fixed: like absolute but doesn't scroll, sticks to browser window
*/