@import url("https://fonts.googleapis.com/css?family=Inconsolata|Lato:300,400,700");
html, body, h1, h2, h3, h4, h5, h6, p, li, ol, ul, pre {
margin: 0;
padding: 0;
}
html, body { min-height: 100%; }
body {
background-color: #345;
background-image: linear-gradient(to bottom, #0009, transparent);
color: #eee;
font-family: 'Lato', sans-serif;
font-size: 62.5%;
padding: 0 20px;
box-sizing: border-box;
}
div menu {
position: sticky;
top: 0
}
code {
background: #fff1;
font-family: 'Inconsolata', monospace;
padding: .2em .4em;
}
.content {
background-color: #fff;
border-radius: 8px;
box-sizing: border-box;
color: #666;
font-size: 1.6em;
line-height: 1.4em;
margin: 20px auto;
margin-top: 80px;
padding: 20px;
width: 100%;
max-width: 800px;
}
.content ul {
margin: .5em 2em;
padding: 0;
}
#footer {
background-color: #246c;
background-image: linear-gradient(to bottom, transparent, #0009);
border-top: 1px solid #fff3;
box-shadow: inset 0 1px 0 #fff3, 0 0 32px #000;
overflow: hidden;
padding: 8px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9001;
}
#footer a {
color: #85c6f6;
padding: 1em 0;
text-decoration: none;
}
#footer ul {
display: flex;
list-style: none;
justify-content: center;
font-size: 2em;
font-weight: 300;
}
#footer ul li {
padding: 0 .5em;
} .links {
font-size: 1rem;
font-weight: 300;
}
.links > a {
color: #fff000;
padding: .3em 0;
text-align: center;
text-decoration: none;
transition: all .5s;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}
.links > a:hover {
background: #f69374 !important;
border-radius: 5px;
}   #header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.links {
display: grid;
grid-template-columns: repeat(var(--items), 1fr);
position: relative;
width: 1300px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
margin-bottom: 5px;
}
}
@media screen and (max-width: 900px) {
.links {
grid-template-columns: none !important;
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
.links > .line {
opacity: 0;
transition: all .5s;
position: absolute;
bottom: 0;
left: var(--left, calc(100% / var(--items) * (var(--index) - 1)));
width: var(--width, calc(100% / var(--items)));
--index: 0;
}
.links > a:hover ~ .line {
opacity: 1;
}
.links > a:nth-of-type(1):hover ~ .line { --index: 1; }
.links > a:nth-of-type(2):hover ~ .line { --index: 2; }
.links > a:nth-of-type(3):hover ~ .line { --index: 3; }
.links > a:nth-of-type(4):hover ~ .line { --index: 4; }
.links > a:nth-of-type(5):hover ~ .line { --index: 5; }
.links > a:nth-of-type(6):hover ~ .line { --index: 6; }
.links > a:nth-of-type(7):hover ~ .line { --index: 7; }
.links > a:nth-of-type(8):hover ~ .line { --index: 8; }
.links > a:nth-of-type(9):hover ~ .line { --index: 9; }
.links > a:nth-of-type(10):hover ~ .line { --index: 10; }
.links > a:last-of-type:hover ~ .line { --index: var(--items); }