/* color codes */
/* background-color: #00fdc8; */
/* background-color: #666666; */
/* background-color: #eeeeee; */
/* background-color: #7c7ce0; */
/* background-color: #455a64; */
/* background-color: #78909c; */
/* background-color: #db4437; */
/* background-color: #ea9999; */
/* background-color: #f6cd4c; */
/* color: white; */
/* color: #666666; */
/* color: #eeeeee; */
/* color: #7c7ce0; */
/* color: #455a64; */
/* color: #78909c; */
/* color: #db4437; */
/* color: #ea9999; */
/* color: #f6cd4c; */



/* format body by removing default browser values */
body {
    margin: 0;
    padding: 0;
    font-family:Courier;
    font-family:Courier New;
}
/* control overview section title (absolute relative to parent (overview section) */
.body h2 {
    border: 8px solid white;
    padding: 10px 10px;
    display: inline-block;
    /* top: 0.01em; */
    /* color: white;  */
    /* color: #666666; */
    /* color: #eeeeee; */
    color: #7c7ce0;
    /* color: #455a64; */
    /* color: #78909c; */
    /* color: #db4437; */
    /* color: #ea9999; */
    /* color: #f6cd4c; */
    background-color: #00fdc8;
    /* background-color: #666666; */
    /* background-color: #eeeeee; */
    /* background-color: #7c7ce0; */
    /* background-color: #455a64; */
    /* background-color: #78909c; */
    /* background-color: #db4437; */
    /* background-color: #ea9999; */
    /* background-color: #f6cd4c; */
    border-bottom-style: groove;
    border-radius: 20px;
    border: 1px solid #db4437;
} 
/* control paragraph describing project */
.body p {
    text-align:justify;
    padding: 10px 10px;
    padding-right: 100px;
    padding-left: 100px;
    color: #455a64;
    /* border-style:inset; */
    /* border-style:outset; */
    overflow-wrap: break-word;
    hyphens: auto; 
} 





/* format navbar section */
/* set the properties for LEAR image in header */
header {
    position: fixed; 
    top: 0;
    left: 0;
    background-color:#e2756b;
    border-bottom-style: groove;
    border-radius: 4px;
    padding: 20px; 
    width: 100%;
    z-index: 1;
    font-family: "Arial";
    border: 2px solid #00fdc8;
    display: inline;
}
header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
}
header ul li {
    display: inline;
    /* overflow-wrap: break-word; */
}
header ul li a {
    display: inline;
    /* color: white; */
    /* color: #666666; */
    /* color: #eeeeee; */
    /* color: #7c7ce0; */
    /* color: #455a64; */
    /* color: #78909c; */
    /* color: #db4437; */
    /* color: #ea9999; */
    /* color: #f6cd4c; */
    text-align: center;
    padding: 26px 60px;
    text-decoration: none;
    float: right;
    /* color: #666666; */
    color: white;
}
header ul li h1 {
    display: inline;
    /* color: white; */
    color: #00fdc8;
    /* color: #666666; */
    /* color: #eeeeee; */
    /* color: #7c7ce0; */
    /* color: #455a64; */
    /* color: #78909c; */
    /* color: #db4437; */
    /* color: #ea9999; */
    /* color: #f6cd4c; */
    text-align: left;
    padding: 1px 8px;
    text-decoration: none;
    float: left;

    overflow-wrap: break-word;
}
/* Change the link color to #111 (black) on hover */
header ul li a:hover {
    /* background-color: #111; */
    /* background-color: #f6cd4c; */
    background-color: #00fdc8;
    /* background-color: #666666; */
    /* color:#455a64; */
    color:#e2756b;
}




/* format overview section */
.overview {
    position: relative;
    top: 120px;
    padding: 100px; 
    margin: 5px 0;
    /* width: 100%; */
    text-align: center;
    /* background-color:antiquewhite; */
    background-color: white;
}
/* control overview section title (absolute relative to parent (overview section) */
.overview h2 {
    /* position: absolute;
    top: 10px; */
    border: 8px solid white;
    padding: 10px 10px;
    display: inline-block;
    /* top: 0.01em; */
    /* color: white;  */
    /* color: #666666; */
    /* color: #eeeeee; */
    color: #7c7ce0;
    /* color: #455a64; */
    /* color: #78909c; */
    /* color: #db4437; */
    /* color: #ea9999; */
    /* color: #f6cd4c; */
    background-color: #00fdc8;
    
    /* background-color: #666666; */

    /* background-color: #eeeeee; */
    /* background-color: #7c7ce0; */
    
    /* background-color: #455a64; */

    /* background-color: #78909c; */
    /* background-color: #db4437; */
    /* background-color: #ea9999; */
    /* background-color: #f6cd4c; */
    border-bottom-style: groove;
    border-radius: 20px;
    border: 1px solid #db4437;
    /* border: 2px dotted #db4437; */
} 
/* control paragraph describing project */
.overview p {
    /* position: absolute;
    top: 100px; */
    text-align:justify;
    padding: 10px 10px;
    padding-right: 100px;
    padding-left: 100px;
    /* top: 0.90em; */
    /* color: white;  */
    /* color: #666666; */
    color: #455a64;
    /* border-style:inset; */
    /* border-style:outset; */
    /* border-top-style: dashed; */
} 





/* format demo section */
.demos {
    /* position: relative;
    top: 180px; */
    padding: 100px;
    margin: 80px 0;
    /* margin-top:0px; */
    margin-bottom:0px;
    /* width: 100%; */
    text-align: center;
    /* background-color: rgb(104, 161, 161); */
    background-color: #00fdc8;
}
/* .demos span {
    display: inline-block;
} */
/* .demos titles {
    display: inline;
} */
.demos videos {
    display: inline-block;
}
/* control title */
.demos h2 {
    /* position: absolute;
    top: 10px; */
    border: 8px solid white;
    padding: 10px 10px;
    display: inline-block;
    /* top: 0.01em; */
    /* color: white;  */
    /* color: #666666; */
    /* color: #eeeeee; */
    color: #7c7ce0;
    /* color: #455a64; */
    /* color: #78909c; */
    /* color: #db4437; */
    /* color: #ea9999; */
    /* color: #f6cd4c; */
    background-color: white;
    /* background-color: #00fdc8; */
    
    /* background-color: #666666; */

    /* background-color: #eeeeee; */
    /* background-color: #7c7ce0; */
    
    /* background-color: #455a64; */

    /* background-color: #78909c; */
    /* background-color: #db4437; */
    /* background-color: #ea9999; */
    /* background-color: #f6cd4c; */
    border-bottom-style: groove;
    border-radius: 20px;
    border: 1px solid #db4437;
    /* border: 2px dotted #db4437; */
} 
/* control paragraph describing project */
/* .demos p {
    text-align:justify;
    padding: 10px 10px;
    padding-right: 100px;
    padding-left: 100px;
    color: #455a64;
}  */
.demos ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.demos ul li {
    display: inline;
}
.demos ul li p {
    display: inline;
    /* color: white; */
    /* color: #666666; */
    /* color: #eeeeee; */
    /* color: #7c7ce0; */
    /* color: #455a64; */
    /* color: #78909c; */
    /* color: #db4437; */
    /* color: #ea9999; */
    /* color: #f6cd4c; */
    text-align: center;
    padding: 26px 60px;
    text-decoration: none;
    float: right;
    /* right: 20px; */
    /* color: #00fdc8; */
    color: #666666;
}
.demos vid1 {
    width: 33%; 
    float: left;
}
.demos vid2 {
    width: 33%; 
    float: right;
}
.demos wrap-text {
    color: white;
    overflow-wrap: break-word;
    hyphens: auto;  
}

/* format team section */
/* set the properties for team member images 
.team img {
    max-width: 100px;
}
*/
.team {
    /* position: relative;
    top: 240px; */
    padding: 100px;
    margin: 80px 0;
    margin-top:0px;
    margin-bottom:0px;
    /* width: 100%; */
    text-align: center;
    /* background-color: antiquewhite; */
    background-color: white;
}
/* control overview section title (absolute relative to parent (overview section) */
.team h2 {
    /* position: absolute;
    top: 10px; */
    border: 8px solid white;
    padding: 10px 10px;
    display: inline-block;
    /* top: 0.01em; */
    /* color: white;  */
    /* color: #666666; */
    /* color: #eeeeee; */
    color: #7c7ce0;
    /* color: #455a64; */
    /* color: #78909c; */
    /* color: #db4437; */
    /* color: #ea9999; */
    /* color: #f6cd4c; */
    background-color: #00fdc8;
    
    /* background-color: #666666; */

    /* background-color: #eeeeee; */
    /* background-color: #7c7ce0; */
    
    /* background-color: #455a64; */

    /* background-color: #78909c; */
    /* background-color: #db4437; */
    /* background-color: #ea9999; */
    /* background-color: #f6cd4c; */
    border-bottom-style: groove;
    border-radius: 20px;
    border: 1px solid #db4437;
    /* border: 2px dotted #db4437; */
} 
/* control paragraph describing project */
.team p {
    /* position: absolute;
    top: 100px; */
    text-align:justify;
    padding: 10px 10px;
    padding-right: 100px;
    padding-left: 100px;
    /* top: 0.90em; */
    /* color: white;  */
    /* color: #666666; */
    color: #455a64;
    /* border-style:inset; */
    /* border-style:outset; */
    /* border-top-style: dashed; */
} 





/* format docs section */
.docs {
    /* position: relative;
    top: 300px;
    padding: 10px; */
    padding: 100px;
    margin: 80px 0;
    margin-top:0px;
    margin-bottom:0px;
    /* width: 100%; */
    text-align: center;
    /* background-color: rgb(104, 161, 161); */
    background-color: #00fdc8;
}
/* control title */
.docs h2 {
    /* position: absolute;
    top: 10px; */
    /* text-align: center; */
    border: 8px solid white;
    padding: 10px 10px;
    /* margin-bottom:50px; */
    margin: 50px;
    display: inline-block;
    /* top: 0.01em; */
    /* color: white;  */
    /* color: #666666; */
    /* color: #eeeeee; */
    color: #7c7ce0;
    /* color: #455a64; */
    /* color: #78909c; */
    /* color: #db4437; */
    /* color: #ea9999; */
    /* color: #f6cd4c; */
    background-color: white;
    /* background-color: #00fdc8; */
    
    /* background-color: #666666; */

    /* background-color: #eeeeee; */
    /* background-color: #7c7ce0; */
    
    /* background-color: #455a64; */

    /* background-color: #78909c; */
    /* background-color: #db4437; */
    /* background-color: #ea9999; */
    /* background-color: #f6cd4c; */
    border-bottom-style: groove;
    border-radius: 20px;
    border: 1px solid #db4437;
    /* border: 2px dotted #db4437; */
} 
.docs ul {
    /* list-style-type: none; */

    /* margin: 0; */
    /* margin:0 auto; */
    /* margin-left: 50px; */
    /* margin-right: 50px; */
    /* padding: 0; */
    /* padding: 10px 10px 10px 10px; */
    /* overflow: hidden; */

    font-size: 1em;

    /* list-style: none; */
    
    width: 100%;
    display: table;
    table-layout: fixed;
    padding: 0;
}
.docs ul li {
    /* display: inline; */
    /* background-color:#666666; */
    background-color: #00fdc8;
    /* background-color: #ea9999; */
    /* background-color:#7c7ce0; */
    /* white-space: nowrap; */
    
    margin: 0 0px 0 0;
    padding: 7px 10px;
    
    display: block;
    display: table-cell;
    /* width: auto; */
    /* width: 100%; */
    width: 40%;
    /* text-align: center; */
    text-align: left;

    /* border-bottom-style: groove;
    border-radius: 20px;
    border: 1px solid #455a64; */
}
.docs ul li a {
    display: inline;
    /* color: white; */
    /* color: #666666; */
    /* color: #eeeeee; */
    /* color: #7c7ce0; */
    /* color: #455a64; */
    /* color: #78909c; */
    /* color: #db4437; */
    /* color: #ea9999; */
    /* color: #f6cd4c; */

    /* text-align: center; */
    /* text-align: left; */

    padding: 26px 60px;
    /* margin: 50px 50px 50px 50px; */
    text-decoration: none;
    /* float: right; */
    float:left;
    /* text-align: center; */
    /* color:#455a64; */
    color: white;

    background-color:#ea9999;
    /* background-color:#7c7ce0; */
    border-bottom-style: groove;
    border-radius: 20px;
    border: 1px solid #455a64;
    
    overflow-wrap: break-word;
}
.docs ul li h1 {
    display: inline;
    color:#455a64;
    /* color: #00fdc8; */
    /* color: #666666; */
    /* color: #eeeeee; */
    /* color: #7c7ce0; */
    /* color: #455a64; */
    /* color: #78909c; */
    /* color: #db4437; */
    /* color: #ea9999; */
    /* color: #f6cd4c; */
    text-align: left;
    padding: 1px 8px;
    text-decoration: none;
    float: left;
}
/* Change the link color to #111 (black) on hover */
.docs ul li a:hover {
    background-color:#455a64;
    /* background-color: #111; */
    /* background-color: #f6cd4c; */
    /* background-color: #00fdc8; */
    /* background-color: #666666; */
    color:#7c7ce0;
}



/* format footer section */
.footer {
    padding: 10px;
    margin: 80px 0;
    margin-top:0px;
    margin-bottom:0px;
    /* width: 100%; */
    text-align: center;
    /* background-color: antiquewhite; */
    /* background-color: white; */
    background-color: #666666;
    /* background-color: #eeeeee;
    background-color: #7c7ce0;
    background-color: #455a64;
    background-color: #78909c;
    background-color: #db4437;
    background-color: #ea9999;
    background-color: #f6cd4c; */
}