html {
  font-size: 16px;
}
body {
  background-color: white;
  font-family: 'Special Elite', cursive;
  margin: 0;
}

/* Header*/
.header {
  width: 100%;
  background-color: black;
  height: 175px;
}
.header img {
  width: 250px;
  margin: 0 auto 20px auto;
  padding-bottom: 10px;
  display: block;
}
/* hamburger */
.hamburger {
  display: flex;
  height: 25px;
  width: 30px;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 0 0 20px; 
}
  
.hamburger div {
  width: 30px; 
  height: 5px;
  background: white;
}


/* Profile styling and image*/
.profile-section{
  width:90%;
  margin: 0 auto; 
  border-bottom: 7px dashed black;
}

.profile-wrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 500px;
  margin: 20px auto 40px auto;
}
.profile-photo {
  width:30%;
}
.profile-photo img{
  width: 100%;
  border-radius: 50%;
  border: 3px solid black;
  filter: grayscale(100%);  
}
/* Styles profile card*/
.profile-username{
  width: 60%;
  border: 1px solid #DADBDB;
  margin-left: 25px;
  box-shadow: 2px 2px 4px rgba(0,0,0,.25);
}
/* styles individual rows in profile card*/
.user-name {
  margin: 6px 0 0 0;
  padding: 6px 0 0 0;
  border-bottom: 3px solid rgb(255, 192, 203); 
}

.real-name, .location {
  margin: 6px 0 0 0;
  padding: 6px 0 0 0;
  border-bottom: 1px solid #B2B3B4; 
}
/* styles bio from GitHub*/
.profile-text {
 
  text-align: center;
  margin-bottom: 40px;

  
}

/* Cards styling*/

.cards-container {
  width: 90%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.js-card {
  width: 90%;
  background-color: white;
  border: 1px solid #DADBDB;
  box-shadow: 2px 2px 4px rgba(0,0,0,.25);
  margin: 20px auto;
  max-width: 500px;
}

.card-projectname {
  margin: 20px 0 0 0;
  padding: 20px 0 0 0;
  border-bottom: 3px solid rgb(255, 192, 203); 
}
/* styles individual rows in JScard*/
.updated, .branch, .URL, .number-commits, .blank-line, .times-forked, .commit-message {
  margin: 6px 0 0 0;
  padding: 6px 0 0 0;
  border-bottom: 1px solid #B2B3B4; 
}
/* styling for URl link*/
.URL a {
  text-decoration: none;
  color: #87bee7;
}

.URL a:hover{
  cursor: pointer;
  color: #87bee7;
}

.URL a:visited{
  color:#87bee7;
}

/* This is the span styling*/
.space {
  margin-left: 12px;
  color: #87bee7;
} 

/* Chart styling*/

.chart-section {
  width: 100%;
  
}
.canvas-chart{
  max-width: 300px;
  margin: 0 auto;   
}

/* Footer styling*/
.footer{
  width: 100%;
  border-top: 1px solid #B2B3B4;
  justify-items: center;
  margin-top: 50px;
  text-align: center;
}

.footer img{
  width: 50px;
  margin: 20px auto;
  display: block;
}

/***Media Queries***/

@media (min-width: 768px) {
.cards-container{
  flex-wrap: wrap;
   flex-direction: row;
}
.js-card{
  width: 80%;
}
.canvas-chart {
  min-width: 400px;
}
.hamburger div{
  background: black;
}
}

@media (min-width: 992px) {

  .js-card{
    width: 50%;
  }
  .canvas-chart {
    min-width: 400px;
    min-height: 400px;
  }
}