* {
  background: #22272e; 
  padding: 0;
  margin: 0;
}

.header {
background-color: #2d333b;
display: flex;
width: 100%;
height: 50px;
}

.github-icon {
max-width: 40%;
height: auto;
margin: 10px 15px 10px 20px;
border-radius: 50%;

}

.main-title {
display: flex; 
align-items: center;
background-color: #2d333b;
color: #cdd9e5;
font-size: 1.2rem;
font-family: Arial, Helvetica, sans-serif;
}

.userinfo {
  display: flex;
  margin-top: 15px;
  margin-bottom: 20px;
}

.user-img {
  border-radius: 50%;
  margin-top: 5px;
  margin-left: 25px;
  }

.name-box {
  display: block;
  padding: 10px;
  margin-left: 10px;
}

.userid {
  align-items: center;
  color:#cdd9e5;
  font-size: 1.8rem;
  font-family: 'Inconsolata', monospace;
  padding-top: 7px;
}

.real-name {
  color:#cdd9e5;
  font-size: 0.9rem;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}


#projectscontainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  margin-left: auto;
  margin-right: auto;
}

.card {
  border: #545d68 solid 1px;
  border-radius: 6px;
  margin: 3px;
  width: 100%;
  max-width: 350px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.875rem;
  font-family: Arial, Helvetica, sans-serif;
  padding: 7px 0 7px 10px;
}

.card-title {
  font-weight: bold;
  margin-bottom: 2px;
  margin-left: 3px;
  line-height: 2;
}

.card-info {
  margin-left: 3px;
  color: #545d68;
}

a:link {
  text-decoration: none;
  cursor: pointer;
  color: #4184e4;
}

a:visited {
  color: #4184e4;
}

a:hover {
  text-decoration: underline;
}

.chart-section {
  width: 350px;
  max-width: 350px;
  margin: 30px auto 100px auto;
}

.footer {
border-top: #545d68 solid 1px;
width: 95%;
height: 50px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}

.footer-text {
color: #4184e4;
font-size: 0.8rem;
font-family: Arial, Helvetica, sans-serif;
}



/* mobile */
@media (min-width: 0px) and (max-width: 668px){
  .user-img {
    width: 70px;
    }
}

/* tablet */
@media (min-width: 669px) and (max-width: 1023px){

  .line {
    border-bottom: #545d68 solid 1px;
    margin-top: 50px;
    width: 100%;
  }

  .user-img {
    width: 210px;
    margin-left: 20px;
    position: absolute;
    left: 20px;
    top: 70px;
    z-index: 1;
    }

    .userinfo {
      display: block;
      }

    .name-box {
      display: block;
      padding: 0;
      margin-left: 40px;
      margin-top: 180px;
    }

    .userid {
      font-size: 1.8rem;
      padding: 0;
    }
    
    .real-name {
      font-size: 0.9rem;
    }

    #projectscontainer {
      display: grid;
      justify-items: stretch;
      grid-template-columns: 1fr 1fr;
      column-gap: 8px;
      grid-gap: 8px;
      margin-top: 80px;
      margin-right: 20px;
      width: 90%;
    }

    .card {
      max-width: 220px;
      width: 100%;
    }
  
    .main-section {
      display: grid;
      grid-template-columns: 0.8fr 1.9fr;
    }

    .chart-section {
      width: 300px;
      max-width: 300px;
      margin: 40px auto 100px auto;
    }
}


/* desktop */
@media (min-width: 1024px){

  .line {
    border-bottom: #545d68 solid 1px;
    margin-top: 50px;
    width: 100%;
  }

  .user-img {
  width: 260px;
    margin-left: 20px;
    position: absolute;
    left: 20px;
    top: 70px;
    z-index: 1;
    }

.userinfo {
  display: block;
  }

  .name-box {
    display: block;
    padding: 0;
    margin-left: 50px;
    margin-top: 240px;
  }

  .userid {
    font-size: 1.9rem;
    padding: 0;
  }
  
  .real-name {
    font-size: 1rem;
  }

  #projectscontainer {
    display: grid;
    grid-template-columns: 3fr 3fr;
    column-gap: 8px;
    grid-gap: 8px;
    justify-items: stretch;
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
  }

  .card {
    width: 100%;
  }

  .main-section {
    display: grid;
    grid-template-columns: 0.8fr 1.7fr;
    grid-gap: 8px;
  }

  .chart-section {
    width: 300px;
    max-width: 300px;
    margin: 50px auto 100px auto;
  }

}