body {
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  height:auto;
  width:98%;
  overflow-x:hidden;
  border-style:solid;
  border-width:10px 10px 10px 10px;
}
.WordSection1 {
margin: 30px;
}

header {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: black;
  width:100%;
  height:auto;
}
.OutlineText2 {
  margin: 0px;
  padding: 0px;
  font: Tahoma, Geneva, sans-serif;
  font-size: 48px;
  font-size: 4vw;
  color: white;
  text-shadow:
  /* Outline 1 */
  -1px -1px 0 #000000,
  1px -1px 0 #000000,
  -1px 1px 0 #000000,
  1px 1px 0 #000000,  
  -2px 0 0 #000000,
  2px 0 0 #000000,
  0 2px 0 #000000,
  0 -2px 0 #000000, 
  /* Outline 2 */
  -2px -2px 0 #ff0000,
  2px -2px 0 #ff0000,
  -2px 2px 0 #ff0000,
  2px 2px 0 #ff0000,  
  -3px 0 0 #ff0000,
  3px 0 0 #ff0000,
  0 3px 0 #ff0000,
  0 -3px 0 #ff0000;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.down {
  transform: rotate(45deg);
}

h1 {
margin: 0px;
padding: 0px;
}
h4.menu-hd {
text-align: center;
color: black;
border: 10px solid black;
transition: 0.4s;
background-color: lightgray;
text-decoration: none;
padding-top: 2px;
padding-bottom: 2px;
}
h3, h4 {
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
text-decoration: underline;
}
.grouping {
padding-left: 10%;
padding-right: 10%;
}
.row {
display:flex;
}
.column {
flex: 33.33%;
padding-left: 7.5%;
padding-right: 7.5%;
text-align: center;
}
.headeritemgroup {
  display: flex;
  align-items: stretch; 
  margin-left: 4%;
  justify-content: center;
  flex-wrap: wrap;
}
.headeritemgroup > * {
  margin-left: 3%;
  margin-right: 3%;  
}

.menuitemgroup {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.menuitemgroup > * {
  margin: 1rem;
}

.menuitemgroup.::before,
.menuitemgroup::after {
  background: red;
  display: block;
  content: "";
  width: 200px;
  height: 200px;
  margin: 1rem;
  order: 99999999;
}

hr.divider1 {
    overflow: visible;
    padding: 0;
    border: none;
    border-top: medium solid white;
    text-align: center;
}
hr.divider1:after {
    content: "Abuses";
	color: white;
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: black;
}
hr.divider2 {
    overflow: visible;
    padding: 0;
    border: none;
    border-top: medium solid white;
    text-align: center;
}
hr.divider2:after {
    content: "Dangerous Hobby";
	color: white;
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: black;
}
hr.divider3 {
    overflow: visible;
    padding: 0;
    border: none;
    border-top: medium solid white;
    text-align: center;
}
hr.divider3:after {
    content: "Understanding the Problem";
	color: white;
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: black;
}

.header {
  background-color: black;
  padding: 5px;
  text-align: center;
  color: white;
}

.button {
    display: inline-block;
    text-decoration: none;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:10px;
    width: 12em;
	height:50px;
    color: #fff;
    font-weight: bold;
    background-color: lightgray;
    padding: 20px 70px;
    font-size: 24px;
    border: 1px solid red;
    background-image: linear-gradient(bottom, rgb(48,48,48) 0%, rgb(8,8,8) 100%);
    background-image: -o-linear-gradient(bottom, rgb(48,48,48) 0%, rgb(8,8,8) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(48,48,48) 0%, rgb(8,8,8) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(48,48,48) 0%, rgb(8,8,8) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(48,48,48) 0%, rgb(8,8,8) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(48,48,48)),
        color-stop(1, rgb(8,8,8))
    );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0px -1px 0px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
-moz-box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
}
.button:active {
    background-image: linear-gradient(bottom, rgb(128,128,128) 0%, rgb(72,72,72) 100%);
    background-image: -o-linear-gradient(bottom, rgb(128,128,128) 0%, rgb(72,72,72) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(128,128,128) 0%, rgb(72,72,72) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(128,128,128) 0%, rgb(72,72,72) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(128,128,128) 0%, rgb(72,72,72) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(72,72,72)),
        color-stop(1, rgb(128,128,128))
    );
	-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
transform: translate(0, 4px);
}

video{
	z-index:1;
	background-repeat: no-repeat;
	background-position: center;	
}
#buttons {
	display:block;
	height: inherit;
	width: 100%;
	vertical-align: middle;
	overflow: auto;
}
.listbtn { 
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	column-break-inside: avoid;
	width:100%;
}
.x .listbtn { 
	break-inside: avoid-column;
}
.btn {
	vertical-align: middle;
	text-align: left;
	background: none;
	border: none;
	padding-left: 5px;
	color: black;
	cursor: pointer;
}
.tablestyle{ 
	border: 5px solid black;
	max-width:640px;
	text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: black;
}

#navbar a {
  display: block;
  color: #f2f2f2;
  text-align: left;
  padding: 5px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  color: lightgray;
}

#navbar a.active {
  background-color: red;
  color: red;
}

.accordion {
  font-family: Arial
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  text-align: left;
  outline: 0px;
  font-size: 15px;
  transition: 0.4s;
  border-style:1px solid black;
}

.active, .accordion:hover {
  background-color: lightgray; 
}

.panel {
  border: 2px solid white;
  padding: 20px 0px 20px 0px;
  display: none;
  background-color: black;
  overflow: hidden;
}

.menuitems {
  margin: auto;
  padding: 10px;
  float: left;
}

.menuitems > a {
  width: 12em;
}

#rcorners1 {
  border-radius: 25px;
  border: 2px solid black;
  padding: 20px; 
  width: auto;
  margin-left: 0%;
  margin-right: 30%;   
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid black;
  padding: 20px; 
  width: auto;
  margin-left: 10%;
  margin-right: 20%; 
}
#rcorners3 {
  border-radius: 25px;
  border: 2px solid black;
  padding: 20px; 
  width: auto;
  margin-left: 20%;
  margin-right: 10%; 
}
#rcorners4 {
  border-radius: 25px;
  border: 2px solid black;
  padding: 20px; 
  width: auto;
  margin-left: 30%;
  margin-right: 0%; 
}