/* custom variables */
:root {
  /* colors */
  /* --bg-color: rgb(89, 59, 255); */
  --bg-black-color: rgba(0, 0, 0, 1);
  --bg-intro-color: rgba(0, 0, 0, 0.2);
  --white-color: white;
  --black-color: black;
  --gray-color: #272727;
  --btn-clr-hover-color: #CFCFDA;
  --blue-color: #3039c9;
  --scroll-color: #D7D7D7;
  --light-gray-color: rgb(235, 235, 235);
  /* main padding margin */
  --main-diff: 3em;
  --menu-top: calc(100vh - 295px);
  --menu-bot: 295px;
  --menu-width: 432px;
  --menu-bot-mobile: 225px;
  --menu-nav-mobile: 5.5em;
  /* main values */
  --blur-amount: 20px;
  --shadow-color: rgba(25, 25, 25, 0.1);
  /* font size */
  /* DESKTOP */
  --font-h1-size: 70px;
  --font-h2-size: 60px;
  --font-h3-size: 32px;
  --font-h4-size: 30px;
  --font-h5-size: 24px;
  --font-h6-size: 22px;
  --font-h7-size: 20px;
  --font-h8-size: 18px;
  --font-h9-size: 16px;
  --font-h10-size: 15px;
  --font-h11-size: 14px;
  --font-h12-size: 12px;
  --font-h13-size: 11px;
  /*button border */
  --button-border-radius: 47.5px;
  --button-border-stroke: 1px;
}


/* remove defaults */
* {
  text-decoration: none;
  padding: 0;
  margin: 0;
  font-family: "Space Grotesk Regular", sans-serif;
  outline: none;
  color: var(--white-color);
  position: relative;
  font-weight: 400;
  user-select: none;
}

b {
  font-family: "Space Grotesk Medium", sans-serif;
}

/* font style */
strong {
  color: var(--black-color);
}

#main {
  filter: blur(var(--blur-amount));
  transform: scale(1.4, 1.4);
  height: 100vh;
  width: 100vw;
  position: fixed;
}

/* container */
.container {
  position: relative;
  margin: var(--main-diff);
}

/* navigation */
.nav {
  height: calc(100vh - var(--main-diff) * 2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  position: absolute;
  right: 0;
}

/* PLAY STOP BUTTONS */
.play-button {
  display: none;
}

.stop-button {
  display: block;
}

/* controls */
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.controls>button {
  margin: 17.5px 0em;
}

/* menu */
/* menu top */
/* menu outer */
.menu-outer-top {
  position: absolute;
  top: 0;
  left: calc(var(--menu-width) * -1);
  height: var(--menu-top);
  width: var(--menu-width);
  background: var(--white-color);
  z-index: 2;
}

.menu-outer-top .container {
  height: calc(var(--menu-top) - var(--main-diff));
  margin-bottom: 0;
  margin-right: 0;
}

/* menu inside */
.menu-top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* ARROW */
.arrow-show {
  display: none;
}

/* menu top */
.menu-top-control li,
a {
  list-style: none;
  cursor: pointer;
}

/* set the style of the menu top */
.menu-top-control ul li:not(:first-child) {
  margin: 12px 0;
}

/* account for padding when hovered */
.colorSwitch ul li:not(:first-child) {
  margin-left: -0.5em;
}

.menu-top-control ul li:last-child {
  margin-bottom: 30px;
}

.menu-top-control ul li:first-child {
  margin-bottom: 30px;
}

.menu-top-control ul li:first-child a * {
  color: var(--gray-color);
}

.menu-top-control ul a * {
  color: var(--gray-color);
}

.menu-top-control {
  margin-bottom: 2em;
  display: flex;
  flex-direction: column;
}

.colorSwitch,
.saveSwitch {
  display: flex;
  align-items: flex-start;
}

.icon-color,
.icon-save {
  margin-right: 1em;
  top: calc(var(--font-h5-size)/6);
}

.icon-swell {
  opacity: 0.5;
}

/* logo */
.logo {
  width: 185px;
}

/*  */
/* menu bot */
/* menu outer bot */
.menu-outer-bot {
  position: absolute;
  bottom: 0;
  left: calc(var(--menu-width) * -1);
  height: var(--menu-bot);
  width: var(--menu-width);
  background: var(--black-color);
}

.menu-outer-bot .container {
  height: calc(var(--menu-bot));
  margin-top: 0;
  margin-bottom: 0;
}

/* menu bot */
.menu-bot {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* font styling */
.menu-bot>* {
  color: var(--white-color);
}

/* menu bot-top */
.menu-bot-top {
  border-bottom: 1px solid var(--gray-color);
  height: 50%;
  display: flex;
}

/* menu bot bot */
.menu-bot-bot {
  height: calc(50% - var(--main-diff));
  display: flex;
}

/* data */
.data-date {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.data-time,
.data-swell {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.data-swell {
  border-left: 1px solid var(--gray-color);
  padding-left: 2em;
}

/* Icons */
/*  */
/*  */
.align-icon {
  display: flex;
  align-items: center;
}

.pushTop {
  margin-top: 0.5em;
}

.icon-edit,
.icon-swell {
  margin-left: 1em;
}

.icon-edit img {
  width: 40px;
  height: 40px;
}

.edit-grfc {
  opacity: 0;
}

.edit-bg {
  position: absolute;
  opacity: 1;
}

button {
  display: flex;
  cursor: pointer;
  background: none;
  border: none;
}

/*  */
.btn-clr {
  padding: 0.2rem;
  border-radius: 100%;
  box-sizing: border-box;
}

/*  */

.btn-clr:hover {
  border: 2px solid var(--btn-clr-hover-color);
}

.btn-clr-active {
  border: 2px solid var(--btn-clr-hover-color);
}

.btn-clr-passive {
  border: 2px solid var(--white-color);
}

.pushRight {
  margin-left: 2em;
}

.showColor>* {
  display: flex;
}

.showSave,
.showColor {
  display: none;
}

/* LANGUAGES */

.language-active {
  opacity: 1;
}

.language-passive {
  opacity: 0.5;
}

.language-hide {
  display: none;
}

.language-show {
  display: inherit;
}

/* CANVAS */
.show-canvas {
  width: 800px;
  height: 500px;
  text-align: center;
  background: var(--blue-color);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  z-index: -10;
}

.scaleable-wrapper {
  /* resize: both; */
  position: fixed;
  /* MOBILE */
  /* overflow-x: visible;
  overflow-y: hidden; */
  background: var(--blue-color);
  height: 100%;
  width: 100%;
  z-index: -10;
}

/* LOADING */
#loading {
  position: relative;
  top: calc(var(--font-h5-size)/2);
  display: none;
}

#loading * {
  height: 10px;
  width: 10px;
  margin: 0 3px;
  /*background-color: var(--scroll-color);*/
  border-radius: 50%;
}

#loading h2 {
	position: absolute;
	display: block;
	width: 300px;
	margin: 100px auto 0;
	margin-left: -10%;
}

.loadingPoint {
  animation: loading-animation 1s infinite;
}

.loadingPoint:nth-child(2) {
  animation-delay: -0.6s;
}

.loadingPoint:nth-child(3) {
  animation-delay: -0.4s;
}

.loadingPoint:nth-child(4) {
  animation-delay: -0.2s;
}

@keyframes loading-animation {
  0% {
    opacity: 1;
    transform: scale(1, 1);
  }

  50% {
    opacity: 0;
    transform: scale(0, 0);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/*  */
.hide-desktop {
  display: none;
}


/* Custom css by Andrej */

#loading {
	position: fixed;
	width: 100%;
	height: 100%;
	padding-top: 20%;
	padding-left: 50%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999999;
	background: rgba(0, 0, 0, 0.9);
}