@import url('https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap');

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.xraycenter {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  
  background-image: url(./../img/WoodenTable2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  -webkit-box-shadow: inset 0px 43px 10px -42px rgba(0,0,0,0.46), inset 0px -43px 10px -42px rgba(0,0,0,0.46);
  -moz-box-shadow: inset 0px 43px 10px -42px rgba(0,0,0,0.46), inset 0px -43px 10px -42px rgba(0,0,0,0.46);
  box-shadow: inset 0px 43px 10px -42px rgba(0,0,0,0.46), inset 0px -43px 10px -42px rgba(0,0,0,0.46);
  
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.xraycontainer{
  position: relative;
  width: 80%;
  height: 80%;
  max-width: 1624px;
  max-height: 890px;
  cursor: none;
}

.xray {
  position: relative;
  width: 100%;
  height: 100%;

  border: 1px solid rgba(0,0,0,0.3);
  z-index: 2;
}

.xray svg {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 1624px;
  height: 890px;
}

.baseSVG {
  position: relative;
  top: 0;
  left: 0;
  
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shiftSvgUp1 {
  position: relative;
  top: -100%;
  
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shiftSvgUp2 {
  position: relative;
  top: calc(4 * -100% - 4px);
  z-index: 100;
  
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.drop-shadow:before,
.drop-shadow:after {
  content: "";
  position: absolute;
  /*z-index: -1;*/
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
  max-width: 300px;
  box-shadow :0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

.drop-shadow:after{
  right: 10px;
  left: auto;
  transform: rotate(3deg);
}


.paper {
  background-color: #ffffff00;
    background-image: -webkit-linear-gradient(
		rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.03) 30%,
		rgba(0, 0, 0, 0.08) 30%, rgba(255, 255, 255, 0.05) 70%,
		rgba(0, 0, 0, 0.1) 70%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: inset 0 0 0 .15em hsla(0,0%,0%,.1),
                inset 0 0 1em hsla(0,0%,0%,.05),
                0 5em 5em hsla(0,0%,0%,.1);
  position: relative;
  top: calc(2 * -100%);
  left: 0;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

.papervertical {
  background-color: #ffffff00;
  background-image: linear-gradient(to right, 
		rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.12) 33%,
		rgba(255, 255, 255, 0.03) 33%, rgba(0, 0, 0, 0.15) 67%,
		rgba(255, 255, 255, 0.05) 67%, rgba(0, 0, 0, 0.15) 100%);
  position: relative;
  top: calc(3 * -100% - 3px);
  left: 0;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

#compassOnMap {
	height: 50vh;
	width: calc(358 / 499 * 50vh);
	max-height: 499px;
	max-width: 358px;
	position: absolute;
	top: 30%;
	left: calc(-358 / 499 * 50vh / 3);
	z-index: 5;
}
#cameraOnMap {
	height: 50vh;
	width: calc(505 / 546 * 50vh);
	max-height: 546px;
	max-width: 505px;
	position: absolute;
	top:-65px;
	right: calc(-505 / 546 * 50vh / 3);
	transform: rotate(88deg);
	z-index: 5;
}

#noteOnMap {
	height: 11em;
	width: calc(558 / 400 * 11em);
	max-height: 400px;
	max-width: 558px;
	position: absolute;
	bottom: -4em;
	left: calc(50% - (558 / 400 * 11em) / 2);
	z-index: 5;
	transform: rotate(-7deg);
}
#noteOnMap img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}
#noteOnMap div {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
#noteOnMap div p {
	padding: 3%;
	margin: 10%;
	text-align: center;
	
	font-family: 'Lora', arial;
	font-style: italic;
}

#noteTextMouse { display: block; }
#noteTextFinger { display: none; }

@media (orientation: portrait) {
	.xraycontainer{
	  height: calc(80% - 3em);
	  margin-bottom: 3em;
	}
	#noteOnMap {
		bottom: -6em;
	}
}

@media (pointer: coarse) {
	#noteTextMouse { display: none; }
	#noteTextFinger { display: block; }
}