* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Major Mono Display', monospace;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	min-height: 100vh;
	overflow: hidden;
}
/* section is used for standard page design for each page without additional boxes, containers or such, i used it for centering additional boxes and for background placement */
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
}
/* page heading design, used it for the welcome page   */
.section h1 {
	position: relative;
	text-align: center;
	font-size: 6rem;
	padding: 20px;
	margin: 15px;
	z-index: 1;
	color: white;
}
/* welcome page animation for heading text */
h1 span
{
	animation: animate 2s linear infinite;
}
h1 span:nth-child(1)
{
	animation-delay: 0s;
}
h1 span:nth-child(2)
{
	animation-delay: 0.25s;
}
h1 span:nth-child(3)
{
	animation-delay: 0.5s;
}
h1 span:nth-child(4)
{
	animation-delay: 0.75s;
}
h1 span:nth-child(5)
{
	animation-delay: 1s;
}
h1 span:nth-child(6)
{
	animation-delay: 1.25s;
}
h1 span:nth-child(7)
{
	animation-delay: 1.5s;
}
h1 span:nth-child(8)
{
	animation-delay: 1.75s;
}
h1 span:nth-child(9)
{
	animation-delay: 2s;
}
h1 span:nth-child(10)
{
	animation-delay: 2.25s;
}
/* home page animation for heading text */
@keyframes animate
{
	0%,100%
	{
		color: #fff;
		filter: blur(2px);
		text-shadow: 0 0 5px #FFFFFF,
		            0 0 5px #FFFFFF,
		            0 0 5px #FFFFFF,
		            0 0 5px #FFFFFF,
		            0 0 5px #FFFFFF,
			        0 0 5px #FFFFFF,
			        0 0 5px #FFFFFF,
			        0 0 5px #FFFFFF,
					0 0 5px #FFFFFF,
					0 0 5px #FFFFFF;
	}
	5%,95%
	{
		color: #111;
		filter: blur(0px);
		text-shadow: 0 0 10px none;
	}
}
/* video positioning for the welcome page  */
.video-container {
	position: absolute;
	top: -111px;
	left: 0;
	width: 100%;
}

.lead {
  font-size: 1.5rem;
}
/* navigation bar design  */
.navbar {
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,0.7);
}

.navbar ul {
  display: flex;
  list-style: none;
  width: 100%;
  justify-content: center;
}

.navbar ul li {
  margin: 0 1rem;
  padding: 1rem;
}

.navbar ul li a {
  text-decoration: none;
  font-family: 'Major Mono Display', monospace;
  color: #f4f4f4;
}

.navbar ul li a:hover {
  color: red;
}

/* audio box positioning */
.audio-controls {
	  position: absolute;
      bottom: 8px;
      left: 16px;
}
/* card design is used in members page for a card shadow effect */
.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.4s;
}
/* members page image styling  */
img
{
	opacity: 0.85;
	transition: 0.5s;
}

img:hover
{
	opacity: 1;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* text box for members page */
.container {
  padding: 2px 16px;
  color: white;
  background: black;
  opacity: 0.7;
}
/* text box for sub units page  */
.container2 {
  padding: 4px 32px;
  color: white;
  background: black;
  opacity: 0.5;
}
/* column used in members page */
.column {
  float: left;
  width: 16.65%;
  padding: 5px;
}
/* column used in subunits, loonaverse, and official sources pages */
.column2 {
  float: left;
  width: 32.5%;
  padding: 5px;
}

/* about page box design */
.box{
	position: relative;
	top: -70px;
	margin: 200px auto 0;
	width: 1200px;
	height: 600px;
	background: linear-gradient(to right, #f12711, #f5af19);
	opacity: 0.9;
	border: 3px solid white;
	transition: 0.5s
	
}
/* the box disappears when hovered onto it  */
.box:hover {
	opacity: 0.0;
}
/* styling for text inside of the box  */
.box p {
  margin: 5%;
  font-weight: bold;
  color: white;
  font-size: 1.5rem;
}
/* styling for heading inside of the box  */
.box h1 {
  margin: 5%;
  font-weight: bold;
  color: white;
}

/* box styling for official sources page  */
.box2 {
	position: relative;
	width: 300px;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right, #f12711, #f5af19);
	margin: 40px;
	border: 3px solid white;
	filter: drop-shadow(5px 5px 8px #f5af19);
	
}
/* styling for content inside of the box  */
.box2 .content
{
	padding: 20px;
	color: black;
}

/* box styling for loonaverse page text box  */
.box3 {
	position: relative;
	width: 1000px;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right, #f12711, #f5af19);
	margin: 40px;
	border: 3px solid white;
	filter: drop-shadow(5px 5px 8px #f5af19);
}
/* styling for content inside of the box  */
.box3 .content{
	padding: 20px;
	color: white;
}

/* box used for loonaverse page with the gif inside of it */
.box4 {
	position: relative;
	width: 400px;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right, #f12711, #f5af19);
	margin: 40px;
	border: 3px solid white;
	filter: drop-shadow(5px 5px 8px #f5af19);
	
}
/* styling for content inside of the box  */
.box4 .content
{
	padding: 20px;
	color: white;
}



/* styling for headings in pages */
section h1 {
  font-size: 4rem;
  font-family: 'Major Mono Display', monospace;
}
/* styling for backgrounds for each page  */
section#members {
  background-image: url("photo/moon.jpg");
  background-size: 100% 100%;
}

section#about {
  background-image: url("photo/loona.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

section#mv {
   background-image: url("photo/fire.jpg");
}

section#subunits {
   background-image: url("photo/burn.jpg");
}

section#loonaverse {
   background-image: url("photo/loonaversebg.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

section#officialsrc {
   background: black;
}