*{
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-family: 'Roboto', sans-serif;
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

body {
  background: #252525;
  font-family: 'Nunito', sans-serif;
  margin: 0 auto;
  display: flex;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html, body {
  overflow-x: hidden;
}

h1 {
  font-size: 1.4rem;
  color: #f2f2f2;
}

h2 {
  font-size: 1.2rem;
  text-align: center;
  color: #f2f2f2;
}

h3 {
  text-align: center;
  border-radius: 0.4rem;
  margin-top: 10;
  padding: 1rem 1rem;
  color: #f2f2f2;
}

p{
  font-size: 1rem;
  margin-top: 15px;
  color: #f2f2f2;
}

#profile-wrapper {
  display: flex;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 30%;
  width: 100%;
  max-width: 300px;
  transform: translate(-50%, -50%);
  margin: 2px;
  padding: 20px;
  width: 63%;
  box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75);
}

#profile {
  display: inline-block;
  justify-content: center;
  margin-top: 10px;
}


/*/ --- BUTTON --- /*/
.button{
  background: #5154ff;
  color: #fff;
  padding: 10px 20px;
  box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75);
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  max-width: 200px;
  transform: translate(-50%, -50%);
  transition: 0.4s;
  margin-top: 100%;
}

.button:hover{
  background: #34495e;
  color: #fff;
}
/*/ --- BUTTON --- /*/

.profile-image {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid whitesmoke;
  overflow: hidden;
  margin-bottom: 40px;
}

.profile-image > a > img {
  width: 100%;
}

#repo-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  left: 50%;
  top: 190%;
  width: 100%;
  transform: translate(-50%, -50%);
  position: absolute;
  gap: 1rem;
  margin-bottom: 100rem;
}

.projects-card {
  width: 320px;
  height: 230px;
  background-color: #1d1d1d;
  box-shadow: rgba(0, 0, 0, 0.6) 0 0.065rem 0.25rem;
  border-radius: 0.4rem;
  text-align: center;
  margin: 0;
  padding: 1rem;
}

#chart-wrapper {
  width: 90px;
  max-width: 512px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 330%;
  width: 100%;
  margin: 100 100px;
  transform: translate(-50%, -50%);
}

header {
  top: 0;
}

footer {
  margin-top: 1rem;
}

footer, a {
  color: #ffbb00;
}


@media (min-width:1281px) { 
  #repo-wrapper {
    top: 110%;
  }
  #chart-wrapper {
    top: 170%;
  }
 }

 @media (min-width:1025px) {
  #repo-wrapper {
    top: 110%;
  }
  #chart-wrapper {
    top: 170%;
  }
 }
 
 @media (min-width:801px) {
  #repo-wrapper {
    top: 120%;
  }
  #chart-wrapper {
    top: 190%;
  }
 }