html, body {
    margin:0;
    padding:0;
	background: black;
    /* height: 100%; */
	/* min-height: 100%; */
}
#canvas {
    /* background : #0000FF url("IMG_7370.jpeg"); */
	/* background-repeat: repeat-y; */
	/* background-position: top left; */
    /* background-size: 100% 100%; */
    /* height: 100%; */
	/* min-height: 100%; */
}

.menu{
	overflow: visible;
	width: 100%;
	position: sticky;
	top: 0px;
	padding-bottom: 0px;
  /* display: flex; */
  /* justify-content: space-between; */
	z-index: 1;
	background-color: black;
	color: white;
	/* font-family: 'Raleway', Arial, sans-serif; */
	font-family: "Loved by the King", cursive;
	font-size: 24px;
	text-align: center;
	text-transform: uppercase;
	/* font-weight: 400; */
	/* height: 45px; */
	line-height: revert;
	/* vertical-align: bottom; */
}

.menu ul {
	/* position: sticky; */
	/* top: -20px; */
	/* display: inline-block; */
    list-style-type: none;
    margin: 0;
    padding: 0;
	overflow: visible;
	/* border: 2px solid; */
}

.menu li {
	position: relative;
	top: 0px;
	display: grid;
    margin: 0;
	padding: 0;
	overflow: visible;
	/* border: 2px solid; */
}

.menu a, .heff, .actheff {
	/* border: 2px solid; */
    /* display: inline-block; */
	position: relative;
	overflow: visible;
	
	top: 0px;
	/* top: 10px; */
    /* padding: 10px 5px -20px 15px; */
	margin: revert;
    color: white;
	height: 28;
	z-index: 4;
	/* background: blue; */
    text-decoration: none;
	/* background: red; */
    box-shadow: inset 0 -3px 0  white;
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */
	/* animation: 2s menubox; */
	/* animation-iteration-count: 1; */
	/* animation-play-state: paused; */
}

.menuface, .menutoe{
 	overflow: visible;
   /* display: block; */
	position: relative;
	top: 15px;
    padding: 5px 30px 0px 30px;
	margin: 20px 0px 15px 10px;
	/* margin-top: 25px; */
	
	background: white;
    color: black;
	z-index: 4;
	/* text-position: bottom; */
    text-decoration: none;
	text-transform: none;
}

.menuface {
	left: revert;
	top: 5px;
	margin-left: revert;
	margin-bottom: 15px;
}

.menutoe {
	margin-left: 0px;
	margin-top: 0px;
	left: 0px;
}

/* .heff, .actheff { */
.heff { /* hover effect */
	/* border: 2px solid; */
	position: relative;
	height: 0px;
	top: revert;
    padding: 5px 5px 0px 5px;
	/* margin: -15 auto -55px; */
	/* width: 100%; */
	/* height: 40px; */
	/* position: sticky; */
	/* top: 0px; */
	/* display: inline; */
	/* animation: 2s menubox; */
	/* background: green; */
	z-index: 3;
    box-shadow: inset 0 -5px 0 -30px white;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.actheff, .actheff:hover { /* active (constant) hover effect */
	/* display: none; */
	background: white;
	color: black;
	margin: revert;
	top: revert;
	line-height: revert;
    padding: revert;
	/* margin: 0 auto -15px; */

}

.menu a:hover + .heff {
	background: white;
	/* animation: .2s menubox; */
}

.menu a:hover {
	color: black;
}

@keyframes menubox {
	0% { clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%); }
	50% { clip-path: polygon(0 0, 50% 50%, 100% 100%, 0 100%); }
	100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

.devcontent {
	height: 500px;
	width: 25%;
	top: 100;
	left: 300;
	position: relative;
	background-color: green;
}

.content {
    background : #0000FF url("the_mental-pexels_frank_cone.jpg");
	background-position: center;
	background-scroll: scroll;
	background-repeat: repeat-y;
    /* background-size: 100% auto; */
    background-size: cover;
	min-height: 100%;
	min-width: 320px;
	width: 95%;
	/* height: 90%; */
	/* top: -145px; */
	margin: auto;
	/* padding-top: -165px ; */
	/* padding-top: 145px; */
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	position: relative;
	padding-top: 40px;
	padding-bottom: 40px;
}

.ninjacollection iframe {
	/* position: relative; */
	/* display: none; */
	/* background: yellow; */
	/* border-radius: 12px; */
	/* width: 300px; */
	/* height: 800px; */
	
	/* frameBorder: 0; */
	/* width="20%" height="80%" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy" */
}

/* .ninjabox, .ninjabox iframe,  */
.ninjaBoxLeft, .ninjaBoxLeft iframe, 
.ninjaBoxCenter, .ninjaBoxCenter iframe, 
.ninjaBoxRight, .ninjaBoxRight iframe {
	position: relative;
	background: #282828;
	color: white;
	min-height: revert;
	height: revert;
	width: revert;
	/* margin: 5px; */
	/* font-size: 58px; */

	box-sizing: border-box;

	border-radius: 12px;
	frameBorder: 0px;
	
	margin-bottom: 40px;
}

.ninjaBoxLeft,  
.ninjaBoxCenter,  
.ninjaBoxRight {
	max-width: 95%;
}

.ninjaBoxLeft iframe, 
.ninjaBoxCenter iframe, 
.ninjaBoxRight iframe {
	height: 100%;
	min-height: 800px;
	/* zoom: 2; */
	position: relative;
	/* transform-origin: 50% 0%; */
	/* transform: scale(2); */
}

.ninjabox {
	font-family: "Loved by the King", cursive;
	font-size: 18px;
	text-align: left;
	text-transform: uppercase;
	padding: 10px;
	
	/* margin-top: 20px; */
	
	display: revert;
	width: 100%;
	height: calc(100% - 40px);
	/* min-height: 100%; */
	box-sizing: border-box;
	height: revert;

	border: 2x solid;
	border-radius: 12px;
	
	/* font-weight: 400; */
	/* height: 45px; */
	/* line-height: 20px; */
	background: #282828;

}

.ninjabox h1 {
	font-size: 24px;
	font-weight: bold;
	width: revert;
	/* padding-right: 20px; */
}