img {
    width: 100%;
}

body {
    background-color:lightgray;
}

html {
    scroll-behavior: smooth;
}

nav {
    display: flex;
    justify-content: space-around;
    background-color: gray;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
}

a {
    text-decoration: none;
    padding: 1%;
    font-size: 120%;
    color: black;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

a:hover {
    color: whitesmoke;
    text-decoration: underline;
}

#titulo {
   text-align: center;
   padding-top: 5%;
   font-size: 400%;
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step1line {
    padding-left: 5%;
    background-color: gray;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step1 {
    display: flex;
}

    #picture1 {
    width: 50%;
    padding: 5%;
    }

    #words1 {
    width: 50%;
    padding: 5%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
    }

#step2line {
    padding-left: 5%;
    background-color: gray;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step2 {
    display: flex;
}

    #picture2 {
    width: 50%;
    padding: 5%;
    }

    #words2 {
    width: 50%;
    padding: 5%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

#step3line {
    padding-left: 5%;
    background-color: gray;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step3 {
    display: flex;
}

    #words3 {
    width: 50%;
    padding: 5%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    #picture3 {
    width: 50%;
    padding: 5%;
    }

#step4line {
    padding-left: 5%;
    background-color: gray;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step4 {
    display: flex;
}

    #words4 {
    width: 50%;
    padding: 5%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    #picture4 {
    width: 50%;
    padding: 5%;
    }

#step5line {
    padding-left: 5%;
    background-color: gray;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step5 {
    display: flex;
}

    #picture5 {
    width: 50%;
    padding: 5%;
    }

    #words5 {
    width: 50%;
    padding: 5%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

#step6line {
    padding-left: 5%;
    background-color: gray;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step6 {
    display: flex;
}

    #picture6 {
    width: 50%;
    padding: 5%;
    }

    #words6 {
    width: 50%;
    padding: 5%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

#step7line {
    padding-left: 5%;
    background-color: gray;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step7 {
    display: flex;
}

    #words7 {
    width: 50%;
    padding: 5%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    #picture7 {
    width: 50%;
    padding: 5%;
    }

#step8line {
    padding-left: 5%;
    background-color: gray;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step8 {
    display: flex;
}

    #words8 {
        width: 50%;
        padding: 5%;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

   #picture8 {
        width: 50%;
        padding: 5%;
   }

#step9line {
    padding-left: 5%;
    background-color: gray;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step9 {
    display: flex;
}

    #picture9 {
        width: 50%;
        padding: 5%;
    }

    #words9 {
        width: 50%;
        padding: 5%;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

#step10line {
    padding-left: 5%;
    background-color: gray;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#step10 {
    display: flex;
}

    #picture10 {
        width: 50%;
        padding: 5%;
    }

    #words10 {
        width: 50%;
        padding: 5%;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

@media screen and (max-width: 625px) {

    a {
        font-size: 90%;
    }

}

@media screen and (max-width: 518px) {

    a {
        font-size: 90%;
    }

    #titulo {
        font-size: 200%;
        padding-top: 5%;
    }
    
    #step1 {

        flex-wrap: wrap;

    }

        #picture1 {
            width: 100%;
        }

        #words1 {
            width: 100%;
        }

    #step2 {
        flex-wrap: wrap;
    }    
    
        #picture2 {
            width: 100%;
        }

        #words2 {
            width: 100%;
        }

    #step3 {
        flex-wrap: wrap;
    }
    
        #words3 {
            width: 100%;
        }

        #picture3 {
            width: 100%;
        }

    #step4 {
        flex-wrap: wrap;
    }

        #words4 {
            width: 100%;
        }

        #picture4 {
            width: 100%;
        }

    #step5 {
        flex-wrap: wrap;
    }

        #picture5 {
            width: 100%;
        }

        #words5 {
            width: 100%;
        }

    #step6 {
        flex-wrap: wrap;
    }

        #picture6 {
            width: 100%;
        }

        #words6 {
            width: 100%;
        }

    #step7 {
        flex-wrap: wrap;
    }

        #words7 {
            width: 100%;
        }

        #picture7 {
            width: 100%;
        }

    #step8 {
        flex-wrap: wrap;
    }

        #words8 {
            width: 100%;
        }

        #picture8 {
            width: 100%;
        }

    #step9 {
        flex-wrap: wrap;
    }

        #picture9 {
            width: 100%;
        }

        #words9 {
            width: 100%;
        }

    #step10 {
        flex-wrap: wrap;
    }

        #picture10 {
            width: 100%;
        }

        #words10 {
            width: 100%;
        }
}