@font-face {
  font-family: 'Jura';
  font-weight: 100;
  src: url(../font/Jura/Jura-Light.ttf);
}

@font-face {
  font-family: 'Jura';
  font-weight: 300;
  src: url(../font/Jura/Jura-Regular.ttf);
}

@font-face {
  font-family: 'Jura';
  font-weight: 600;
  src: url(../font/Jura/Jura-Medium.ttf);
}

@font-face {
  font-family: 'Jura';
  font-weight: 900;
  src: url(../font/Jura/Jura-DemiBold.ttf);
}

/* Overwrites */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

::selection {
  background: none;
}

::-webkit-scrollbar {
  display: none;
}

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 960px;
  min-height: 580px;
  margin: 0;
  font-family: 'Jura', sans-serif;
  color: #37F3FF;
  overflow: hidden;
  font-kerning: auto;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga" 0;
  background: #0B0B0B;
  background-image: url(/src/style/bg.png);
  background-size: 20px 20px;
  box-shadow: 0 0 20px 30px rgba(0, 0, 0, 0.5) inset;
}

body:before, body:after {
  content: '';
  display: block;
  position: fixed;
  width: 120vmin;
  height: 120vmin;
  pointer-events: none;
  margin: auto;
  left: 50%;
  top: 50%;
  border-radius: 100%;
  border: 1px solid rgba(104, 246, 255, 0.22);
  border-right-style: dashed;
  border-left-style: dashed;
  box-shadow: 0 0 0 10px rgba(55, 243, 255, 0.05);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

body:before {
  width: calc(100vmax - 10px);
  height: calc(100vmax - 10px);
  border-color: #008288;
  border-style: dotted;
  box-shadow: 0 0 100px rgba(55, 243, 255, 0.2), 0 0 100px rgb(0, 0, 0) inset;
}

h1, h2, h3, p, span, small, div {
  cursor: default;
}

code, code span {
  cursor: text;
}

h1, h2 {
  margin: 0;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(55, 243, 255, 0.6);
}

h1 {
  float: right;
  text-align: center;
}

h3 {
  display: inline-block;
  margin-bottom: 0;
  padding-bottom: 2px;
  border-bottom: 3px double #0E7379;
}

a {
  display: inline-block;
  color: #1CF2FF;
  text-decoration: none;
}

.shadow-bg {
  background: rgba(0, 0, 0, 0.4);
}

.top-line {
  position: relative;
  border-top: 1px solid #0E7379;
}

.top-line:before {
  content: "";
  position: absolute;
  display: block;
  left: 2px;
  top: -3px;
  width: 1px;
  height: 5px;
  background-color: #17C3CD;
}

.top-line:after {
  content: "";
  position: absolute;
  display: block;
  right: 2px;
  top: -3px;
  width: 1px;
  height: 5px;
  background-color: #17C3CD;
}

.top-dotted {
  margin: 5px 2px 0 2px;
  border-top: 3px double #18474A;
}

.container {
  padding: 10px;
}

.container-line > div {
  padding: 5px;
}

.container-left {
  text-align: left;
}

.container-left > h3 {
  padding-right: 4px;
}

.container-right > h3 {
  padding-left: 4px;
}

.container-right {
  text-align: right;
}

.container-left > div {
  border-left: 1px solid #0E7379;
  padding-bottom: 15px;
}

.container-right > div {
  border-right: 1px solid #0E7379;
  padding-bottom: 15px;
}

flex-container {
  display: flex;
  display: -webkit-flex;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
}

.tool-sidebar {
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.flex-grow {
  flex: 1;
  -webkit-flex: 1;
  padding: 10px 0;
  overflow: hidden;
}

/**/

board {
  perspective: 900px;
}

register-container {
  display: block;
}

stack-container {
  display: block;
}

code-container {
}

clock-container {
  display: block;
}

condition-container {
  display: block;
}

/* 3D */

.rot-top {
  transform: rotateX(-15deg) scaleY(0.95);
}

.rot-left {
  transform: rotateY(10deg) scaleX(0.9);
}

.rot-right {
  transform: rotateY(-10deg) scaleX(0.9);
}