/* Styling for about_me.html */


#about_me_txt{
    line-height: 30px;
}

#profile_picture{
    width: 60%;
    margin-left: 20%;
    border-radius: 50%;
    border: 3px solid #008F11;
    margin-top: 15px;
}

#profile_links img{
    width: 50px;
}

#profile_links img{
    margin-top: 25px;
    width: 80%;
    margin-left:10%;
}

@media screen and (max-width: 768px){
    #profile_picture{
        width: 50%;
        margin-left: 25%;
        margin-top: 10px;
    }

    #profile_links img{
        margin-top: 15px;
        margin-bottom: 10px;
        width: 50%;
        margin-left:25%;
    }
}

@media screen and (max-width: 992px) and (min-width: 768px){
    #profile_picture{
        width: 90%;
        margin-left: 5%;
    }

    #profile_links img{
        margin-top: 15px;
        margin-bottom: 15px;
        width: 50%;
        margin-left:25%;
    }
}

@media screen and (max-width: 1200px) and (min-width: 992px){
    #profile_links img{
        margin-top: 10px;
        margin-bottom: 10px;
        width: 30%;
        margin-left:35%;
    }
}

#previous_projects_container > .col-11 > .card{
    border: 0px solid black;
    box-shadow: 0 0;
}

#previous_projects_container > .col-11 > .card > .card-body{
    margin:0;
    padding:0;   
}

#previous_projects_container > .col-11 > .card > .card-header{
    border: 1px solid #DADADA;
}

#previous_projects_container .card-body{
    background-color: white;
}

#previous_projects_container .card-header{
    margin-bottom: 50px;
}

#previous_projects, #previous_projects .container{
    padding: 0;
    margin: 0;
}

#previous_projects > .row > .col-12{
    padding:0;
}

#previous_projects > .row > .col-12:first-child{
    padding: 0 0 0 15px;
}

@media screen and (max-width: 768px){
    #previous_projects > .row > .col-12:first-child{
        padding: 0 0 0 15px;
    }
}

#previous_projects .card{
    text-align: center;
    margin-top: 20px;
}

#previous_projects h6{
    font-size: 0.8em;
    font-weight: bolder
}

.project_btn_container > button{
    height: 150px;
    width: 80%;
    margin-left: 10%;
    cursor: pointer;
    border: 1px solid #DADADA;

}

#atari_btn{
    background-color: #FFF5F5;
    box-shadow: 5px 10px 25px rgba(0, 143, 17,0.07); /*rgba(255, 153, 153, 0.15);*/
}

#intouch_btn{
    background-color: #F5F5FF;
    box-shadow: 5px 10px 25px rgba(0, 143, 17,0.07); /* rgba(153, 153, 255, 0.15);*/
}

#chatbot_btn{
    background-color: #F5FFF5;
    box-shadow: 5px 10px 25px  rgba(0, 143, 17,0.07); /*rgba(153, 255, 153, 0.15);*/
}

#raytracer_btn{
    background-color: #FFFFF5;
    box-shadow: 5px 10px 25px  rgba(0, 143, 17,0.07); /*rgba(255, 255, 153, 0.15);*/
}

.line_connector > div {
    width:50%;
    height:30px;
}

#project_content hr{
    width:50%;
}

#project_title{
    font-weight: bolder;
    font-size: 1.1em;
    width: 70%;
    margin-left:15%;
    margin-top: 20px;
    margin-bottom: 20px;
}

#project_divider{
    margin-bottom: 20px;
}

.project_description{
    display:none;
}

.project_description a{
    color: #008F11;
}

#atari_content img{
    margin-top: 20px;
    margin-bottom: 20px;
    min-width: 160px;
    width: 50%;
}

#intouch_list{
    text-align: left;
}

#intouch_content img{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 80%;
}

#raytracer_content img{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 80%;
}

#chatbot_content > p:nth-child(2), #chatbot_content ol{
    text-align: left;
}

#chatbot_content li{
    padding-bottom: 10px;
}

#chatbot_content img{
    width: 80%;
}

#chatbot_showcase_imgs img{
    border: 2px solid black;
}

@media screen and (max-width: 992px){
    #chatbot_showcase_imgs img{
        width: 40%;
    }

}

small{
	text-align: center;
	font-style: italic;
    font-size: 0.7em;
}


@media screen and (min-width: 768px ) and (max-width: 992px){
    .project_btn_container{
        width: 100%;
        margin-bottom: 30px;
        padding: 0;
    }

    .project_btn_container > button{
        width: 80%;
    }

    #chatbot_btn, #atari_btn{
        margin-left: 20%;
    }

    #previous_projects > .row > div{
        margin:0;
        padding:0;
    }

    .previous_projects > .row{
        margin:0;
        padding:0;
    }

    .line_connector > div {
        height:90px;
    }
}

@media screen and (max-width: 768px ){
    .project_btn_container{
        width: 100%;
        margin-bottom: 30px;
        padding: 0;
    }

    .project_btn_container > button{
        width: 70%;
        margin-left:30%;
    }

    #previous_projects > .row > div{
        margin:0;
        padding:0;
    }

    .previous_projects > .row{
        margin:0;
        padding:0;
    }

    .line_connector > div {
        height:90px;
    }
}



#my_skills .card-body{
    margin:0;
    padding:0;
}

#my_skills .container-fluid{
    margin: 0;
   
}

#my_skills h6{
    text-align: center;
    font-size: 1.35em;
    font-weight: bolder;
    margin-top: 15px;
}

#my_skills img{
    width: 60%;
    margin-left: 20%;
    margin-top: 5px;
    margin-bottom: 10px;
}

#my_skills p{
    text-align: center;
    margin-bottom: 0px;
    font-size: 0.9em;
}

#my_skills .col-12{
    padding:18px;
}

#my_skills .col-12:first-child{
    background-color: #FFF5F5;
}

#my_skills .col-12:nth-child(2){
    background-color: #F5F5FF;
}

#my_skills .col-12:nth-child(3){ 
    background-color: #F5FFF5;
}

#my_skills .col-12:nth-child(4){ 
    background-color: #FFFFF5;
}

@media screen and (max-width: 768px){
    #my_skills img{
        width: 40%;
        margin-left: 30%;
    }
    #my_skills p{
        text-align: center;
        margin-bottom: 5px;
        font-size: 1.1em;
    }

    #my_skills .col-12:not(:first-child){
        padding:25px;
        border-top: 1px solid #DADADA;
    }

    #my_skills h6{
        margin-top: 5px;
    }
}

.circle {
  padding: 13px 20px;
  border-radius: 50%;
  background-color: #008F11;
  color: #fff;
  max-height: 50px;
  z-index: 2;
}

.description.row .col-2 {
  align-self: stretch;
}
.description.row .col-2::after {
  content: "";
  position: absolute;
  border-left: 3px solid #008F11;
  z-index: 1;
}
.description.row .col-2.bottom::after {
  height: 50%;
  left: 50%;
  top: 50%;
}
.description.row .col-2.full::after {
  height: 100%;
  left: calc(50% - 3px);
}
.description.row .col-2.top::after {
  height: 50%;
  left: 50%;
  top: 0;
}

.timeline div {
  padding: 0;
  height: 40px;
}
.timeline hr {
  border-top: 3px solid #008F11;
  margin: 0;
  top: 17px;
  position: relative;
}
.timeline .col-2 {
  display: flex;
  overflow: hidden;
}
.timeline .corner {
  border: 3px solid #008F11;
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.timeline .top-right {
  left: 50%;
  top: -50%;
}
.timeline .left-bottom {
  left: -50%;
  top: calc(50% - 3px);
}
.timeline .top-left {
  left: -50%;
  top: -50%;
}
.timeline .right-bottom {
  left: 50%;
  top: calc(50% - 3px);
}

#qualifications h5{
    font-weight: bolder;
}

#qualifications h6{
    font-size: 1.1em;
    font-style: italic;
}

#qualifications p:not(first-child){
    font-size: 0.8em;
}

@media screen and (min-width: 1200px){
    #qualifications_container{
        margin-top: 0;
    }

    #project_content{
        margin-bottom: 50px;
    }
}