@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans'); /* IBM Plex */

html{height:100%;margin:0;padding:0}

body{margin:0;font-family:"IBM Plex Sans";height:70%;color:#333; overflow-x: hidden}

a{text-decoration:none;color:#e84848}

a:hover{background-color: #e84848; color: white; text-decoration: none; transition: .25s ease-out; font-weight: 800}

.no-hover:hover{background-color: white;}

.connect-img{
    margin-bottom: -11.5px !important;
    width: 23px !important;
    padding: 10px;
    padding-bottom: 9px;
    margin: -7px;
    border: 3px solid transparent;
} 

.connect-img:hover{/*border-color: #e84848; */
    fill: #e84848;
    transition: .25s ease-out
}

.lichess{
    stroke: #000000
}

.lichess:hover{
    stroke: #e84848
}

hr{border:0;height:0;border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(255,255,255,0.3)}

#author-name{font-size:30px;color:#333;display:inline-block}

.alignable,.pull-left,.pull-right{display:inline-block}

.pull-left{float:left}

.pull-right{float:right}

.container, header{max-width:700px;margin:auto}

.wrapper{min-height:100%}

@media (max-width: 800px){
    header{}
    .container{max-width:600px;transition:0.3s ease all}
}

@media (max-width: 650px){
    header{}
    .container{max-width:83%}
    .navbar-ul{margin-top:5px}
}

@media (max-width: 500px){
    .navbar{text-align:center;padding:50px 0px 0px 0px}
    
    #author-name{width:100%;float:none}
    
    #navlist{padding:10px 0 10px 0;margin:0;display:block;float:none;text-align:center;width:100%}
    
    #navlist li.alignable,#navlist li.pull-left,#navlist li.pull-right{display:inline-block}
    
    #navlist li.pull-left{float:none}
    
    #navlist li.nav-list{margin:0}
}

@media (max-width: 480px){
    .content .profile-picture img{margin-top:-5px}
}

.content .info{font-size: 1.15em; border: 1px solid #333; display: block; padding: .75em 1.35em}
.content .info .info-title{font-size: 1.35em; border: none; font-weight: 500;}

.content .profile-picture{width:120px;position:relative;margin:-10px 0 0 15px;float:right;border:1px solid #aaa;border-radius:15%}

.content img{text-align:center;}

#legal {
    display: block;
    padding-top: 5pt;
}

.footer {
    margin-top: 7em;
    color: #bbb;
    font-size: 12px;
}