/* About me - Pen Animation */
.container {
    /*   background-color: rgba(255,255,255,0.5); */
    border-radius: 50%;
    height: 300px;
    float: right;
    overflow: hidden;
    position: relative;
    transform: translate(-50%, -50%);
    width: 300px;
    margin-top: -30%;
}
/*#################################################################### line ####*/
.line-box {
    /*   background-color: tomato; */
    display: flex;
    flex-direction: column;
    height: 300px;
    opacity: 0.7;
    left: calc(50% - 75px);
    overflow: hidden;
    position: absolute;
    top: -50px;
    width: 150px;
}
#line01 {
    animation: line-anima01 7.5s infinite linear;
    position: absolute;
}
@keyframes line-anima01 {
    0% {top: 300px}
    100% {top: -150px}
}
#line02 {
    animation: line-anima01 7.5s infinite linear;
    animation-delay: -2.5s;
    position: absolute;
}
#line03 {
    animation: line-anima01 7.5s infinite linear;
    animation-delay: -5s;
    position: absolute;
}
.st0{fill:#32BCE8;}
.st1{fill:none;stroke:#000000;stroke-miterlimit:10;}

/*#################################################################### pen ####*/
.pen-box {
    animation: pen-anima 2.5s infinite ease-in-out;
    bottom: 38px;
    height: 120px;
    left: 85px;
    position: absolute;
    transform: rotate(30deg);
    width: 30px;
}
@keyframes pen-anima {
    0% {left: 85px}
    50% {left: 235px}
}
.pen-head {
    border-style: solid;
    border-width: 20px 15px 0 15px;
    border-color: #32BCE8 transparent transparent transparent;
    bottom: 0;
    height: 0;
    position: absolute;
    width: 0;
}
.pen-body {
    background-color: #32BCE8;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 30px;
}
.pen-body:after {
    content:"";
    background-color: rgba(255,255,255,0.5);
    height: 110px;
    left: -5px;
    position: absolute;
    top: -5px;
    transform: rotate(5deg);
    width: 20px;
}

/*#################################################################### credit ####*/
#link {
    bottom: 20px;
    color: #32BCE8;
    opacity: 0.6;
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
#link p {font-size: 20px; margin: 0; margin-left: 5px;}
#link:hover {opacity: 1;}