@charset "utf-8";
html {
    overflow-x: hidden;
    padding: 0;
    margin: 0
}

body {
    font-family: monospace;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0;
    word-wrap: break-word;
    font-weight: 400;
    background-color: #000;
    color: #767676
}

body::-webkit-scrollbar {
    width: 0
}
.giangimgs {
    width: 100%;    
    clear: both;    
    height: 100vh;
    align-items: center;
    justify-content: center;
    position: relative
}

.giangimgs .home_content {
    display: flex;
    align-items: center
}

.giangimgs .avatar {
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 100%
}

.giangimgs .avatar[data-type=square] .image {
    animation: none
}

.giangimgs .avatar[data-type=circle] .image {
    animation: none;
    border-radius: 100%
}

.giangimgs .avatar .image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: morph 8s ease-in-out infinite 0.5s;
    background-blend-mode: multiply;
    -webkit-box-shadow: inset 0 0 0 9px rgba(255, 255, 255, .3);
    -moz-box-shadow: inset 0 0 0 9px rgba(255, 255, 255, .3);
    box-shadow: inset 0 0 0 9px rgba(255, 255, 255, .3)
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
    }
    50% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%
    }
    100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
    }
}