@-ms-viewport { width: 100%; }	
@viewport     { width: 100%; }


:root {
    --main-dark:  #181e22;
    --main-light: #f3f4f6;
    --main-accent: #e07a00;
    --scnd-accent: #009ae0;
    --main-moonlight: #fafafa;
    --footer-light:#8b8d8b;
    --footer-dark: black;
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}


html,
body {
    font-family: MainText, Fallback, Sans-serif;
    background-color: var(--main-dark);
    color: var(--main-light);
    margin:0; padding: 0;
    width:100%; height: 100vh;
    min-width: 320px;
    -webkit-font-smoothing: antialiased;
}

.splashscreen {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width:100%; height: 100vh;
    margin:0; padding: 0;
    overflow: hidden;
    background:
      center / cover no-repeat
        url("img/ui/logo-bg.svg"),
      center / cover no-repeat url("img/splash/bg-cover.jpg");
}

.splash-div {
    width:100%;
    text-align:center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.logo {
   width: 100%;
   height: auto;
   flex-grow: 1;
}

.social {
   flex-flow: row wrap;
}

h1, h2, h3 {
    color: var(--scnd-accent);
}

h4, h5, h6 {
    color: var(--scnd-accent);
}

a {
    text-decoration: none;
    color: var(--scnd-accent);
}

a:hover,
a.active {
    color: var(--main-accent);
}

a svg:hover #youtube   {fill: #e62117;}

a svg #youtube  { 
  transition: 200ms;
  transition-timing-function: ease-in-out;
  -webkit-transition: 200ms;
  -moz-transition: 200ms;
  -o-transition: 200ms;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
}

small {
  margin: 5px 0;
}

.footer {
color:var(--footer-light);
}