body {
    background-color: black;
    color: white;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
}

.content {
    margin-top: 45vh;
}

.enter {
    text-decoration: none;
    color: white;
    padding: 3px;
    border: 1px solid white;
    border-radius: 10%;
    margin: 10px;
    cursor: pointer;
}

.enter:hover {
    background-color: white;
    color: black;
    border: 1px solid white;
    border-radius: 5px; 
}

.draggable {
  position: absolute;
  z-index: 9;
  text-align: center;
  /* From https://css.glass */
  background: rgba(0, 0, 0, 0);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.6px);
  -webkit-backdrop-filter: blur(6.6px);
  border: 1px solid rgba(255,255,255, 0.6);
}

.draggableheader {
  padding: 0px 10px 0px 10px;
  cursor: move;
  z-index: 10;
  color: #fff;
  text-align: start;
  /* From https://css.glass */
  background: rgba(33, 150, 243, 0.40);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.6px);
  -webkit-backdrop-filter: blur(6.6px);
  border: 1px solid rgba(33, 150, 243, 0.6);
}

.close {
  border-radius: 30%;
  text-decoration: none;
  color: white;
  padding: 3px;
  margin: 3px;
  cursor: pointer;
  float: right;
}

.close:hover {
  background-color: red;
}

#calculator {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 5px;
      max-width: 200px;
      margin: 0 auto;
      padding: 10px;
      /* From https://css.glass */
      background: rgba(123, 123, 123, 0.20);
      border-radius: 0 0 16px 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(6.6px);
      -webkit-backdrop-filter: blur(6.6px);
      /* border: 1px solid rgba(123, 123, 123, 0.6); */
    }

#calculator button {
      width: 100%;
      padding: 10px;
      font-size: 18px;
      /* From https://css.glass */
      background: rgba(150, 149, 149, 0.20);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(6.6px);
      -webkit-backdrop-filter: blur(6.6px);
      border: 1px solid rgba(150, 149, 149, 0.6);
    }

#calculator button:hover {
  background-color: white;
  color: rgba(135,135,135,.79);
  cursor: pointer;
}

#display {
      grid-column: 1 / -1;
      padding: 10px;
      font-size: 20px;
      text-align: right;
      color: black;
        /* From https://css.glass */
      background: rgba(0, 0, 0, 0.0);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(6.6px);
      -webkit-backdrop-filter: blur(6.6px);
      border: 1px solid rgba(255, 255, 255, 0.6);
    }

#button-clear{
      grid-column: 1 / -1;
}

.btn {
  text-decoration: none;
  cursor: pointer;
  padding: 10px 20px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff80;
  text-shadow: none;
  background: transparent;
  box-shadow: transparent;
  border: 1px solid #ffffff80;
  transition: 0.5s ease;
  user-select: none;
}

.btn-green:hover, .btn-green:focus {
  color: #ffffff;
  background: #AB40F2;
  border: 1px solid #AB40F2;
  text-shadow: 0 0 5px #ffffff,
              0 0 10px #ffffff,
              0 0 20px #ffffff;
  box-shadow: 0 0 5px #AB40F2,
              0 0 20px #AB40F2,
              0 0 50px #AB40F2,
              0 0 100px #AB40F2;
}

.btn-blue:hover, .btn-blue:focus {
  color: #ffffff;
  background: #008cff;
  border: 1px solid #008cff;
  text-shadow: 0 0 5px #ffffff,
              0 0 10px #ffffff,
              0 0 20px #ffffff;
  box-shadow: 0 0 5px #008cff,
              0 0 20px #008cff,
              0 0 50px #008cff,
              0 0 100px #008cff;
}

.btn-yellow:hover, .btn-yellow:focus {
  color: #ffffff;
  background: #e3ff30;
  border: 1px solid #e3ff30;
  text-shadow: 0 0 5px #1f1f1e,
              0 0 10px #1f1f1e,
              0 0 20px #1f1f1e;
  box-shadow: 0 0 5px #e3ff30,
              0 0 20px #e3ff30,
              0 0 50px #e3ff30,
              0 0 100px #e3ff30;
}


body {
    background: -moz-linear-gradient(45deg, #02e1ba 0%, #26c9f2 29%, #d911f2 66%, #ffa079 100%);
    background: -webkit-linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
    background: linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
	/*min-height: calc(100vh - 2rem);*/
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-evenly;
	overflow: hidden;
	position: relative; 
}

body::before, 
body::after {
	content: "";
	width: 70vmax;
	height: 70vmax;
	position: absolute;
	background: rgba(255, 255, 255, 0.07);
	left: -20vmin;
	top: -20vmin;
	animation: morph 15s linear infinite alternate, spin 20s linear infinite;
	z-index: 1;
	will-change: border-radius, transform;
	transform-origin: 55% 55%;
	pointer-events: none; 
}
	
body::after {
    width: 70vmin;
    height: 70vmin;
    left: auto;
    right: -10vmin;
    top: auto;
    bottom: 0;
    animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
    transform-origin: 20% 20%; 
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0 50%
	}
}

@keyframes morph {
  0% {
    border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
  100% {
    border-radius: 40% 60%; } 
}

@keyframes spin {
  to {
    transform: rotate(1turn); 
  } 
}
	.st0{display:none;}
	.st1{display:inline;}
	.st2{opacity:0.29;}
	.st3{fill:#FFFFFF;}
	.st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
	.st5{clip-path:url(#SVGID_4_);}
	.st6{clip-path:url(#SVGID_6_);}
	.st7{clip-path:url(#SVGID_8_);}
	.st8{clip-path:url(#SVGID_10_);}
	.st9{fill:none;}
	.st10{clip-path:url(#SVGID_12_);}
	.st11{opacity:0.7;}
	.st12{clip-path:url(#SVGID_14_);}
	.st13{opacity:0.2;}
	.st14{clip-path:url(#SVGID_16_);}
	.st15{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}