* {
    box-sizing: content-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
  }
  
  body {
   margin:0;
    font-family: Arial, Helvetica, sans-serif !important;
    background-color: #E0a2a2 !important;
	margin-top: 50px !important;
  
  }

.page-container{
	position: relative;
	min-height: 100vh;
}
  
  /* Style the top navigation bar */
  .topnav {
    overflow: hidden;
	  display:flex;
	  flex-shrink:3;
    background-color: #a56c6c;
	position: fixed;
	 top:0;
	  width:100%;
	  height: 50px;
	  
  }
  
  /* Style the topnav links */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

/* Create a right-aligned (split) link inside the navigation bar */
.topnav a.split {
  float: right;
  background-color: #a56c6c;
  color: white;
}
  
  /* Change color on hover */
  .topnav a:hover {
    background-color:#ddd;
    color: black;
  }
  /* Style the side navigation */
.sidenav {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 5;
    left: 0;
    opacity: 50%;
    background-color: #915858;
    overflow-x: hidden;
	top-margin:29px;
	
  }
  
  
  /* Side navigation links */
  .sidenav a {
    color: white;
    padding: 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color on hover */
  .sidenav a:hover {
    background-color: #915858;
    color: black;
  }
  
  
  /* Style the content */
  .content {
	 
	  padding-top: 50px;
	  top-margin: 100px;
    background-color: #E0a2a2;
    padding: 10px;
	 height:100%;
	  padding-bottom: 50px;
    }

.portfolio{
	
	background-color: #E0a2a2;
    padding-left: 20px;
	padding-bottom:50px;
	height: 100%
	
	
}

  .profilepic{
    float: left;
	  padding: 10px;
	  align-items: center;
	  
   
  }

  .bio{
	  padding: 10px;
    float: right;
  }
  


  /* Style the footer */
  .footer {
	
	position: absolute;
	bottom:0;
	width: 100%;
    background-color: #dfb5b5;
    padding: 20px;
	height: 20px;
	margin-top: -20px;
    
   
  }

  .footer a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align:
    padding: 14px 16px;
    text-decoration: none;
  }

.footer p{
	 float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
  
  .footer a.split {
  float: right;
  background-color: #a56c6c;
  color: white;
}


  /* Style the footer */
  .footer-contact {
	
	position: relative;
	bottom:0;
	width: 100%;
    background-color: #dfb5b5;
    padding: 20px;
	height: 20px;
	margin-top: -20px;
    
   
  }

  .footer-contact a {
    float: left;
    display: block;
    color: #f2f2f2;
 
    padding: 14px 16px;
    text-decoration: none;
  }

.footer-contact p{
	 float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
  
  .footer-contact a.split {
  float: right;
  background-color: #a56c6c;
  color: white;
}


.collapsible {

  background-color: #915858;
  color: white;
  cursor: pointer;
  padding: 18px;
 margin-top: 20px;
  width: 50%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  opacity: 75%;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.googleForm {
  text-align:center;
}