.cover {
height:100%;
width: 100%;
display: grid;
z-index: 1;
order: 2;
overflow: hidden;
align-content: space-between;
}

    .headerAbout {
        display: grid;
        width: 100%;
        padding: 20px 0px;
        align-content: center;
        justify-content: center;
    }

        .headerAbout h1 {
            justify-self: center;
            font-size: 48px;
            color: #1a1a1d;
            font-weight: bold;
            text-shadow: 3px 3px 0 #d6d5e2;
        }

        .headerAbout h3 {
            justify-self: center;
            color: #1a1a1d;
            font-size: 24px;
            width: 100%;
            font-weight: lighter;
        }

    .bodyAbout {
        width: 90%;
        padding: 20px 0px;
        display: flex;
        align-items: center;
        justify-items: center;
        justify-self: center;
        justify-content: center;
        flex-wrap: wrap;       
    }

        .bodyAbout .boxAbout {
            display: grid;
            width:270px;
            background: #e3e2f2;
            padding: 30px;
            transition: all 0.4s;
            margin: 20px auto;
            border-radius: 20px;
            box-shadow: 4px 4px 0px #d6d5e2;
        }

        .bodyAbout .boxAbout:hover {
            transform: translateY(2%);
        }

        .boxAbout a i {
            font-size: 175px;
        }

        .boxAbout p {
            font-size: 20px;
        }

        .colorOrange {
            color: #E34C26;
        }

        .colorPurple {
            color: #563D7C;
        }

        .colorYellow {
            color: #f2cb09;
        }

        .percentBar {
            display: flex;
            width: 70%;
            height: 10px;
            margin: 20px auto;
        }

            #htmlBar {
                height: 100%;
                background: #E34C26;
                font-size: 7px;
                color: #f2f2ff;
                font-weight: 400;
            }

            #cssBar {
                height: 100%;
                background: #563D7C;
                font-size: 7px;
                color: #f2f2ff;
                font-weight: 400;                
            }

            #jsBar {
                height: 100%;
                background: #f2cb09;
                font-size: 7px;
                color: #1a1a1d;
                font-weight: 400;                
            }

        @media (max-width: 480px) {
            .percentBar {
                width: 80%;
            }
        }

    .footerAbout {
        display: grid;
        padding: 20px 0px;
    }

        .footerAboutText {
            width: 90%;
            margin: 0px auto;
        }

        .footerAboutText p {
            color: #1a1a1d;
            font-size: 24px;
            font-weight: normal;
        }

        .footerAboutGithub {
            display: flex;
            justify-items: center;
            justify-self: center;
            cursor: pointer;
            transition: all 0.4s;
        }

        .footerAboutGithub:hover {
            transform: translateY(2%);
        }

        .footerAboutGithub a {
            padding: 25px 0px;
            color: #1a1a1d;
            font-size:24px;
            font-weight: bold;
            text-decoration: none;
        }

        .footerAboutGithub a i {
            color: #1a1a1d;
            font-size:24px;
            font-weight: bold;
        }

    .bodyMe {
        display: flex;
        width: 100%;
        padding: 20px 0px;
        align-content: center;
        justify-content: space-around;
        margin: 0;
        flex-wrap: wrap;
    }

    .bodyMe img {
        margin: 20px auto;
        max-height: 300px;
        max-width: 300px;
        filter: drop-shadow(4px 4px 0px #d6d5e2);
        border-radius: 20px;
        transition: all 0.4s; 
    }

    .bodyMe img:hover {
        transform: translateY(2%);
    }

        .me1 {
            content: url('../img/aboutme1.jpg');
        }

        .me2 {
            content: url('../img/aboutme2.jpg');
        }

        .me3 {
            content: url('../img/aboutme3.jpg');
        }

    .footMe {
        padding: 20px 0px;
        width: 90%;
        justify-self: center;
    }

    .footMe p {
        color: #1a1a1d;
        font-size: 22px;
        font-weight: normal;
        padding-bottom: 20px;
    }
        