html,
body {
background: #021012;
}
a {
color: #00ffff;
display: inline-block;
/* margin: 0 20px; */
position: relative;
text-decoration: none;
}
a:after {
content: "";
height: 1px;
background: white;
position: absolute;
pointer-events: none;
bottom: -5px;
left: 0;
right: 0;
opacity: 0;
transform: scale(0, 1);
transition: all 200ms;
}
a:hover:after {
opacity: 1;
transform: scale(1, 1);
}
code {
background: #222;
padding: 5px;
}
.container {
position: absolute;
/* overflow: hidden; */
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-animation: fadein 3s;
-moz-animation: fadein 3s;
-ms-animation: fadein 3s;
-o-animation: fadein 3s;
animation: fadein 3s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.introduction {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.content {
position: absolute;
left: 25%;
width: 50%;
}
.logo {
width: 250px;
}
.footer {
color: #666;
bottom: 20px;
font-size: 14px;
position: absolute;
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.footer a {
color: #666;
margin: 0;
transition: all 200ms;
}
.footer a:hover {
color: white;
}
.header {
color: #666;
top: 20px;
font-size: 14px;
position: absolute;
width: 100%;
text-align: center;
margin-top: 20px;
}
.header a {
color: #666;
margin: 0;
transition: all 200ms;
}
.header a:hover {
color: white;
}
.left {
display: inline-block;
margin-bottom: 30px;
margin-left: 0;
margin-right: 30px;
}
.right {
display: inline-block;
}
.right a {
display: inline-block;
margin-right: 30px;
}
@media only screen and (max-width: 40em) {
.left {
display: block;
margin-right: 0;
}
.right {
display: block;
}
.right a:last-child {
margin-right: 0;
}
.content {
left: 15%;
width: 70%;
}
}