*{
  box-sizing: border-box;
}

body {
    margin:0;
    font-family:Helvetica, sans-serif;
     scroll-behavior:smooth;
 
    background-image: url("Helenkellersignature1.png");
    background-size:contain;
}
 
 
section{
      min-height:50px; 
      padding: 2em;
      padding-left: 12%;
      display: flex;
      max-width: 75%;
      margin: 0 auto;
      }
section#HelenKeller{
    background-color: rgba(34, 34, 34, 0.97);
    margin: 0 auto;
}
section#About{
    background-color: rgba(34, 34, 34, 0.04);
     margin: 0 auto;
}
section#Writings{
    background-color: rgba(34, 34, 34, 0.97);
      margin: 0 auto;
      padding-right:10%;
}
section#Honors{
    background-color: rgba(34, 34, 34, 0.04);
     margin: 0 auto;
}
section#Quotation{
    background-color: rgba(34, 34, 34, 0.97);
    margin: 0 auto;
    font-size: 22px;
    padding-left: 0%;
}

h1{
text-align: center;
padding-top: 7%;
padding-bottom: 1em;
font-family: font-family: Helvetica, sans-serif;
}
 
.text-white{
  padding-left: 0;
  }
  
.firstword {
    color: white;
    margin-left: 10%;
   
}
 
h2{
    margin-left: 1em;
    padding-bottom: 1em;
}

p{
   margin: 0 auto;
    max-width: 80%;
    color: black;
    padding:0%;
}
#ho{
     max-width: 80%;
}
.ho{
    margin-left: -1%;
   
}
img{
    
    margin-right: 1em;
    margin-bottom: 0.5em;
}
gallery{
    margin-bottom: 0.5em;
    display: grid;
    max-width: 800px;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
     
}


@media only screen and (max-width: 800px) and (max-width: 600px) and (max-width: 700px) and (max-width: 400px) and (max-width: 900px) {
 section{
     max-width: 100%;
     margin: 0 auto;
     min-height:auto;
      }
img{
       max-width: 70%;
       margin-left: 2em;
    }
 body{
        margin: 0;
    }
    h1{
        padding-top: 60%;
    }
}