index.css

*{
    box-sizing: border-box; /* Recalculates h*w with padding and border included */
    Max-width: 100%; /*prevents elements from being larger than their parent*/
    Padding: 0;
    Margin: 0;
    /* Border: 1px solid black; */
    }

html{
    min-width: 100%;
}

body{
    font-family: 'Asap', sans-serif;
    font-size: 62.5%; /* sets 1rem to 10 px */
    min-width: 100%;
}

nav{
    display: flex;
    height: 10%;
    margin: 0 6%;
    justify-content: center;
    align-items: center;
}

a {
    font-size: 1.25rem;
    align-content: center;
    color: black;
    padding: 1.5%;
    text-decoration: none;
}

#login{
    flex: 6;
    text-align: end;
}

.here{
    color: #FF5700;
}
/* styling letter */ 
.char{
    display: block;
    line-height: 0.5;
  margin-top: 0;
  margin-bottom: 0;
}

.i {
    padding-bottom: 15.5px;
}

span{
    display: inline-block;
    /* align-self: center; */
}

.dot {
    color:#FF5700;
    padding-bottom: 3px;
    
}

#main-title, #about-title, #footer-title{
    text-align: center;
    font-size: 3rem;
    color: snow;
    /* font-family: 'Varela Round', sans-serif; */
    margin: 0 0 1.8%;
    background-color: #311b92;
    /* box-shadow: 1px 1px 2px 1px #202020; */
    min-width: 100%;
    height: 15%;
    padding-top: 1.5%;
}

#about-title{
    padding-top: .2%;
    box-shadow: 1px 1px 2px 1px #202020;
}
/* For the Home page */
.marketing{
    display: flex;
    justify-content: space-around;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    padding: 4% 0
}


#logo{
    width: 27%;
    box-shadow: 1.5px 1.5px 4px 1px #202020;
    border-radius: 50%;

}
#copy{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 42%;
    max-width: 100%;
}

#copy h2{
    display: flex;
    flex-flow: row rap;
    align-items: center;
    text-align: center;
    font-size: 2.4rem
}
#copy h3{
    text-align: center;
    font-size: 1.1rem;
    font-weight: lighter;
    padding-bottom: 2.4%

}

#login-button{
    width: 18%;
    padding: 2.4%;
    text-align: center;
    border-style: none;
    border-radius: 21px;
    font-family: 'Asap', sans-serif;
    font-size: .75rem;
    color: snow;
    background-color: 	#311b92	;
    box-shadow: 2px 1px 1.5px #202020, -2px -2px 1.5px #202020 ;
}

hr{
    margin: 3%;
}

/* For The About Page */
.works{
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    height: 60%;
    padding: 3% 6% 0;
}

.step{
    display: flex;
    flex-direction: column;
    width: 30%;
    justify-content: space-around;
    align-items: center;
    /* border: 4px solid #336699; */
    box-shadow: 1.5px 1.5px 4px 1px #202020;
}

.example-container{
    align-items: center;
    padding: 10% 3%;
    height: 25%;
    width: 90%;
    background-color: #202020;
    border-radius: 3px;
}

.step .example{
    font-size: .9rem;
    font-family: "Cousine", monospace;
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    background-color: #202020;
    color: snow;
    animation: typewriter 3s steps(26) 2s 1 normal both,
             blink-caret 500ms steps(44) infinite normal;
}


@keyframes typewriter{
    from{width: 0;}
    to{width: 75%;}
  }

@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #FF5700 }
}

.step.two h3{
    color:#FF5700;
}

.step h3{
    text-align: center;
    color: #311b92;
    /* text-decoration: underline; */
    font-size: 1.8rem;
    justify-self: flex-start;
    padding: 3%;
}

.step .construction{
    text-align: center;
    font-size: 2rem;
    transform: rotate(-30deg);
}

.step .explainer{
    text-align: center;
    height: 25%;
    font-size: .9rem;
    padding: 0 12% 3%;
    width: 100%
}

.description{
    display: flex;
    padding: 3% 6%;
    justify-content: space-between;
    align-items: center;

}
.presto {
    font-style: italic;
    color: linear-gradient(315deg, #756213 0%, #000000 74%);
    ;
}

.description .item-1, .description .item-2, .description .item-3 {
    font-size: 1rem;
    text-align: center;
    width: 30%;
    min-width: 30;
    padding: 1.51515%
}

.description img{
    width: 45%
}

/* About Team Page */

#team-title {
    font-size: 2.4rem;
    padding-right: 6%;
    text-align: end;
}

#team {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    margin: 0% 6% 3%;

}

#team .member{
    display: flex;
    flex-flow: column nowrap;
    max-width: 33%;
    min-width: 250px;
    width: 25%;
    margin: 1%;

}

.member img{
border-radius: 50%;
box-shadow: 1px 3px 3px #202020;
width: 100%;
}

.member h3{
    width: 100%; 
    text-align: center;
    font-size: 2.4rem;
    padding: 3% 0;
}

.member p{
    width: 100%;
    text-align: center;
    font-size: .9rem;
    font-style: italic;
}

footer{
    background-color: #311b92;
    width: 100%;
    height: 12%;
    box-shadow: -1px -1px 2px 1px #202020;
}


/* Responsive Design */


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

    a {
        padding: 0 6%;
    }
    .works{
        flex-flow: column nowrap;
        min-height: 1200px;
        align-items: center;
        justify-content: space-around;
        margin-top: 6%;

    }
    .step{
        min-width: 85%;
        min-height: 330px;
        margin-bottom: 1.5%;

    }

    .step h3{
        font-size: 3rem;
    }

    .step .example {
        font-size: .72rem;
    }

    .description{
        display: flex;
        flex-flow: column wrap;
        margin: 6% 0 6%;
        width: 100%;
    }

    .description .item-1, .description .item-2, .description .item-3{
        width: 81%;
        text-align: center;
        font-size: .9rem;
    }

    #team{
        max-height: 3000px;
        min-height: 2100px;
    }

    #team .member{
        max-width: 81%;
        margin: 3.5% 0;
        align-items: center

    }

    #team h3{
        font-size: 1.5rem;
    
    }

    #team p{
        font-size: .757575575rem;
    }

    #team img{
        max-width: 45%;
    }
    #about-title, #footer-title, #team-title, #main-title{
        padding-top:;
        max-height: 15%;
        min-width: 100%;
        font-size: 2.1rem;
        margin:

    }

    .marketing {
        max-width: 500px;
        width: 100%;
        margin: 0;
        display: flex;
        flex-flow: column wrap;
        align-items: space-around;
    }

    .marketing  #logo{
        min-width: 50px;
    }

    .marketing #copy {
        max-width: 100%;
        min-width: 100%;
    }

    #copy h2{
        min-width: 250px;
        font-size: 1.6565rem;
    }

    #copy h3{
        margin: 6%;
    }

    #login-button{
        min-width: 120px;
    }

}