body { background-color: antiquewhite;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
} 

h1 { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-top: 100px;
color:rgb(52, 136, 118);
font-size: 40px;
display:flex;
justify-content: space-around;
}

#words {
    padding-top: 2%;
    width: 100%;
    display:flex;
    justify-content: center;
    padding-bottom: 30px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}

html{
    scroll-behavior: smooth;
}

nav {
    background-color:rgb(10, 34, 5);
    display: flex;
    justify-content:space-around;

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

a {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
    color: rgb(185, 183, 180);
    padding: 10px;
    /* line under the link */
    text-decoration: none;
}

a:hover {
    color: antiquewhite;
    text-decoration:dashed;

}

img {
    width: 100%;
    display:flex;
    justify-content: center;
    margin-bottom: 5%;
}

#pic {
    display:flex;
    width: 50%;
    margin: auto;
}

#one {
    background-color: rgb(105, 116, 102);
    width: 50%;
    margin-top: 10px;
    padding-top: 40px;
}

#stepone {
    margin-top: 30px;
    font-size: 20pt;
    background-color: rgb(10, 34, 5);
    color: rgb(199, 213, 202);
    display:flex;
    justify-content: center;
}

#two {
    background-color: rgb(105, 116, 102);
    width: 50%;
    margin-top: 10px;
    padding-top: 40px;
}

#steptwo {
    margin-top: 30px;
    font-size: 20pt;
    background-color: rgb(10, 34, 5);
    color: rgb(199, 213, 202);
    display:flex;
    justify-content: center;
}

#three {
    background-color: rgb(105, 116, 102);
    width: 50%;
    margin-top: 10px;
    padding-top: 40px;
}

#stepthree {
    margin-top: 30px;
    font-size: 20pt;
    background-color: rgb(10, 34, 5);
    color: rgb(199, 213, 202);
    display:flex;
    justify-content: center;
}

#four {
    background-color: rgb(105, 116, 102);
    width: 50%;
    margin-top: 10px;
    padding-top: 40px;
}

#stepfour {
    margin-top: 30px;
    font-size: 20pt;
    background-color: rgb(10, 34, 5);
    color: rgb(199, 213, 202);
    display:flex;
    justify-content: center;
}

#five {
    background-color: rgb(105, 116, 102);
    width: 50%;
    margin-top: 10px;
    padding-top: 40px;
}

#stepfive {
    margin-top: 30px;
    font-size: 20pt;
    background-color: rgb(10, 34, 5);
    color: rgb(199, 213, 202);
    display:flex;
    justify-content: center;
}

#six {
    background-color: rgb(105, 116, 102);
    width: 50%;
    margin-top: 10px;
    padding-top: 40px;
}

#stepsix {
    margin-top: 30px;
    font-size: 20pt;
    background-color: rgb(10, 34, 5);
    color: rgb(199, 213, 202);
    display:flex;
    justify-content: center;
}

#seven {
    background-color: rgb(105, 116, 102);
    width: 50%;
    margin-top: 10px;
    padding-top: 40px;
}

#stepseven {
    margin-top: 30px;
    font-size: 20pt;
    background-color: rgb(10, 34, 5);
    color: rgb(199, 213, 202);
    display:flex;
    justify-content: center;
}

#eight {
    background-color: rgb(105, 116, 102);
    width: 50%;
    margin-top: 10px;
    padding-top: 40px;
}

#stepeight {
    margin-top: 30px;
    font-size: 20pt;
    background-color: rgb(10, 34, 5);
    color: rgb(199, 213, 202);
    display:flex;
    justify-content: center;
}

#nine {
    background-color: rgb(105, 116, 102);
    width: 50%;
    margin-top: 10px;
    padding-top: 40px;
}

#stepnine {
    margin-top: 30px;
    font-size: 20pt;
    background-color: rgb(10, 34, 5);
    color: rgb(199, 213, 202);
    margin-left: 30px;
    display:flex;
    justify-content: center;
}

#ten {
    background-color: rgb(105, 116, 102);
    width: 50%;
    margin-top: 10px;
    padding-top: 40px;
}

#stepten {
    margin-top: 30px;
    font-size: 20pt;
    background-color: rgb(10, 34, 5);
    color: rgb(199, 213, 202);
    display:flex;
    justify-content: center;
    
}

#container {
    display:flex;
    flex-wrap: wrap;
    margin: 20px;
}

/* tablet AND SMALLER breakpoint */
@media screen and (max-width: 700px) {
    #one {
    width: 50%;
    }

    #two {
        width: 50%;
        }

    #three {
    width: 50%;
    }

    #four {
        width: 50%;
        }

}


/* phone break */
@media screen and (max-width: 699px) {
body {
}
#pic {
    width: 100%;
}
#words {
    width: 100%;
}
#one {
    width: 100%;
    flex-wrap: wrap;
}
#two {
    width: 100%;
    flex-wrap: wrap;
}
#three {
    width: 100%;
    flex-wrap: wrap;
}
#four {
    width: 100%;
    flex-wrap: wrap;
}
#five {
    width: 100%;
    flex-wrap: wrap;
}
#six {
    width: 100%;
    flex-wrap: wrap;
}
#seven {
    width: 100%;
    flex-wrap: wrap;
}
#eight {
    width: 100%;
    flex-wrap: wrap;
}
#nine {
    width: 100%;
    flex-wrap: wrap;
}
#ten {
    width: 100%;
    flex-wrap: wrap;
}
}