@import url( "fonts.css" );
@import url( "templates.css" );
@import url( "animation.css" );

html body, 
body,
html[lang] body
{
  --font-family:"Jost";
  font-family: var( --font-family );
  margin:0px;
  padding:0px;
  background-color: hsl(0,0%,10% );
  color:hsl(0,0%,80%);
  overflow-x:hidden !important;
  background: linear-gradient(90deg, hsl(0,0%,0%) 0%, hsl(0,0%,10%) 30%, hsl(0,0%,10%) 70%, hsl(0,0%,0%) 100%);
  
}

text a,
text a tspan
{
  transition: fill 300ms ease;
}



text a:hover
{
  fill: white;
}

text a:hover tspan
{
  fill: white;
}


a
{
  color: hsl(225.5, 95.5%, 73.7%);
  cursor: pointer;
}

*:active, *:focus,
a, a:active, a:focus
{
	outline: none !important;
}

app-stage
{
  overflow:hidden !important;
  display: block;
  width: calc( var(--swidth ) );
  position: relative;
  left: calc( var(--sx ) );
  background-color: hsl(0,0%,5%);
}

.center-vertically
{
  margin-top: 50vh;
  transform: translateY(-50%);
}

@media ( orientation: landscape )
{
  a
  {
    transition: color 200ms ease;
  }
  
  a:hover
  {
    color: hsl( 210, 100%, 84% );
  }
}

button
{
  font-family: Jost;
  padding: 0.5em 1em;
  border-radius: 0.6em;
  outline: 0px solid transparent;
  border: none;
  font-size: calc( 18 / 20 * var( --sw ) );
  background-color: hsl( 0, 0%, 80% );
  color: hsl( 0, 0%, 30% );
  transition: background-color 200ms ease;  
  cursor: pointer;
}

button.disabled
{
  opacity: 0.5;
  pointer-events: none;
}

button:hover
{
  color: hsl( 0, 0%, 10% );
  background-color: hsl( 0, 0%, 100% );
}


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

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

@media ( orientation: landscape ) 
{
  portrait-only, .portrait-only
  { 
    display: none;
  }

  body
  {
    font-size: calc( 16 / 20 * var( --sw ) );
  }

  portrait-br
  {
    display: none;
  }

  landscape-br
  {
    display: block;
  }
}

@media ( orientation: portrait ) 
{
  landscape-only, .landscape-only
  { 
    display: none;
  } 

  body
  {
    font-size: 1.5vw;
  } 
 
  portrait-br
  {
    display: block;
  }

  landscape-br
  {
    display: none;
  }


}

clear-float, .clear-float
{
  display: block;
  clear:both;
}

svg-container
{
  display: block;
  position: relative;
}

.svg-bg,
.svg-overlay
{
  display:block;
  height: auto;
}

.svg-overlay
{
  position: absolute;
  left:0px;
  top:0px; 
}

.hidden, hidden-data
{
  display:none
}

.hidden.show-block
{
  display: block;
}

[data-private]
{
  opacity: 0;
  transition: opacity 200ms ease;
}

[data-private].visible
{
  opacity: 1;
}

[data-toggle-class],
.cursor-on-hover
{
  cursor: pointer;
}

@media ( orientation:portrait ) 
{
  #pic-1 svg, #pic-2 svg 
  {
    height: 8vw;
    width: auto;
  }

  #pic-3 svg
  {
    height: 24vw;
    width: auto;
  }

}

@media ( orientation:landscape ) 
{
  #pic-1 svg, #pic-2 svg 
  {
    height: calc( 20 / 20 * var( --sw ) );
    width: auto;
  }

  #pic-3 svg
  {
    height: calc( 60 / 20 * var( --sw ) );
    width: auto;
  }

}

hidden-data
{
  display: none;
}

a.clean
{
  color: inherit;
  text-decoration: none;
  border: none;
  outline:none;
}

a:visited.clean
{
  color: inherit;
  text-decoration: none;
  border: none;
  outline:none;
}

.hover-fade
{
  opacity: 0.7;
  transition: opacity 200ms ease;
}

.hover-fade:hover
{
  opacity: 1
}


[data-svg-link]
{
  opacity: 0;
  transition: opacity 400ms ease;
}

[data-svg-link]:hover
{
  opacity: 1;
}