@charset "UTF-8";

@font-face {
    font-family: "System Font";
    src: url("https://cht.venith.net/assets/fonts/SFUIRounded.woff") format('woff');
}
:root {
	--genwidth: 850px ;
	--navwidth: 175px ;
	--fg: #ddd ;
	--altfg: #ccc ;
	--fgemph: white ;
	--bg: #111 ;
	--altbg: #333 ;
	--emph: #333 ;
	--bordercolor: #555 ;
	--limish: #0e0 ;
}

body {
    font-family: "System Font";
        background: linear-gradient(indigo, darkslategray) fixed ;
        background: #100 ;
        margin-bottom: 100px ;

    font-weight: 300;
}


html, body{ height: 100% }

a{ color: #EE4B2B }

h1, h2, h3{ font-weight: lighter }

body{
    color: #fff;
    float: right;
    padding: 1.5em;
    max-width: 35em;
    background: url(https://cht.venith.net/assets/images/bg.gif) center center/cover fixed no-repeat;
}
header{
    text-align: right;
    margin-bottom: 1em;
}
header .moeta-name{
    padding: 1rem;
    text-align: center;
    display: inline-block;
    background: rgba(0, 0, 0, .5);
}

.moeta-name h1{
    margin-bottom: 0;
}
.moeta-name p{
    opacity: .6;
    font-size: .875em;
}

main{
    padding: 1.5em;
    margin-bottom: 2em;
    background: rgba(0, 0, 0, .5);
}

@media screen and (max-width: 768px){
    body{
        float: none;
        padding: 0;
        max-width: 100%;
    }

    header{
        display: flex;
        align-items: flex-end;
        height: 100%;
        
    }
    header .moeta-name{
        padding: 2em 3em;
    }
}

main h2{
    position: relative;
    margin-top: 3em;
}
main h2:before{
    content: '';
    height: 100%;
    width: .5rem;
    left: -1.5rem;
    background: #EE4B2B;
    position: absolute;
}

main h2:first-child{
    margin-top: 0;
}

footer{
    padding: 1em;
    text-align: center;
    background: rgba(0, 0, 0, .6);
}
nav {
  background-color: #333;
  overflow: hidden;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

nav li {
  display: inline-block;
  margin-right: 20px;
}

nav li:last-child {
  margin-right: 0;
}

nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav a:hover {
  background-color: #ddd;
  color: black;
}