.container {
    padding: 15px;
}

header {
    top: 0;
    position :fixed;
    z-index: 10;
    height: 55px;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
header .container {
    padding: 8px;
}
.header-name {
    font-size: 150%;
    font-weight: bold;
}

.profile-wrapper {
    margin: 50px auto 0px auto;
    width: 90%;
    max-width: 800px;
    background-image: url(./background.jpg);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    border: 1px solid rgba(0,0,0,0.1);
}
.data {
    margin-top:300px;
}
.face {
    width: 30%;
    border-radius: 50%;
    border: 4px solid #FFF;
}
.name {
    font-size: 150%;
    font-weight: bold;
}
.english-name {
    color: #777;
}

.fas,
.fab {
    margin-right: 7px;
}

li {
    list-style: none
}

.button {
    color: #00acee;
    text-decoration: none;
    transition: ease-out 0.2s;
}
.back {
    margin-right: 10px;
    padding: 6px 0px 6px 12px;
    border-radius: 50%;
}
.home {
    padding: 7px;
    border-radius: 20px;
}
.button:hover {
    background-color: rgba(0,172,238,0.1);
}
.button:active {
    background-color: rgba(0,172,238,0.2);
}
.link {
    color: #00acee;
    text-decoration: none;
}
.link:hover {
    text-decoration: underline;
}

footer {
    height: 65px;
    max-width: 800px;
    width: 90%;
    background-color: #fff;
    border-left: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    margin: 0 auto;
}