@font-face {
  font-family: "Infini";
  src: url("infini-regular.woff2") format("woff"),
       url("infini-regular.otf") format("opentype"),
  		 url("infini-regular.ttf") format("truetype");
}

body {
font-family: "Infini", sans-serif;
	font-size: 20px;
	line-height: 1.5;
	
	margin: 24px;
  overscroll-behavior: none;
}
    
i {
  font-style: italic; 
  font-size: 30px;
}       

.f6f0e4 {
  	background-color: #f6f0e4;
		color: #786161;
}

.c3c3c3 {
  	background-color: #c3c3c3;
		color: #2F5C78;
}

.left1 {
  width: 45%; 
	position: absolute;
  left: 2%;
  top: 2%;
}
.left2 {
  width: 45%;
	position: absolute;
  left: 2%;
  top: 54%; 
}
.right {
  width: 45%;
  position: absolute;
  left: 52%;
  top: 8%;
}



h1 {
	font-size: 40px;
	font-weight: 400;
  line-height: 1.2;
}

h2 {
	font-size: 26px;
	font-weight: 500;
  line-height: 1.2;
}

h3 {
	font-size: 22px;
	font-weight: 500;
  line-height: 1.2;
}

a {
  color: #c45656;
  text-decoration: none;
  font-style: italic;
  transition: color 0.6s;
}   


a:hover {
    color: #7a1a1a;
}
  
svg.gh {
  fill: #c45656;
  transition: all 0.6s;
}    

svg.gh:hover {
  fill: #7a1a1a;
  transition: all 0.6s;  
} 

.profile-picture {
  transition: transform 0.5s ease;
  max-height: 45vh;
  max-width: 22vw;
  position: absolute;
  left: 25%;
  top: 4%;
  transition: all 0.3s ease;

}

.profile-picture:hover {
  transform: rotate(-5deg);
  transform: scale(1.05) rotate(5deg);
}

.border {
  border: 8px double #c45656;
}

.border2 {
  border: 8px double #786161;
}

.border3 {
  border: 8px double #2F5C78;
}

.no-border {
  border: none;
}


section {
  width: 150px;
  height: 150px;
  position: relative;
  top: -300px;
  left: 200px;
  /* shift itself over by 50% of its width and height, to center */
}
     
.github {
  width: 120px;
  margin-top: 80px;    
  height: auto;
  float: right;
}      

@media only screen and (max-width: 840px) {
  .profile-picture {
    top: 18%;
    left: 10%;
    margin: 18px;
  }
}  

@media only screen and (max-width: 740px) {
  section {
   left: 140px;
  }
}


@media only screen and (max-width: 600px) {
  .left1 {
    position: relative;
    width: 90%;
  }
  .left2 {
    position: relative;
    width: 90%;
  }
  .right {
    position: relative;
    width: 90%;
    left: 2%;
  }
  .profile-picture {
    position: relative;
  }
 section {
 		top: 5vw;
    left: 25vw; 
  }
  
  .github {
  float: left;  
}    
} 
 



@media only screen and (max-width: 400px) {
  body {
    font-size: 16px ;
  }
  h1 {
	font-size: 28px;
	font-weight: 400;
  line-height: 1.2;
}

h2 {
	font-size: 20px;
	font-weight: 500;
  line-height: 1.2;
}

h3 {
	font-size: 20px;
	font-weight: 500;
  line-height: 1.2;
}