/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/main.css ***!
  \***********************************************************************/
body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

canvas {
	display: block;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	background-color: #000000;
	color: #ffffff;
}

#overlay > div {
	text-align: center;
}

#overlay > div > button {
	height: 20px;
	background: transparent;
	color: #ffffff;
	outline: 1px solid #ffffff;
	border: 0px;
	cursor: pointer;
}

#overlay > div > p {
	color: #777777;
	font-size: 12px;
}

/*!************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/index.css ***!
  \************************************************************************/
a {
    color: #8ff;
}

#menu {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

#container {
    /*background-color: #050505;*/
    /*background: radial-gradient(ellipse at center, #8397a5 0%, #333 100%);*/
    /*background: repeating-conic-gradient(*/
    /*		from 5deg at -50% 0%,*/
    /*		#475D6D, #111 2deg 7deg, #475D6D, #111 23deg 30deg, #475D6D 36deg);*/
    background: linear-gradient(280deg, rgba(3, 25, 50, 0.6) 10%, rgba(30,100,140,0.6) 60%, rgba(3, 25, 50, 0.6) 90%),
    linear-gradient(57deg, rgba(3, 25, 50, 0.6) 30%, rgba(30,100,140,0.6) 60%, rgba(3, 25, 50, 0.6) 70%),
    linear-gradient(300deg, rgba(3, 25, 50, 0.6) 50%, rgba(30,100,140,0.6) 70%, rgba(3, 25, 50, 0.6) 100%);
    position: absolute;
}

.element {
    /*width: 500px;*/
    /*height: 400px;*/
    border-radius: 7px;
    /*background: linear-gradient(280deg, rgba(3, 25, 50, 0.6) 10%, rgba(30,100,140,0.6) 60%, rgba(3, 25, 50, 0.6) 90%),*/
    /*linear-gradient(57deg, rgba(3, 25, 50, 0.6) 30%, rgba(30,100,140,0.6) 60%, rgba(3, 25, 50, 0.6) 70%),*/
    /*linear-gradient(300deg, rgba(3, 25, 50, 0.6) 50%, rgba(30,100,140,0.6) 70%, rgba(3, 25, 50, 0.6) 100%);*/
    box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
    border: 1px solid rgba(127,255,255,0.25);
    font-family: Helvetica, sans-serif;
    text-align: center;
    line-height: normal;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.element a {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.element:hover {
    box-shadow: 0px 0px 30px rgba(0,255,255,0.75);
    border: 3px solid rgba(127,255,255,0.75);
}

.block-header {
    height: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.block-body {
    height: 80%;
    padding: 10px 0;
}

.block-footer {
    height: 10%;
}

.element .number {
    /*position: absolute;*/
    /*top: 0px;*/
    /*right: 5px;*/
    font-size: 20px;
    font-weight: bold;
    color: rgba(183, 197, 212, 0.75);
    text-shadow: 0 0 10px rgba(0,255,255,0.95);
    cursor: pointer;
}

.element .number:hover {
    color:  rgba(0,255,255,0.75);
}

.element .symbol {
    /*position: absolute;*/
    /*top: 5px;*/
    /*left: 5px;*/
    /*right: 10px;*/
    /*bottom: 10px;*/
    font-size: 20px;
    font-weight: bold;
    color: rgba(183, 197, 212, 0.75);
    text-shadow: 0 0 10px rgba(0,255,255,0.95);
    cursor: pointer;
}

.element .symbol:hover {
    color:  rgba(0,255,255,0.75);
}

.element .aimage {
    width: 90%;
    height: 85%;
    margin-top: 7%;
}

.element .image {
    /*position: absolute;*/
    /*top: 50px;*/
    /*left: 10px;*/
    /*right: 10px;*/
    /*bottom: 50px;*/
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    object-fit: cover;
    width: 100%;
    height: 100%;
    border: 0px dotted rgba(82, 83, 83, 0.75);
    /*z-index : 10;*/
}

/*.element .iframe {*/
/*    position: absolute;*/
/*    top: 30px;*/
/*    left: 5px;*/
/*    right: 5px;*/
/*    !* bottom: 50px; *!*/
/*    display: none;*/
/*    z-index: 20;*/
/*    border: 0px;*/
/*    width: 196%;*/
/*    height: 157%;*/
/*    background-color: white;*/
/*    -webkit-transform: scale(0.5);*/
/*    transform: scale(0.5) translate3d( 0, 0, 0);*/
/*    -ms-zoom: 0.5;*/
/*    -moz-transform: scale(0.5);*/
/*    -moz-transform-origin: 0 0;*/
/*    -o-transform: scale(0.5);*/
/*    -o-transform-origin: 0 0;*/
/*    transform-origin: left top;*/
/*}*/

.element .details {
    /*position: absolute;*/
    /*bottom: 10px;*/
    /*left: 5px;*/
    /*right: 5px;*/
    font-size: 12px;
    color: rgba(127,255,255,0.75);
    cursor: pointer;
}

.element .details:hover {
    color:  rgba(0,255,255,0.75);
}

button {
    color: rgba(127,255,255,0.75);
    background: transparent;
    /*outline: 1px solid rgba(127,255,255,0.75);*/
    border: 1px solid rgba(127,255,255,0.75);
    border-radius: 7px;
    padding: 5px 10px;
    cursor: pointer;
    opacity: 0.3;
}

button:hover, .selected {
    background-color: rgba(0,255,255,0.5);
    opacity: 1;
}

button:active {
    color: #000000;
    background-color: rgba(0,255,255,0.75);
}