@charset "utf-8";
/* CSS Document */

body{
    margin: 0px;
    font-family: SF Pro Display,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,Microsoft YaHei UI;
}

.content{
    height: auto;
    width: 100%;
    max-width: 2000px;
    display: grid;
}

.flex{
    display: flex;
}

#lcontent{
    display: flex;
    flex-direction: column;
    width: 15vw;
    height: 100%;
}

#avatarinfo{
    display: flex;
    flex-direction: column;
    background-color:#fff;
}

#avatar{
    padding: 0.25vw;
}

#nametag{
    align-self: center;
    margin: 0.5vw;
}

#name{
    margin: 0;
    font-size: 1.25vw;
    font-weight: bold;
}

#title{
    margin:0.5vh auto 0 auto;
    font-size: 0.8vw;
    color:#919191;
}

.links{
    height:8vh;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.wsvg_s{
    width:4vh;
    fill:white;
}

.tcenter{
    align-self: center;
}

#Social_links{
    background: #9D8BB7;
}

#Gamer_links{
    background: #744DA9;
}

#infos{
    height: 100%;
    background: #A871F5;
}

#infof{
    width: inherit;
    background:#4f413e;
}

@media (max-width:800px){
    .flex{
        display: flex;
	    flex-direction: column;
    }

    #lcontent{
        width: 100%;
    }

    #avatar{
        width: 30vw;
        height: 30vw;
        padding: 0;
    }

    #avatarinfo{
        flex-direction: row;
        justify-content: center;
        padding:2vh 0;
    }

    #nametag{
        margin: 2vw;
    }

    #name{
        font-size: 5.5vw;
    }
    
    #title{
        font-size: 3vw;
    }
}