:root {
	--mystic-box: gray;
}
body {
	/*background: rgb(255, 227, 227);*/
	background-image: url('0.png');
	background-size: 95%;
	background-repeat: no-repeat;
}

p {
	font-size: 20px;
}

canvas {
	display: block;
	position: absolute;
	right: 10px;
	width: 200px;
	height: 200px;
}
a, a:link, a:visited {
	text-decoration: none;
	color: blue;
}
a:active {
	text-decoration: underline;
	color: greenyellow;
}
a:hover {
	text-decoration: underline;
}
#Links {
	position: absolute;
	top: 10px;
	left: 15px;
}
#Contact {
	display: block;
	margin-right: 70px;
	color: gray;
	opacity: 0.2;
	transition: opacity 3s;
}
#Contact:hover {
	opacity: 0;
}

.video {
	position: absolute;
	right: 0;
	width: 315px;
	height: 560px;
}

iframe {
  	display: block;
  	position: absolute;
  	bottom: 10px;
  	left: 15px;
	width: 330px;
  	height: 186px;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
  iframe {
    display: block;
	  position: relative; 
		margin-top: 200px;
    /* margin-left: -15px; */
		margin-inline: auto;
	  width: 330px;
	  height: 186px;
  }
	
	canvas {
	  display: block;
		position: relative;
		margin-top: 10px;
    /*margin-left: 10px; */
		margin-inline: auto;
	}
}