@import url("https://fonts.googleapis.com/css2?family=Sintony&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --title: "Sintony", sans-serif; 
  --first: #e2eaee; /*Dove White */
 --second: #c1c2d7; /*Foxglove */
--third: #bfb9bd; /*Standing Ovation */
--fourth: #d7d0e1; /*Fanciful */
 --fifth: #434655;
} 
h1 {
    font-family: var(--title);
    font-weight: bolder;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #434655;
  }
  ul.list {
      list-style: none;
  flex-direction: initial;
     
  }
  ul.list a:hover{
      background-color: var(--third);
   
  }
  ul.list a{
      color: var(--fifth);
      margin: 5px;
      padding: 5px;
     
  }
  div.resize img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--fifth);
  }

  header {
      background-color: var(--second);
      padding: 15px;
      margin: 5px auto;
      display: flex;
      justify-content: space-between;
    
  }
  header nav #hambo{
      display: none;
      
  }
 
 h2,
.about {
  font-family: var(--title);
  font-weight: bolder;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
 
} 

 .aboutMe {
  background-image: url(https://media.wired.com/photos/5e6bfb4fb836a60008b8122e/master/w_2560%2Cc_limit/photo_space_catharsis_4_hs-2015-02-a-hires.jpg);
  background-size: auto;
  overflow: hidden;
  padding: 55px auto;
  margin: 35px auto;
  
} 
div h2 {
  font-size: 15px;
  padding-bottom: 65px;
}
footer {
  padding-top: 58px;
} 
/* MAIN STYLES */
img {
  width: 300px;
  height: 200px;
  overflow: hidden; 
  border-style: 5px solid var(--fifth); 
 } 
section {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
}
::part(body){
    display: flex;
    justify-content: center;
}
footer {
  display: flex;
  justify-content: center;
  align-content: flex-end;
  background-color: #BFB9BD ; 
  margin: 41px;
 width: 94% auto;
 color: var(--fifth);
} 

div.contact {
  background-color: #bfb9bd;
  
}
form {
  background-color: #bfb9bd;
  display: flex;
  justify-content:center;
  width: auto;
  color: var(--fifth);
  
}
button #my-form-button:hover{
    background-color: var(--third);
}
a.fab.fa-twitter, a.fab.fa-github-square, a.fab.fa-youtube, a.fab.fa-facebook
 {
    color: var(--fifth);
    display: inline-flexbox;
    justify-content: center;

    
}