body{
    font-family: font;
    text-align: center;
    overflow-y: scroll;
}

.avatar{
    background-image: url(./img/avatar_background.png);
    width: 100%;
    height: 35vh;
    background-size: 100% 100%;
    margin-bottom: 20px;
    align-items: center;
}

.avatar > #avatar_image {
    width: 15vh;
    height: 15vh;
    margin-top: 6vh;
    border-radius: 100%;
    background-color: white;
    background-clip: content-box;
    border: solid 10px rgba(255, 255, 255, 0.2);
}

@keyframes tst{
    from{
        padding: 10px;
        border: solid 0px #FFFFFF28;
    }
    to{
        padding: 0px;
        border: solid 10px #FFFFFF28;
    }
}

.avatar > #avatar_image:hover{
    animation: tst 0.5s infinite alternate-reverse;
}

.avatar > #avatar_name {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    color: white;
    font-size: 10pt;
    padding: 5px 15px;
    margin-top: 3vh;
}

.avatar-info{
    justify-content: space-evenly;
    margin-bottom: 10px;
}

.avatar-info > div{
    color: #ff3837;
}

.avatar-info > div > img{
    width: 35px;
}

.line{
    width: 100%;
    background-color: #EEE;
    z-index: -1;
}

.posts{
    justify-content: space-evenly;
    padding: 5px;
    align-items: baseline;
    color: #444;
    font-size: 8pt;
}

.posts > div {
    padding: 10px;
    align-items: center;
}

@keyframes anm-1{
    from{background-color: white;}
    to{background-color: #DDD;}
}

.posts > div:hover{
    animation: anm-1 0.3s 2 alternate;
}

.posts > div > img{
    width: 24px;
    margin-bottom: 10px;
}