body
{
    text-align: center;
    background-color: #071c24;
}
.wrapper
{
  position: absolute;
  top:60vh; 
  left:calc(50% - 150px);
}
.bt
{
  position: absolute;
  border-bottom: 100px solid #1e252a;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-radius: 0% 0% 50% 50%;
  height: 0;
  cursor: pointer;
  width: 200px;
}

.base
{
  z-index: 1;
}
.border
{
  position: relative;
  left:-5px;
  top: -0.23em;
  z-index: 0;
  border-bottom: 108px solid #0F9C94;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-radius: 0% 0% 50% 50%;
  height: 0;
  width: 206px;
}

.border2
{
  position: relative;
  top:calc(-108px + -1em);
  left:calc(-5px + -1em);
  z-index: -1;
  border-bottom: calc(108px + 1.5em) solid #081620;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-radius: 0% 0% 50% 50%;
  height: 0;
  width: calc(206px + 1em);
}
.border3
{
  position: relative;
  top:calc(-216px + -2.8em);
  left:calc(-5px + -1.35em);
  z-index: -2;
  border-bottom: calc(108px + 2em) solid #7A6B43;
  border-left: 66px solid transparent;
  border-right: 66px solid transparent;
  border-radius: 0% 0% 50% 50%;
  height: 0;
  width: calc(206px + 1em);
}
.bt_text
{
  color: #9fc3c3;
  position:relative;
  font-family: 'Eczar', serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 3em;
  top:0.4em;
  left:0em;
}

h1{
    margin-top: 27vh;
  color: #9fc3c3;
}
h3
{
  color: #9fc3c3;
}

@keyframes spin3D {
  from {
    transform: rotate3d(.5,.5,.5, 360deg);
  }
  to{
    transform: rotate3d(0deg);
  }
}
.active
{
  display:flex !important;
}
.spinner {
  position: absolute;
  top:38vh;
  left:44.5vw;
  display:none;
  width: 200px;
  height: 200px;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.leo-border-1 {
  position: absolute;
  width: 100px;
  height: 100px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(63,249,220);
  background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
  animation: spin3D 1.8s linear 0s infinite;
}

.leo-core-1 {
  width: 100%;
  height: 100%;
  background-color: #37474faa;
  border-radius: 50%;
}

.leo-border-2 {
  position: absolute;
  width: 100px;
  height: 100px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(251, 91, 83);
  background: linear-gradient(0deg, rgba(251, 91, 83, 0.1) 33%, rgba(251, 91, 83, 1) 100%);
  animation: spin3D 2.2s linear 0s infinite;
}

.leo-core-2 {
  width: 100%;
  height: 100%;
  background-color: #1d2630aa;
  border-radius: 50%;
}