@import "https://fonts.googleapis.com/css?family=Rajdhani:500,600|Roboto:400,700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;600&display=swap";

body,html{
    padding:0;margin:0;font-family:rajdhani,sans-serif;font-size:18px
}

a{
    color:#1391ff;text-decoration:none
}

a:hover{
    color:#0077df
}

.home {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg,#6fe3ab,#005dad);
    overflow: hidden;
}

.home .inner {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 1.6em;
    overflow-y: auto;
    max-height: 100vh;
    box-sizing: border-box;
    transform: translate(-50%,-70%);
    text-align: center;
}



.cards {
    display:flex;margin-top:2em;font-size:1.1em;justify-content:center
}

.home .inner .cards .card {
    width:200px;padding:1em;margin:.5em;border-radius:.2em;background:rgba(55,71,88,.9);color:#fff
}

.home .inner .cards .card .name {
    font-weight:700
}

.home .inner .cards .card .alias {
    color:#9badc0
}

.home .inner .cards .card .links {
    margin:.6em -1em 0;padding-top:1em;border-top:1px solid rgba(255,255,255,.2)
}

.home .inner .cards .card .links .link {
    display:inline-block;margin:0 .3em
}

.home .inner .cards .card .links .link a {
    color:#1391ff;text-decoration:none
}

.home .inner .cards .card .links .link a:hover {
    color:#fff
}

.home .inner .cards .card .links .link a img {
    width:1em;margin-right:.2em;vertical-align:-2px
}

.home .inner .stuff {
    margin-top:1em;color:rgba(255,255,255,.6)
}

.home .inner .stuff a {
    font-weight:700;color:rgba(255,255,255,.6)
}

.home .inner .stuff a:hover {
    color:#fff
}

@media only screen and (max-width:560px){
    .home .inner {
        position:relative;left:0;top:0;transform:none
    }
    
    .home .inner .cards{
        flex-direction:column
    }
    
    .home .inner .cards .card{
        width:100%;margin:.5em 0;box-sizing:border-box
    }
}