aboutMe.css

/*!*body{*!*/
/*!*    background-color: white;*!*/
/*!*    !*margin: 20px;*!*!*/
/*!*    background:  url(https://i.imgur.com/oe8xHya.gif) no-repeat right fixed;*!*/
/*!*    !*background-size: cover;*!*!*/
/*!*}*!*/

/*!*.bodyContainer{*!*/
/*!*    display: grid;*!*/
/*!*    grid-template-areas:*!*/
/*!*            !*"home resume portfolio contact article"*!*!*/

/*!*            "header header header header"*!*/
/*!*            "head head head article"*!*/
/*!*            "education education education education "*!*/
/*!*            "reflections reflections reflections reflections";*!*/


/*    !*grid-template-columns: 1fr 1fr 1fr 1fr ;*!*/
/*    !*!*grid-template-rows: 10% repeat(3,1fr);*!*!*/
/*    !*!*border: 1px solid red;*!*!*/
/*    !*!*background-image: url("software-engineering.jpg");*!*!*/
/*    !*!*background-position: left bottom;*!*!*/
/*    !*!*background-repeat: no-repeat;*!*!*/
/*    !*background-color: yellow;*!*/
/*    !*!*padding: 30px;*!*!*/
/*    !*margin: 5%;*!*/
/*    !*}*!*/


.aboutMeContainer{
    display: grid;
    grid-template-areas:
            "pic head head"
            ". progressChart .";
    grid-template-columns: 1fr 1fr 1fr;
    /*border: 1px solid black;*/
    margin: 4%;
    /*margin-bottom: 5%;*/
    /*margin-right: 10%;*/
    /*margin-left: 5%;*/
    /*background-color: darkblue;*/

}
img{
    grid-area: pic;
    /*border: 1px solid black;*/
    /*!*padding-left: 25%;*!*/
    margin-left: 6%;
    /*margin-right: 3%;*/
    /*margin-top: 10%;*/
}

#head{
    grid-area: head;
    /*border: 1px solid red;*/
    margin-right: 3%;
    margin-left: 2%;
    text-align: center;
    background-color: darkred;
    /*font-size: 30px;*/
    padding-top: 5%;
    /*/*color: white;*/
    padding-left: 5%;

    /*padding-bottom: 50px;*/
    color: white;
    /*background-color: gray;*/
    padding-right: 5%;

}

.myName{
    /*padding-left: 5%;*/
    font-size: 85px;
    text-align: center;
    margin-top: 2%;
    /*font-family: 'Sofia';*/
    /*padding-bottom: 5%;*/
    color: darkred;
    border-top: 2px solid darkblue;
    border-bottom: 2px solid darkblue;

}

.container {
    grid-area: progressChart;
    border-top: 3px solid darkred;
    border-bottom: 3px solid darkred;
/*    !*background-color: darkblue;*!*/
/*    !*padding-left: 5%*!*/
/*    !*display: inline;*!*/
/*!*    !*width:1000px;*!*!*/
/*!*    !*margin:300px auto 0;*!*!*/
}
.box{
    display: inline-block;
    padding-left: 8%;
    /*width: 50%;*/
    /*float: left;*/
}
.chart{
    position: relative;
    width:3%;
    height: 3%;
    /*margin: 0 auto;*/
    text-align: center;
    font-size: 30px;
    color: darkblue;
    /*line-height: 110px;*/
}
canvas{
    /*position: relative;*/
    /*top:0;*/
    /*left:0;*/
    width: 150px;
    height: 150px;
}

#container {
    margin: 20px;
    width: 200px;
    height: 200px;
}

/*!*header{*!*/
/*!*    grid-area: header;*!*/
/*!*    !*border-bottom: 1px solid green;*!*!*/
/*!*    !*margin-top: 50px;*!*!*/
/*!*    padding-top: 55px;*!*/
/*!*    !*color: white;*!*!*/
/*!*    padding-left: 20px;*!*/
/*!*    text-align: left;*!*/
/*!*    padding-bottom: 55px;*!*/
/*!*    color: red;*!*/
/*!*    !*background-color:gray;*!*!*/

/*!*    font-size: 90px;*!*/
/*!*}*!*/

/*.headTxt{*/
/*    grid-area: head;*/
/*    !*color: white;*!*/
/*    !*margin-left: 30px;*!*/
/*    font-size: 23px;*/
/*    !*padding: 10px;*!*/
/*    text-align: left;*/
/*    !*margin-right: 50%;*!*/
/*    border: 1px solid black;*/
/*    margin-top: 9%;*/
/*    padding-right: 15%;*/
/*    padding-left: 10%;*/
/*    background: red;*/
/*    !*margin-right: 10%;*!*/
/*    padding-bottom: 5%;*/
/*}*/
/*!*edits education informational text*!*/
/*.eduTxt1{*/
/*    color: red;*/
/*    margin-left: 30px;*/
/*    font-size: 23px;*/
/*    padding-left: 40px;*/
/*    padding-right: 40px;*/
/*}*/

/*article{*/
/*    grid-area: article;*/
/*    !*!*border: 1px solid black;*!*!*/
/*    !*text-align: center;*!*/
/*    !*font-size: 20px;*!*/
/*    !*margin-bottom: 50px;*!*/
/*    !*!*margin-top: 10px;*!*!*/
/*    !*color: white;*!*/
/*    color: white;*/
/*}*/

/*section{*/
/*    grid-area: education;*/
/*    !*border-bottom: 1px solid darkred;*!*/
/*    text-align: center;*/
/*    color: red;*/
/*    font-size: 40px;*/
/*    padding-bottom: 25px;*/

/*}*/



/*.skillList{*/
/*    padding-left: 20%;*/
/*    color: white;*/
/*}*/

/*.skillTitle{*/
/*    padding-left: 20%;*/
/*    font-size: 250%;*/
/*    color: white;*/

/*}*/

/*!*footer{*!*/
/*    !*grid-area: footer;*!*/
/*!*}*!*/

/*!*img{*!*/
/*!*    height: 120%;*!*/
/*!*    width:120%;*!*/
/*!*    margin-left: 50px;*!*/
/*!*    margin-top: 60px;*!*/
/*!*}*!*/

/*!*#home{*!*/
/*!*    grid-area: home;*!*/
/*!*    !*border: 1px solid black;*!*!*/
/*!*    text-align: center;*!*/
/*!*    color: white;*!*/
/*!*}*!*/

/*!*#resume{*!*/
/*!*    grid-area: resume;*!*/
/*!*    !*border: 1px solid black;*!*!*/
/*!*    text-align: center;*!*/
/*!*    color: white;*!*/
/*!*}*!*/

/*!*#portfolio{*!*/
/*!*    grid-area: portfolio;*!*/
/*!*    !*border: 1px solid black;*!*!*/
/*!*    text-align: center;*!*/
/*!*    color: red;*!*/
/*!*}*!*/

/*!*#contact {*!*/
/*!*    grid-area: contact;*!*/
/*!*    border-right: 1px solid red;*!*/
/*!*    text-align: center;*!*/
/*!*    color: red;*!*/
/*!*}*!*/

/*!*#reflections{*!*/
/*!*    grid-area: reflections;*!*/
/*!*    text-align: center;*!*/
/*!*    color: red;*!*/
/*!*    font-size: 40px;*!*/
/*!*    border-top: 1px solid green;*!*/
/*!*    padding-top: 30px;*!*/
/*!*}*!*/
/*!*#home,#resume,#portfolio,#contact{*!*/
/*!*    font-size: 15px;*!*/
/*!*    border-left: 1px solid red;*!*/
/*!*}*!*/

a{
    font-size: 20px;
    color: white;
    display: inline-block;
    /*border-top: 1px solid darkred;*/
    /*padding-top: 1%;*/
    padding-left: 3%;
    padding-right: 3%;
    /*padding-bottom: 1%;*/
    /*margin-bottom: 5%;*/
}
nav{
    background: darkblue;
    text-align: right;
}


/*!*a:visited{*!*/
/*!*    color: darkred;*!*/
/*!*}*!*/


a:hover{
    background-color: darkred;
}
/*!*reference tabs*!*/
/*#menuToggle*/
/*{*/
/*    display: block;*/
/*    position: relative;*/
/*    top: 20px;*/
/*    left: 20px;*/

/*    z-index: 1;*/

/*    -webkit-user-select: none;*/
/*    user-select: none;*/
/*}*/


/*#menuToggle input*/
/*{*/
/*    display: block;*/
/*    width: 40px;*/
/*    height: 32px;*/
/*    position: absolute;*/
/*    top: -7px;*/
/*    left: -5px;*/

/*    cursor: pointer;*/

/*    opacity: 0; !* hide this *!*/
/*    z-index: 2; !* and place it over the hamburger *!*/

/*    -webkit-touch-callout: none;*/
/*}*/

/*!**/
/* * Just a quick hamburger*/
/* *!*/
/*#menuToggle span*/
/*{*/
/*    display: block;*/
/*    width: 33px;*/
/*    height: 5px;*/
/*    margin-bottom: 7px;*/
/*    position: relative;*/

/*    background:red;*/
/*    border-radius: 3px;*/

/*    z-index: 1;*/

/*    transform-origin: 4px 0px;*/

/*    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),*/
/*    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),*/
/*    opacity 0.55s ease;*/
/*}*/

/*#menuToggle span:first-child*/
/*{*/
/*    transform-origin: 0% 0%;*/
/*}*/

/*#menuToggle span:nth-last-child(2)*/
/*{*/
/*    transform-origin: 0% 100%;*/
/*}*/

/*!**/
/* * Transform all the slices of hamburger*/
/* * into a crossmark.*/
/* *!*/
/*#menuToggle input:checked ~ span*/
/*{*/
/*    opacity: 1;*/
/*    transform: rotate(45deg) translate(-2px, -1px);*/
/*    background: green;*/
/*}*/

/*!**/
/* * But let's hide the middle one.*/
/* *!*/
/*#menuToggle input:checked ~ span:nth-last-child(3)*/
/*{*/
/*    opacity: 0;*/
/*    transform: rotate(0deg) scale(0.2, 0.2);*/
/*}*/

/*!**/
/* * Ohyeah and the last one should go the other direction*/
/* *!*/
/*#menuToggle input:checked ~ span:nth-last-child(2)*/
/*{*/
/*    transform: rotate(-45deg) translate(0, -1px);*/
/*}*/

/*!**/
/* * Make this absolute positioned*/
/* * at the top left of the screen*/
/* *!*/
/*#menu*/
/*{*/
/*    position: absolute;*/
/*    width: 200px;*/
/*    height: 300px;*/
/*    margin: -100px 0 0 -50px;*/
/*    padding: 50px;*/
/*    padding-top: 90px;*/

/*    background: darkred;*/
/*    list-style-type: none;*/
/*    -webkit-font-smoothing: antialiased;*/
/*    !* to stop flickering of text in safari *!*/

/*    transform-origin: 0% 0%;*/
/*    transform: translate(-100%, 0);*/

/*    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);*/
/*}*/

/*#menu li*/
/*{*/
/*    padding: 10px 0;*/
/*    font-size: 30px;*/
/*    text-align: center;*/
/*    padding-bottom: 30px;*/
/*    color: green;*/
/*}*/

/*!**/
/* * And let's slide it in from the left*/
/* *!*/
/*#menuToggle input:checked ~ ul*/
/*{*/
/*    transform: none;*/
/*}*/

/*#myBtn {*/
/*    !*display: none; !* Hidden by default *!*!*/
/*    position: fixed; !* Fixed/sticky position *!*/
/*    bottom: 20px; !* Place the button at the bottom of the page *!*/
/*    right: 30px; !* Place the button 30px from the right *!*/
/*    z-index: 99; !* Make sure it does not overlap *!*/
/*    border: 1px solid red; !* Remove borders *!*/
/*    !*outline: none; !* Remove outline *!*!*/
/*    background-image: url("https://i.imgur.com/uIdT3WK.png");*/
/*    color: white; !* Text color *!*/
/*    cursor: pointer; !* Add a mouse pointer on hover *!*/
/*    padding: 26px;*/
/*    padding-bottom: 25px;*/
/*    padding-right: 35px; !* Some padding *!*/
/*    border-radius: 10px; !* Rounded corners *!*/
/*    opacity: 0.5;*/
/*}*/

/*#myBtn:hover {*/
/*    background-color: #555; !* Add a dark-grey background on hover *!*/
/*}*/

/*html, body, main {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

/*#carousel {*/
/*    position: relative;*/
/*    height: 400px;*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
/*    overflow: hidden;*/
/*}*/
/*#carousel div {*/
/*    position: absolute;*/
/*    transition: transform 1s, left 1s, opacity 1s, z-index 0s;*/
/*    opacity: 1;*/
/*}*/
/*#carousel div img {*/
/*    width: 400px;*/
/*    transition: width 1s;*/
/*}*/
/*#carousel div.hideLeft {*/
/*    left: 0%;*/
/*    opacity: 0;*/
/*    transform: translateY(50%) translateX(-50%);*/
/*}*/
/*#carousel div.hideLeft img {*/
/*    width: 200px;*/
/*}*/
/*#carousel div.hideRight {*/
/*    left: 100%;*/
/*    opacity: 0;*/
/*    transform: translateY(50%) translateX(-50%);*/
/*}*/
/*#carousel div.hideRight img {*/
/*    width: 200px;*/
/*}*/
/*#carousel div.prev {*/
/*    z-index: 5;*/
/*    left: 30%;*/
/*    transform: translateY(50px) translateX(-50%);*/
/*}*/
/*#carousel div.prev img {*/
/*    width: 300px;*/
/*}*/
/*#carousel div.prevLeftSecond {*/
/*    z-index: 4;*/
/*    left: 15%;*/
/*    transform: translateY(50%) translateX(-50%);*/
/*    opacity: 0.7;*/
/*}*/
/*#carousel div.prevLeftSecond img {*/
/*    width: 200px;*/
/*}*/
/*#carousel div.selected {*/
/*    z-index: 10;*/
/*    left: 50%;*/
/*    transform: translateY(0px) translateX(-50%);*/
/*}*/
/*#carousel div.next {*/
/*    z-index: 5;*/
/*    left: 70%;*/
/*    transform: translateY(50px) translateX(-50%);*/
/*}*/
/*#carousel div.next img {*/
/*    width: 300px;*/
/*}*/
/*#carousel div.nextRightSecond {*/
/*    z-index: 4;*/
/*    left: 85%;*/
/*    transform: translateY(50%) translateX(-50%);*/
/*    opacity: 0.7;*/
/*}*/
/*#carousel div.nextRightSecond img {*/
/*    width: 200px;*/
/*}*/

/*.buttons {*/
/*    position: relative;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    bottom: 10px;*/
/*    !*display: block;*!*/
/*    border: none;*/

/*}*/

/*#prev{*/
/*    color: darkred;*/
/*    background: black;*/
/*    height: 4px;*/
/*    width: 47px;*/
/*    border: none;*/
/*    font-size: 30px;*/

/*}*/

/*#next{*/
/*    color: darkred;*/
/*    background: black;*/
/*    height: 40px;*/
/*    width: 47px;*/
/*    border: none;*/
/*    font-size: 30px;*/
/*   margin-left: 10px;*/
/*}*/

/*!*img{*!*/
/*!*    height: 40px;*!*/
/*!*    width: 47px;*!*/
/*!*}*!*/