@charset "UTF-8";

* {
  box-sizing: border-box;
}


h1 {font-family: 'Saira Stencil One', cursive;
background: rgba(0,0,0,0.85);
	font-size: 45px;
	color: white;
	text-align: center;
	padding: 5px;
	text-transform: uppercase;
	text-shadow: 3px -3px 3px #d3d3d3
	z-index: -10;
}
h2 {font-family: 'Saira Stencil One', cursive;
	background: #1d1e1f;
	font-size: 25px;
	color: white;
	text-align: left;
	padding: 5px;
	text-transform: uppercase;
	text-shadow: -3px 3px 3px #d3d3d3;
	z-index: -10;
}
h3 {font-family: 'Saira Stencil One', cursive;
    font-size: 15px;
    color: white;
    text-align: center;
		z-index: -10;
}

.button	{
    padding: 3px;
    font-family: 'Saira Stencil One', cursive;
    font-size: 20px;
    text-align: center;
    color: #FFFFFF;
    background: black;
    cursor: grab;
  }
button,
button:active,
button:focus,
button:hover,
.btn,
.btn:active,
.btn:focus,
.btn:hover{
    outline:none !important;
}


.saira	{
    padding: 3px;
    font-family: 'Saira Stencil One', cursive;
    font-size: 20px;
    text-align: center;
    color: #FFFFFF;
	background: rgba(0,0,0,0.85);
		max-width: 1000px;
		margin: auto;
		z-index: -10;
}
.saira-left	{
    padding: 3px;
    font-family: 'Saira Stencil One', cursive;
    font-size: 20px;
    text-align: left;
    color: #FFFFFF;
		z-index: -10;
}

.saira-body	{
    padding: 3px;
    font-family: 'Saira Stencil One', cursive;
    font-size: 20px;
    text-align: center;
    color: #FFFFFF;
		background: rgba(0,0,0,0.85);
z-index: -10;
		max-width: 1000px;
		margin: auto;
	}

.helvetica {font-family: "Helvetica";
	color: white;
	font-size: 20px;
	text-align: center;
	background: rgba(0,0,0,0.85);
	padding: 10px;
}
body {font-family: "Helvetica";
	color: white;
	background: black;
	background-image: url("images/resist-wallpaper-800w.jpg");
	text-align: center;
	margin: auto;
}
p {
    font-family: 'Helvetica', sans-serif;
    font-size: 15px;
    color: white;
			z-index: -10;
}
a:hover {
	color:white;
	font-size: 15px;
	text-align: center;
		text-shadow: 0px 4px 15px white;
}
.swap-box {
	position: absolute;
	background: black;
	top:150Px;
	left:200px;
		z-index: 9990;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Vanilla JS Draggable Div
https://www.w3schools.com/howto/howto_js_draggable.asp */
#myDrag1 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 11;
}
#myStartPos1 {
  position: fixed;
  top: 150px;
  left: 420px;
  margin: auto;
  z-index: 11;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#myDrag2 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 12;
}
#myStartPos2 {
  position: fixed;
  top: 120px;
  left: 80px;
  margin: auto;
  z-index: 12;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#myDrag3 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 13;
}
#myStartPos3 {
  position: fixed;
top: 150px;
  left: 180px;
  margin: auto;
  z-index: 13;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#myDrag4 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 14;
}
#myStartPos4 {
  position: fixed;
top: 300px;
  left: 480px;
  margin: auto;
  z-index: 14;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#myDrag5 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 15;
}
#myStartPos5 {
  position: fixed;
top: 360px;
  left: 280px;
  margin: auto;
  z-index: 15;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#myDrag6 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 16;
}
#myStartPos6 {
  position: fixed;
top: 240px;
  left: 700px;
  margin: auto;
  z-index: 16;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#myDrag7 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 17;
}
#myStartPos7 {
  position: fixed;
top: 130px;
  left: 320px;
  margin: auto;
  z-index: 17;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#myDrag8 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 18;
}
#myStartPos8 {
  position: fixed;
top: 400px;
left: 80px;
  margin: auto;
  z-index: 18;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#myDrag9 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 19;
}
#myStartPos9 {
  position: fixed;
top: 400px;
  left: 620px;
  margin: auto;
  z-index: 19;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#myDrag10 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 20;
}
#myStartPos10 {
  position: fixed;
top: 130px;
  left: 650px;
  margin: auto;
  z-index: 20;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#myDrag11 {
position: absolute;
margin: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
background-color: black;
z-index: 21;
}
#myStartPos11 {
  position: fixed;
top: 220px;
  left: 620px;
  margin: auto;
  z-index: 21;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */

#sideArch{
  position: fixed;
height: 600px;
left:0px;
top: 40px;
    z-index: 1;
}
#gradientz2{
   background: linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0),rgba(0,0,0,0.85),rgba(0,0,0,1));
    z-index: -999;
    height: 150vh;
    width: 100vw;
    margin: auto;
    text-align:center;
      z-index: -10;
  }
  #startButton {
    position: fixed;
  left:450px;
  top: 45px;
      z-index: 2;
  }
  #assemble {
    position: fixed;
  left:440px;
  top: 590px;
      z-index: 2;
  }
  /* +++++++++++++++++++++++++++++++++++++++++++++++++ */

  #fightback{
    width:150px;
  }

  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: fixed;
    left: 1000px;
    top: 50px;
  		z-index: 2020;
      font-family: 'Saira Stencil One', sans-serif;
      font-size: 15px;
      margin: auto;
  }
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
      display: none;
      position: relative;
      background-color: rgba(0,0,0,0.6);
      font-family: 'Allerta Stencil', sans-serif;
      font-size: 15px;
      color: white;
      text-decoration: none;
      border-bottom: 1px solid white;
      z-index: 20;
      width:150px;

  }
  .dropdown-content2 {
      display: none;
      position: relative;
      right: 100px;
      background-color: rgba(0,0,0,0.3);
      z-index: 20;
      width:150px;
      text-align: left;
  }
  /* Links inside the dropdown */
  .dropdown-content2 a {
      background-color: rgba(0,0,0,0.6);
      font-family: 'Allerta Stencil', sans-serif;
      font-size: 15px;
      color: white;
      text-decoration: none;
      border-bottom: 1px solid white;
      display: block;
  }
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
      display: block;
  }
  /* Show the dropdown second menu on hover */
  .dropdown-content:hover .dropdown-content2 {
      display: block;
  }
  /* #space{
    position: relative;
  height: 1vh;
  } */
  /* +++++++++++++++++++++++++++++++++++++++++++++++++ */
  #backBut{
      position: fixed;
      top: 220px;
      left: 1050px;
        width:120px;
            z-index: 2000;
  }
  #homeBut{
    position: fixed;
          z-index: 2000;
      top: 400px;
      left: 1050px;
            width:120px;
  }
  #tit{
      position: fixed;
            z-index: 2000;
            top: 102px;
            left:25px;
              width:33px;
  }