@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

* {
    font-family: 'Quicksand', sans-serif;
}

body {    
   margin: 0 auto;
   background-color: #ef6d5a;
    padding: 0.1px 0 0 0;
}

main {
    
}

.header-wrap {  
    width: 100%;        
    border-bottom: 1px solid #fff;  
    box-shadow: 0 0 5px 0; 
    background-color: white;
    position: fixed;
}

header{ 
    width:95%;  
    margin:0 auto;
    background-color: white;
}

#logo { 
    display: block; 
    margin: auto; 
    width: 100%;
    height: 0;
}

.header-wrap nav {
    line-height: 60px;
    text-align: right;
    font-size: 25px;

}

.header-wrap nav li { 
    display: inline;
    margin-left: 75px;
}

.header-wrap nav ul {
    list-style-type: none;  
}

.about {  
    width: 100%;        
    border-bottom: 1px solid #fff;  
    box-shadow: 0 0 5px 0; 
    background-color: white;
    position: fixed;
}

.about nav {
    line-height: 60px;
    text-align: right;
    font-size: 25px;

}

.about nav li { 
    display: inline;
    margin-left: 25px;
}

.about nav ul {
    list-style-type: none;  
}


a:link {
    text-decoration:none;
    color: #99a0af;
}

a:hover {
    color: #ef6d5a;
}

a:visited {
    color: #99a0af;
}

/**yellow design**/
#market-research h2, #name h2, #ascii h2, #background h2, #inspiration h2, #nondesign h2, #design h2, #forgery h2, #st h2, #wf h2, #sm h2 {
    color: yellow;
    font-size: 40px;
    text-shadow: 5px 5px 1px #e36755;
    text-align: center;
}


#market-research h1, #forgery h1, #st h1, #wf h1 {
    color: white;
    font-size: 70px;
    text-shadow: 7px 7px 1px #e36755;
    text-align: center;
    padding: 150px 0 0 0;
    margin: 30px 0 60px 0;
}

#wb2 h1 {
    color: white;
    font-size: 100px;
    text-shadow: 7px 7px 1px #e36755;
    text-align: center;
    padding: 150px 0 0 0;
    margin: 150px 0 90px 0;
}

#wb2 h3 {
    color: white;
    font-size: 40px;
    text-shadow: 5px 5px 1px #e36755;
    text-align: center;
    margin: 80px 0 200px 0;
}

#name h1{
    color: white;
    font-size: 70px;
    text-shadow: 7px 7px 1px #e36755;
    text-align: center;
    padding: 150px 0 0 0;
    margin: 30px 0 60px 0;
}

#name h3 {
    color: white;
    font-size: 40px;
    text-shadow: 5px 5px 1px #e36755;
    text-align: center;
    margin: 80px 0 0 0;
}

#exercises {
    background-color: #2b313d;
    width: 100%;        
    border-bottom: 1px solid #262c35;  
    box-shadow: 0 0 5px 0; 
}

#exercises h1 {
    color: white;
    font-size: 100px;
    text-shadow: 7px 7px 1px #262c35;
    text-align: center;
    padding: 150px 0 0 0;
    margin: 100px 0 60px 0;
}

#exercises h2 {
    color: yellow;
    font-size: 40px;
    text-shadow: 5px 5px 1px #262c35;
    text-align: center;
}

#exercises ul {
    color: white;
    font-size: 40px;
    text-shadow: 5px 5px 1px #262c35;
    text-align: center;
    list-style: none;
    margin: 60px 0 300px 0;
}

#exercises a {
    color: white;
}

#exercises a:hover {
    color: #e36755;
}

#projects h1{
    color: white;
    font-size: 100px;
    text-shadow: 7px 7px 1px #e36755;
    text-align: center;
    margin: 0px 0 60px 0;
    padding: 150px 0 0 0;
}

#wb2 h2, #projects h2 {
    color: yellow;
    font-size: 40px;
    text-shadow: 5px 5px 1px #e36755;
    text-align: center;
    
}

#projects ul {
    color: white;
    font-size: 40px;
    text-shadow: 5px 5px 1px #e36755;
    text-align: center;
    list-style: none;
    margin: 60px 0 300px 0;
}

#projects a {
    color: white;
}

#projects a:hover {
    color: #262c35;
}

#mr {
    margin: 50px 50px 50px 50px;
    color: white;

}

#mr a {
    color: #4C5361;
}

#mr a:hover {
    color: white;
}

#mr img {
    text-align: center;
}

#ascii h1{
    color: white;
    font-size: 70px;
    text-shadow: 7px 7px 1px #e36755;
    text-align: center;
    padding: 150px 0 0 0;
    margin: 30px 0 60px 0;
}

#ascii h3 {
    color: white;
    font-size: 40px;
    text-shadow: 5px 5px 1px #e36755;
    text-align: center;
    margin: 80px 0 0 0;
}

#background h1 {
    color: white;
    font-size: 70px;
    text-shadow: 7px 7px 1px #e36755;
    text-align: center;
    padding: 150px 0 0 0;
    margin: 30px 0 60px 0;
}

#background h3 {
    color: white;
    font-size: 30px;
    text-shadow: 5px 5px 1px #e36755;
    text-align: center;
    margin: 50px 350px 0 350px;
}

#background h4 {
    color: yellow;
    font-size: 30px;
    text-shadow: 5px 5px 1px #e36755;
    text-align: center; 
}

#inspiration h1, #sm h1 {
    color: white;
    font-size: 70px;
    text-shadow: 7px 7px 1px #e36755;
    text-align: center;
    padding: 150px 0 0 0;
    margin: 30px 0 60px 0;
}

#pfimage {
    text-align: center;
}

#inspiration p {
    color: white;
    font-size: 25px;
    text-shadow: 5px 5px 1px #e36755;
    text-align: center;
    margin: 10px 500px 10px 500px;
}

#nondesign h1, #design h1 {
    color: white;
    font-size: 70px;
    text-shadow: 7px 7px 1px #e36755;
    text-align: center;
    padding: 150px 0 0 0;
    margin: 30px 0 60px 0;
}

#nondesign, #design {
    text-align: center;
}

#nondesign p, #design p {
    color: white;
    font-size: 25px;
    text-shadow: 5px 5px 1px #e36755;
    text-align: center;
    margin: 40px 500px 10px 500px;
}

body {
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-position:bottom;
         background-size: 900px;
}

#forgery-images {padding-top:25px;clear:both; width:90%; margin:0 auto;/*this will center*/}
.forgeryimage, .mobile {width:100%; padding-top:25px;} 


#forgery-images {
    clear:both; 
    width:100%; 
}

.tablet, .desktop {
    text-align: center;
    margin: -70px;
}

.dctablet {
    text-align: center;
    margin: 50px;
}

.dcdesktop {
    text-align: center;
    margin: -70px 0 0 0;
}


#wf-desktop p, #wf-tablet p {
    text-align: center;
    padding: 70px 0 40px 0;
    font-weight: 800;
    color: white;
    font-size: 30px;
    text-shadow: 5px 5px 1px #e36755;
}

#dc-desktop p {
    text-align: center;
    padding: 60px 0 50px 0;
    font-weight: 800;
    color: white;
    font-size: 30px;
    text-shadow: 5px 5px 1px #e36755;
}

#dc-tablet p {
    text-align: center;
    padding: 50px 0 0 0;
    font-weight: 800;
    color: white;
    font-size: 30px;
    text-shadow: 5px 5px 1px #e36755;
}

.forgeryimage {
    width:32%; 
    padding-top:25px;
    margin-right:1.2%; 
    float:left;
    text-align: center; 
}

.forgeryimage :last-child {
    margin-right:0px;
    margin-bottom: 50px
}

#tiles {
    width:100%; 
    padding-top:25px;
    text-align: center; 
}

#site-map {
    text-align: center;
}

#wf-mobile {
    clear:both;  
    margin:0 auto;/*this will center*/
    display: flex;

    }

.mobile {
    width:32%; 
    float:left;
    text-align: center; 
     margin: 0 0 -100px 0;
    } 
    
.mobile :last-child {
    margin-right:0px;   
}

#titles-mobile {
    text-align: center;
    font-weight: 800;
    color: white;
    font-size: 30px;
    text-shadow: 5px 5px 1px #e36755;
    margin-top: 30px;
}

#dc-mobile {
    clear:both;  
    margin:0 auto;/*this will center*/
    display: flex;

    }

.dcmobile {
    width:50%; 
    text-align: center; 
    float: left;
    margin: 0;
    } 

#dc-titles-mobile {
    text-align: center;
    font-weight: 800;
    color: white;
    font-size: 30px;
    text-shadow: 5px 5px 1px #e36755;
    margin-bottom: 0px;
}