html, body {
    height: 100%;
  }
  body {
    display: flex;
  }  
.outer {
    width: 100%;
    float: left;
    margin-left: 0%;
    margin-top: 0%;
    background-color: black;
  }
  .inner-left {
    float: left;
    height: 100%;
    background-color: #E9E9E9;
    width: 50%;
  }
  .inner-right-main
  {
      align-items: center;
      text-align: center;
  }
  .inner-right
  {
     margin-top: 0%;
     margin-left: 50%;
  }
  .nav-bar{
      margin-top: 2%;
	border-top-right-radius: 2%;
	border-top-left-radius: 2%;
	height: 55px;
	width: 100%;
	opacity: 50%;
	background-color: 	#282828;
}
.nav-bar-btn, .nav-bar-btn-drop, .dropdown{
	background-color: transparent;
	color: #E9E9E9;
	size: 100%;
	font-size: 20px;
	text-align: center;
	padding: 14px 16px;
	 float: left;
	 border: 0px;
}
.nav-bar button:hover{
  font-weight: bold;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.nav-bar button:focus, .nav-bar-btn-active{
	border: 2px solid #383838;
  background-color:#484848;
}
.nav-bar-name{
	display: inline;
	color: black;
}
.myText
{
    margin: 5% 5% 5% 5%;
    font-family: "Lucida Console", Courier, monospace;
    font-size: 2.5em;
}
.myText2
{
    /* margin-left: %; */
    margin-top: 20%;
    align-self: center;
}
.center-div
{
    
}
.myText2 *
{
    color: #E9E9E9;
    font-size: 5.5em;
    display: inline;
}
.mynametext
{
    background-color: #E9E9E9;
    color: black;
    max-width: max-content;
    display: inline;
    font-size: 5.5em;
}
.about-education *, .about-work *, .about-awards *, .about-courses *
{
    color: #E9E9E9;
    margin-left: 2%;
}
.about-title
{
    border-top-right-radius: 2%;
	border-top-left-radius: 2%;
    font-family: Arial, Helvetica, sans-serif;
	height: 55px;
	width: 100%;
	opacity: 48%;
    background-color: 	#282828;
    color: lavenderblush;
    font-size: 1.5em;
    margin-top: -2%;
}
.about-education>h2 , .about-work>h2
{
    margin-left: 0.5%;
}
.project-topic-btn, .project-topic-drop, .dropdown{
  background-color: #282828;
  color: #E9E9E9;
  size: 100%;
  font-size: 20px;
  text-align: center;
  padding: 14px 16px;
    width: 98%;
   border: 0px;
   margin: 1% 1% ;
}
.project-topic button:hover{
font-weight: bold;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.project-topic button:focus, .project-topic-btn-active{
  border: 2px solid #383838;
background-color:#484848;
}
.project-topic-name{
  display: inline;
  color: black;
}
.project-name-btn{
    display: none;
    background-color: #282828;
    color: #E9E9E9;
    size: 100%;
    font-size: 20px;
    text-align: center;
    padding: 14px 16px;
      width: 50%;
     border: 0px;
     margin: 1% 1% ;
}
#project-cat-text
{
    margin-left: 2%;
    font-family: Arial, Helvetica, sans-serif;
}

.elem-group
{
    background-color: #383838;
    color: #E9E9E9;
    size: 100%;
    font-size: 20px;
    /* text-align: center; */
    padding: 14px 16px;
      width: 90%;
     border: 0px;
     margin: 2% 2% ;
}
.contact-div
{
    background-color: #282828;
    color: #E9E9E9;
    size: 100%;
    font-size: 20px;
    /* text-align: center; */
    padding: 14px 16px;
      width: 90%;
     border: 0px;
     margin: 2% 2% ;
}
#submit-btn
{
    background-color: #383838;
    color: #E9E9E9;
    size: 100%;
    font-size: 20px;
    /* text-align: center; */
    padding: 14px 16px;
      width: 40%;
     border: 0px;
     margin: 1% 1% ;
}
.project-bin > h3
{
    font-size: 2.5em;
    font-family: Arial, Helvetica, sans-serif;
    color: ivory;
    margin: 2%;
}
.project-bin > img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
      max-height: 20em;
      max-width: 80%;
}
.project-bin
{
    display: none;
    margin-left: 2%;
    color: ivory;
}
.project-bin > h2
{
    font-size: 1.2em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
footer{
  position: fixed;
  left: 70%;
  bottom: 48%;
  margin: 0.5%;
  width: fit-content;
  background-color:  #E9E9E9 ;

  }

  .social-btn-facebook
  {
    background: url('./../images/icons/facebook.jpg');
    background-size: 2em;
    background-repeat: no repeat;
    background-size: 100%;
    width:2em;
    height:2em;
    border:0;
  }

  .social-btn-instagram
  {
    background: url('./../images/icons/instagram.jpg');
    background-size: 2em;
    background-repeat: no repeat;
    background-size: 100%;
    width:2em;
    height:2em;
    border:0;
  }

  .social-btn-gmail
  {
    background: url('./../images/icons/gmail.png');
    background-size: 2em;
    background-repeat: no repeat;
    background-size: 100%;
    width:2em;
    height:2em;
    border:0;
  }
  .social-btn-twitter
  {
    background: url('./../images/icons/twitter.png');
    background-size: 2em;
    background-repeat: no repeat;
    background-size: 100%;
    width:2em;
    height:2em;
    border:0;
  }
  .social-btn-linkedIn
  {
    background: url('./../images/icons/linkedIn.png');
    background-size: 2em;
    background-repeat: no repeat;
    background-size: 100%;
    width:2em;
    height:2em;
    border:0;
  }
.about-bin
{
  display: none;
}
/* 
blockquote{
  font-size: 1.2em;
  width:60%;
  margin:50px auto;
  font-family:Open Sans;
  font-style:italic;
  color: #555555;
  padding:1em 30px 1em 75px;
  border-left:8px solid grey ;
  line-height:1.6;
  position: relative;
  background:#EDEDED;
}

blockquote::before{
  font-family:Arial;
  content: "\201C";
  color: grey;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
} */

/* .profile-photo
{
  height: 20em;
  margin: 1em;
} */

.profile-photo {
  margin: 1em;
  float:left; 
  height:20em;
  /* width:40px; */
  } 
 
 .containerBox {
 /* width:300px;
 height:60px;
 padding:1px; */
 background-color:#303030;
 }
 .profile-text{
 margin:1em;
 margin-top:3%;
 margin-left:50px;
 color:#383838;
 }

ul li {
  background: #303030;
  margin-left: 5em;
  list-style-type: none;
}
.list-head
{
  color: #6e6060;
}