#main {
    width:100%;
}

#main>*{
    margin:1vmin;
    align-items:center;
    position:relative;
}

#info{
    display: flex;
    justify-content: center;
    flex-flow: column;
}

#profile{
    margin-top:5vmin;
}#profile{
    display: grid;
    padding:2vmin;
    gap:2vmin;
    grid-template-columns: 20vmin auto;
    grid-template-rows: 12vmin 6vmin auto;
    background:lightgray;
    max-width:90%;

    border-radius:4vmin;

    align-items: start;

}

#profile *{
    text-align: left;
}
#user_icon{
    height:20vmin;
    border-radius:50%;
    grid-column: 1;
    grid-row: 1 / 3;
}

#user_name{
    grid-column: 2;
    line-height:8vmin;
    font-size:8vmin;
    height:8vmin;
    margin-top:2vmin;
}

#user_id{
    grid-column: 2;
    line-height:4vmin;
    font-size: 6vmin;
    color:gray;
    height:6vmin;
}

#introduction{
    grid-column: 2;
    font-size:2vmin;
    white-space: pre-wrap;
}

#snslinks{
    grid-column: 1;
    grid-row: 3;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom:-2vmin;
}
#snslinks a{
    top:-2vmin;
    height:5vmin;
    width:5vmin;
    margin: 0 1vmin;
    margin-top:2vmin;
    transition: translate 0.5s,opacity 0.5s;
}
#snslinks a:hover{
    translate: 0 -0.5vmin;
    opacity:0.5;
}
#snslinks a img{
    height:100%;
}

#info .btn{
    margin-top: 2vmin;
    margin-bottom: 0;
}

#login{
    margin-top: 10vmin;
    display: flex;
    justify-content: center;
    flex-flow: column;
}
#discord{
    margin-top:5vmin;
    width:30vmin;
}