body{margin:0;
 background-image:url(https://lh3.googleusercontent.com/fSzixayt4HbI9pe_GJSromQkcNM0n7tDSJ3VLZQ-qP-DjShgCm28PA-i6v13Nzi7eyMBhg=s85);
}

#continer{margin:0;
  
  min-height:100vh;
  max-width:800px;
  margin:0 auto;
}



#intro{

  
  min-height:100vh;
  background-color: #e0c945;
  max-width:800px;
  margin:0 auto;
}

.bottom-left {
  width:43%;
  display:inline-block;
  padding: 0  3% 3% 6%;
  font-size:0.9em;
  font-family: "Helvetica", sans-serif; 
  color:#363938;
  line-height: 1.4; 
  
}

.bottom-right {
   width:40%;
   display:inline-block;
   padding: 0  3% 3% 3%;
   font-size:0.9em;
   font-family: "Helvetica", sans-serif;
   color:#363938;
   line-height: 1.4;
   
}
      
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

#childhood{

  min-height:100vh;
  width:100%;
  background-color:#00b92c;
  max-width:800px;
  margin:0 auto;


}

.title{
        
        font-size:2em;
        font-family: "Helvetica", sans-serif; 
}

.content{
       width:94%;
       padding-bottom:1em;
       font-size:0.9em;
       font-family: "Helvetica", sans-serif;
       color:#ffffff;
       margin:0 auto;
       line-height: 1.4;
} 

#career{

  min-height:100vh;
  width:100%;
  background-color:blue;
  max-width:800px;
  margin:0 auto;
  font-size:0.9em;
  padding-bottom:2.5%;
  padding-top:2%;
  line-height: 1.4;
  
}

.career-left {
    width: 40%;
    display: inline-block;
    font-family: "Helvetica", sans-serif;
    color: #ffffff;
    
   
    
    
}



.career-right {
     
     width: 48%;
    display: inline-block;
    font-family: "Helvetica", sans-serif;
    color: #ffffff;
    padding-left:10px;
}
  




#artworks{

  min-height:100vh;
  width:100%;
  background-color:orange;
  max-width:800px;
  margin:0 auto;
  
}

.layout{
  display:inline-block;
  margin-left:0.8em;
  margin-top:2em;
}


.layout1{
  display:inline-block;
  margin-left:0.8em;
  margin-top:4em;
  
  
  
}


.text{
  
  padding-top:3em;
  padding-left:0.8em;

}

.gfx{

     width:800px;
     
     height:580px;


}
 
 .gfx2{

    width:100%;
     
     height:44%;

}

 .gfx3{

    width:250px;
    height:200px;

}


@media (max-width: 550px) {
  #container {
    width: 100%;
    padding: 0; }
    
 

 .gfx{

     width:100%;
     
     height:100%;


}




.bottom-left {
  width:95%;
  
  font-size:0.9em;
  font-family: "Helvetica", sans-serif; 
  color:#363938;
  
}

.bottom-right {
   width:95%;
   font-size:0.9em;
   font-family: "Helvetica", sans-serif;
   color:#363938;
   
}

#intro{

  min-height:100vh;
}

#childhood{

min-height:100vh;

}

#career{

min-height:100vh;


}

.career-left {
  width:100%;
  font-size:0.9em;
  font-family: "Helvetica", sans-serif; 
  color:#ffffff;
 
  
}

.career-right {
  width:90%;
  padding:0 5% 0 5%;
  font-size:0.9em;
  font-family: "Helvetica", sans-serif; 
  color:#ffffff;
  
}

 .gfx2{

    width:100%;
    height:100%;
     

}

#artworks{

  
  min-height:100vh;
  margin:0 auto;
  
}
    


.gfx3{
	width:95%;
	

}



@media (max-width: 350px) {

 .gfx2{

    width:300px;
     
     height:345px;

}

}