/* make all images fit the surrounding div */
img {
    width: 100%;
    
    }
    #intro{
        color: rgb(74, 119, 118);
background-color: black;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 150%;
    }
    #flex1{
        background: rgb(41, 40, 40);

display: flex;
}
#img1 {
    width: 100%;
    background-color: navy;
    border: 3px solid black;
    margin-left: 2%;
        }

#words1 {
color: goldenrod;
width: 100%;
background-color: dimgrey;
border: 3px solid black;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 100%;
margin: 5%;
}

#words1 {
    color: goldenrod;
    width: 100%;
    background-color: dimgrey;
    border: 3px solid black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 100%;
    margin: 5%;
    }
    #words2 {
            color: goldenrod;
            width: 100%;
            background-color: dimgrey;
            border: 3px solid black;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 100%;
            margin: 5%;
            }
      #words3 {
    color: goldenrod;
    width: 100%;
     background-color: dimgrey;
    border: 3px solid black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 100%;
    margin: 5%;
                }
      #words4 {
        color: goldenrod;
         width: 100%;
    background-color: dimgrey;
        border: 3px solid black;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 100%;
         margin: 5%;
          }

        #words5 {
        color: goldenrod;
         width: 100%;
        background-color: dimgrey;
        border: 3px solid black;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 100%;
        margin: 5%;
         }
                       
     #words6 {
    color: goldenrod;
    width: 100%;
    background-color: dimgrey;
       border: 3px solid black;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-size: 100%;
        margin: 5%;
                   }
            #words7 {
           color: goldenrod;
          width: 100%;
       background-color: dimgrey;
         border: 3px solid black;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
             font-size: 100%;
                    margin: 5%;
                    }
 #words8 {
color: goldenrod;
width: 100%;
 background-color: dimgrey;
 border: 3px solid black;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 100%;
 margin: 5%;
     }

    #words9 {
      color: goldenrod;
      width: 100%;
      background-color: dimgrey;
       border: 3px solid black;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 100%;
      margin: 5%;
          }

     #words10 {
    color: goldenrod;
    width: 100%;
    background-color: dimgrey;
    border: 3px solid black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 100%;
     margin: 5%;
         }




    body{
background-color: rgb(56, 67, 36);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;


    }

/* turn on smooth scroll */
html{
    scroll-behavior: smooth;
}

nav {
background-color: rgb(81, 113, 62);
display: flex;
justify-content: space-around;

/* position:fixed stayed on screen always */
position: fixed;
width: 100%;
top: 0px;
left: 0px;
}

a{
font-family: Arial, Helvetica, sans-serif;
color: rgb(16, 50, 47);
font-size: 100%;
/* line under the link */
text-decoration: none;
}

a:hover{

    color: rgb(98, 197, 255);
    text-decoration: underline;

}

    /* tablet and SMALLER breakpoint */
@media screen and (max-width: 768px) {
    body {
 background-color: rgb(51, 51, 106);
    }
    #intro {
        color: rgb(40, 80, 112);
     width: 100%;  
    } 
    #img1 {
        color: rgb(88, 7, 164);
     width: 100%;
     
     }
     #words1{
     width: 100%;
     font-size: 100%;
     }

 }
 /* phone breakpoint */
 @media screen and (max-width: 370px) {
 body {
 background-color: rgb(92, 67, 4);
 
 }
 #img1 {
    color: blueviolet;
 width: 100%;
 
 }
 #words1{
 width: 100%;
 font-size: 100%;
 }
 #flex1{
     /* turn off flexbox */
     /* display: block; */
 
     /* lets flexbox be on more than 1 line */
     flex-wrap: wrap;
 }
 }