/* 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;
}

.sectionguide {
  background: rgba(200, 200, 200, 0.2);
  text-align:center;
  border-radius: 30px;
  outline-style: solid;
  outline-color: white;
  outline-width: 2px;
  width:500px;
  margin:auto;
  margin-top:15px;
  padding:5px;
}

.textguide {
  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;
}

.pagecontainer {
  margin:auto;
  width:1850px;
}


.textcontainer {
  margin:auto;
  width:1800px;
}

.textheadercontainer {
    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;
  width:1500px;
  margin:auto;
}

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

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

.textsectionheader {
  position:static;
  align-items: flex-start;
  text-align:center;
  font-family:"Cambria";
  font-style:Italic;
  font-size:30px;
  margin-top:10px;
}

.textbox {
  padding: 10px 100px 10px 100px;
  margin:auto;
  width: 40%;
  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;
}





/* 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 {
  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
*/