@font-face { font-family: RobotoCondensed-Regular; src: url('../fonts/RobotoCondensed-Regular.ttf'); } 

body, html{
    background-color: #111;
    color: #fff;    
    height: 100%;
    width: 100%;
    font-family: RobotoCondensed-Regular;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main{
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {font-size: 8em;}
h2 {font-size: 4em;}

.links a{
    display: inline-block;
    border: solid 4px #141414;
    border-radius: 60px;
    height: 50px;
    width: 100px;
    font-size: 1.5em;
    text-align: center;
    background: #212121;
    margin: 5px;
    margin-top: 15px;
    text-decoration: none;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 1s;
    -webkit-transition: all 1s;
}

.links a:hover{
    background: deepskyblue;
    background-position: center;
    background-repeat: no-repeat;
    border: solid 4px #1e6a8d;
    transition: background .5s ease .1s, border .2s ease;
    -webkit-transition: background .5s ease .1s, border .2s ease;
}

#steam{background-image: url(../img/steam_small.png);}
#github{background-image: url(../img/github_small.png);}
#bees{background-image: url(../img/bees_small.png);}