/*About me*/
.back_pic_box {
    position: relative;
    width: 90%;
    height: 50vw;
    left: 5%;
    top: 20vw;
    margin-bottom: 20em;
    transform: translateY(0);
    opacity: 0;

    transition: transform cubic-bezier(0.94, 0.44, 0.32, 1.31) 0.8s 0.25s,
                opacity cubic-bezier(1, 0.46, 0.21, 0.4) 0.3s 0.25s
}

.back_pic_box.summary_of_me {
    height: 35vw;
}

.back_pic_box.back_pic_box.what_i_am_working_on {
    height: 30vw;
}

.back_pic_box.has_shown {
    transform: translateY(-15vw);
    opacity: 1;
}

.corner_box {
    width: 15%;
    height: 20%;
    position: relative;
    left: 87%;
    top: 90%;

    display: block;
    background: rgba(34, 34, 34, 0.575);
    border-radius: 50px;

    animation: bottom_scroll 10s infinite cubic-bezier(0.23, 1, 0.320, 1);
}


.corner_box-1 {
    animation-delay: 0s;
}

.corner_box-2 {
    animation-delay: -1s;
}

.corner_box-3 {
    animation-delay: -2s;
}

.corner_box-4 {
    animation-delay: -3s;
}

@keyframes bottom_scroll {
    to, from {transform: translateX(0);}
    50% {transform: translateX(-600%);}
}

.pic_box {
    width: 100%;
    height: 100%;
    position: absolute;

    display: block;
    background: rgba(34, 34, 34, 0.575);
    border-radius: 50px 50px 50px 50px;
}

.pic_me {
    width: 90%;
    height: 90%;
    margin-top: 60px;
}

.self_pic{
    position: absolute;
    transform: rotate(10deg);
    width: 400px;
    height: auto;
    top: 700px;
    left: 200px;
}

.self_pic img {
    width: 100%;
    height: auto;
}

.pic_box h1 {
    position: relative;
    margin-top: 7%;
    color: white;
    text-align: center;
    font-size: 7vw;
}

/*Compence List*/
.about_me_div {
    width: 100%;
    height: 40vw;
}

.about_me {
    position: absolute;
    width: 70%;
    height: 40vw;
    right: 3%;
    top: 35%;
    
    border-top: solid .2vw white;
}

.summary_of_me .about_me {
    width: 90%;
}

.back_pic_box.summary_of_me .about_me {
    top: 55%;
}

.back_pic_box.what_i_am_working_on .about_me {
    top: 55%;
}

.about_me.why_i_code {
    width: 80%;
}

.about_me.what_i_am_working_on {
    width: 80%;
}

.about_me li {
    list-style-type: disc;
    color: white;
    font-size: 2vw;
    text-align: left;
}

.about_me p {
    list-style-type: disc;
    color: white;
    font-size: 2vw;
    text-align: left;
}


li#blocky_code {
    font-size: 1.5vw;
}

.hello_world {
    position: absolute;
    width: 10vw;
    height: 5vw;

    left: 10vw;
    top: 35vw;

    transform: translateX(-10vw);

    animation: bouceScreen 10s infinite cubic-bezier(0, 0, 1, 1);
}

@keyframes bouceScreen {
    0% {transform: translateX(-10vw) rotateZ(0deg);}
    50% {transform: translateX(65vw) rotateZ(180deg);;}
    100% {transform: translateX(-10vw) rotateZ(360deg);}
}

.hello_world p {
    color: white;
    font-size: 2vw;
}

#more_about_me li {
    list-style-type: none;
}

.about_me a {
    font-size: 3vw;
    font-style: italic;
    transition: font-size .7s ease;
    color: rgb(148, 173, 255);
}

.about_me a:hover {
    font-size: 4vw;
}