/* -------------------------------------------------------- */
body {
  padding: 1% 0%;
  background-color: rgb(170, 187, 204, 0.05);
  color: rgb(52, 58, 64);
  overflow: hidden;
}
#outer_container {
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  max-width: 1280px;
  position: relative;
}

/* -------------- Header ------------------------------------------ */
/*
header {
	border-bottom: 1px solid #ddd;
}
*/
#controls a {
  display: inline-block;
}
#controls a i {
  color: rgb(52, 58, 64);
}

/* -------------- Main ------------------------------------------ */
#main {
  max-width: 1280px;
}
#canvas_container {
  height: auto;
  padding: 1% 4%;
}
#inner_container {
  /* height: 55%; */
  overflow-y: auto;
}
#inner_container img {
  border-radius: 4px;
  max-width: 100%;
  height: auto;
}
ol li {
  margin: 10px;
}

/* -------------------------------------------------------- */
.btn-move-down:active {
  transform: translateY(4px);
  transition: 0.3s;
}
.text-just {
  text-align: justify;
}

/* -------------- Scroll Bars ------------------------------------------ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: rgb(109, 117, 125, 0.7);
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgb(109, 117, 125, 0.8);
}
::-webkit-scrollbar-thumb:active {
  background-color: rgb(109, 117, 125);
}

/*
* {
	font-size: calc(0.7vmin + 0.04rem);
}
*/

.line {
  position: absolute;
  background-color: rgb(82, 88, 94);
  height: 1px;
  width: 2%;
}

.line:nth-of-type(1) {
  rotate: 30deg;
  top: 32%;
  left: 36.5%;
}

.line:nth-of-type(2) {
  rotate: 30deg;
  top: 53.3%;
  left: 41%;
}

.line:nth-of-type(3) {
  rotate: 90deg;
  top: 26.5%;
  left: 48.6%;
}

.line:nth-of-type(4) {
  rotate: -30deg;
  top: 56.5%;
  left: 74.8%;
}

.line:nth-of-type(5) {
  rotate: 60deg;
  top: 37.5%;
  left: 62%;
}

.line:nth-of-type(6) {
  rotate: 120deg;
  top: 38.5%;
  left: 53.5%;
}
.line:nth-of-type(7) {
  rotate: 120deg;
  top: 32.3%;
  left: 53.3%;
}
.line:nth-of-type(8) {
  rotate: 220deg;
  top: 40.3%;
  left: 47.3%;
}
.line:nth-of-type(9) {
  rotate: 120deg;
  top: 40.8%;
  left: 33.8%;
}
.line:nth-of-type(10) {
  rotate: 120deg;
  top: 52.5%;
  left: 36.5%;
}
.line:nth-of-type(11) {
  rotate: 240deg;
  top: 31.2%;
  left: 67.1%;
}
.line:nth-of-type(12) {
  rotate: 180deg;
  top: 29.8%;
  left: 48.1%;
}
.line:nth-of-type(13) {
  rotate: 120deg;
  top: 56.8%;
  left: 69.8%;
}
#bg {
  width: 68%;
  margin: 0 !important;
}

svg {
  position: absolute;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  width: 4%;
}

svg:hover {
  scale: 1.2;
}

#liberty-statue {
  top: 27%;
  left: 34%;
}

#christ {
  top: 49%;
  left: 38.5%;
}

#big-ben {
  top: 19%;
  left: 47.5%;
}

#opera {
  top: 52%;
  left: 75%;
}

#taj-mahal {
  top: 32%;
  left: 61%;
}

#pyramids {
  top: 38%;
  left: 51%;
}

#acropolis {
  top: 26%;
  left: 54%;
}
#djenne {
  top: 35%;
  left: 44.5%;
}
#maya {
  top: 39.7%;
  left: 31.5%;
}
#machou {
  top: 52.5%;
  left: 33.5%;
}
#great_wall {
  top: 26%;
  left: 64.5%;
}
#eiffel {
  top: 25.5%;
  left: 45.7%;
  fill: grey;
}
#uluru {
  top: 57.5%;
  left: 67.5%;
}
dialog {
  border: none;
  border-radius: 15px;
  box-shadow:
    rgba(255, 255, 255, 0.25) 0px 50px 100px -20px,
    rgba(255, 255, 255, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

#dialog-img {
  max-height: 410px;
  width: auto !important;
  object-fit: contain;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

dialog[open] {
  animation: scaleIn 0.3s ease-in forwards;
}

@keyframes scaleIn {
  0% {
    scale: 0.25;
  }
  100% {
    scale: 1;
  }
}

.mobile dialog {
  width: 80% !important;
}
.mobile #bg {
  width: 100%;
}

.mobile svg {
  width: 10%;
}

.mobile .line {
  width: 4%;
}

.mobile #liberty-statue {
  top: 34%;
  left: 25%;
}

.mobile #christ {
  top: 49%;
  left: 38.5%;
}

.mobile #big-ben {
  top: 34%;
  left: 44.5%;
}

.mobile #opera {
  top: 48.4%;
  left: 82.8%;
}

.mobile #taj-mahal {
  top: 40%;
  left: 61%;
}

.mobile #pyramids {
  top: 45%;
  left: 51%;
}

.mobile #acropolis {
  top: 37%;
  left: 54%;
}

.mobile #djenne {
  top: 42%;
  left: 37.5%;
}

.mobile #maya {
  top: 45.5%;
  left: 18.5%;
}
.mobile #machou {
  top: 51.5%;
  left: 20.5%;
}

.mobile #great_wall {
  top: 37%;
  left: 70.5%;
}

.mobile #eiffel {
  top: 37.5%;
  left: 39.7%;
  fill: grey;
}

.mobile #uluru {
  top: 54.5%;
  left: 73.5%;
}

.mobile .line:nth-of-type(1) {
  rotate: 45deg;
  top: 41%;
  left: 31%;
}

.mobile .line:nth-of-type(2) {
  rotate: 30deg;
  top: 53%;
  left: 39%;
}

.mobile .line:nth-of-type(3) {
  rotate: 90deg;
  top: 40%;
  left: 47.5%;
}

.mobile .line:nth-of-type(4) {
  rotate: -45deg;
  top: 53%;
  left: 85%;
}

.mobile .line:nth-of-type(5) {
  rotate: 60deg;
  top: 45%;
  left: 66%;
}

.mobile .line:nth-of-type(6) {
  rotate: 120deg;
  top: 45.8%;
  left: 54.4%;
}
.mobile .line:nth-of-type(7) {
  rotate: 120deg;
  top: 42.2%;
  left: 54.3%;
}
.mobile .line:nth-of-type(8) {
  rotate: 220deg;
  top: 46.3%;
  left: 45.3%;
}
.mobile .line:nth-of-type(9) {
  rotate: 120deg;
  top: 46.8%;
  left: 25.1%;
}
.mobile .line:nth-of-type(10) {
  rotate: 120deg;
  top: 52%;
  left: 29.1%;
}
.mobile .line:nth-of-type(11) {
  rotate: 240deg;
  top: 42%;
  left: 74.1%;
}
.mobile .line:nth-of-type(12) {
  rotate: 180deg;
  top: 41.6%;
  left: 46.1%;
}
.mobile .line:nth-of-type(13) {
  rotate: 120deg;
  top: 54%;
  left: 79.1%;
}
