body {
    background: #212121;
    color:#ececec;
    font-family: 'Inconsolata',serif;
    font-size:1.1rem;
    line-height:150%;
    transition:color .4s, background .5s;
    hyphens: auto;
}

.light {
    background:#f2f2f2;
    color:#1c1c17;
    transition:color .4s, background .5s;
}

strong,b,h1,h2,h3,h4,h5,h6,a {
    color:#fff;
    font-weight:900;
}

h1,h2 {
    margin-top:7rem;
}

.light strong,
.light b,
.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6,
.light a {
    color: #00b9ff;
    transition:color .5s;
}

strong,b{
    text-transform:uppercase;
    letter-spacing: 2px;
    background:#505050;
}

.light strong,
.light b {
    background: #c7f0ff;
}

a:link,
a:visited {
    border-bottom:2px solid #fff;
    text-decoration:none;
}

.light a:link,
.light a:visited {
    border-bottom: 2px solid #00b9ff;
    text-decoration: none;
}

a::before {
    content:"→";
}

a:hover,
a:active {
    border-bottom:2px dotted #fff;
}

.light a:hover,
.light a:active {
    border-bottom: 2px dotted #00b9ff;
}

.light a.btn:hover {
    border-bottom: 2px solid #00b9ff;
}

.holder {
    width:90%;
    max-width:45rem;
    margin:2rem auto;
}

.logo {
    display:block;
    margin:20px auto;
    width:90%;
    max-width:400px;
}

.light .logo {
    -webkit-filter: invert(75%);
    filter: invert(75%);
}

.btn-holder {
    width:104%;
    margin-left:-2%;
}

.btn {
    text-decoration:none;
    display:inline-block;
    height:4rem;
    line-height:3.8rem;
    text-align:center;
    width:33%;
    box-sizing: border-box;
    margin:0;
    padding:0;
    border:2px solid #fff; 
    border-collapse: collapse;
}

.btn:hover {
    background:#505050;
    border-style: solid;
}

.light .btn:hover {
    background: #c7f0ff;
}

.light .btn {
    border-color:#00b9ff;
}

.btn::before {
    content:"";
}

.btn-left {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.btn-middle {
    width:34%;
    border-left:0;
    border-right:0;
}

.btn-right {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

a.btn-active,
a.btn-active:hover {
    background:#379813;
}

a.btn-left.btn-active,
a.btn-left.btn-active:hover {
    background:#6f1a13;
}

.light a.btn-active,
.light a.btn-active:hover {
    color:#1c1c17;
    background: #6dbf4f;
}

.light a.btn-left.btn-active,
.light a.btn-left.btn-active:hover {
    background: #b7443b;
}

a.switch {
    text-decoration:none;
    border:none;
    position:fixed;
    bottom:1rem;
    right:1rem;
    height:5rem;
    width:5rem;
    line-height:5rem;
    border-radius:100%;
    background:#505050;
    text-align:center;
}

a.switch::before {
    content:"";
}

.light a.switch {
    background:#00b9ff;
    color:#f2f2f2;
    border:none;
}

.light a.switch:hover {
    border:none;
}

.for-light,
.light .for-dark {
    display:none;
}

.light .for-light,
.for-dark {
    display:block;
    margin:1rem auto;
}