/* Global */
@import url(global.css);
@import url(project.css);
@import url(utility.css);

h1,h2,h3,h4,a{
    display: block;
    margin: 0;
    line-height: 1.4;
}
h1{
    margin-top: 80px;
}
h2{
    margin-bottom: 60px;
}
h3{
    margin-bottom: 40px;
}
h4{
    font-size: 18px;
    margin-bottom: 16px;
    text-transform: uppercase;
    color: #aeaeae;
}
hr{
    margin-bottom: 40px;
}
#mainContent p{
    margin: 0;
    font-size: var(--smallText);
    margin-bottom: 16px;
}
#mainContent li{
    font-size: var(--smallText);
    margin-bottom: 8px;
}
ul{
    margin-bottom: 28px;
}
img{
    border-radius: 14px;
}

main{
    margin: 0;
}
#mainContent{
    max-width: 900px;;
}
.gridDisplay{
    margin-bottom: 120px;
}
.gridDisplay2Cols{
    margin-bottom: 120px;
}


/* Hero Image */
#heroImage{
    border-radius: 0;
    margin-top: -60px;
    position: relative;
    max-width: none;
    width: 100vw; 
    left: 50%; /* Push it to the right */
    transform: translateX(-50%); /* Center it while expanding */
}

/* Introduction */
#introduction h2{
    color: #777;
}
#introduction h4{
    color: #d9d9d9;
}
#introContent{
    margin-bottom: 40px;
}
#introduction .visitLinks{
    margin-bottom: 220px;
}

/* Original Website  */
#ogWebBreakdown{
    position: relative;
    max-width: 1300px;
    width: 100vw; 
    left: 50%; /* Push it to the right */
    transform: translateX(-50%); /* Center it while expanding */

    /* margin: 0 20px; */

    margin-bottom: 220px;
}

.prototype{
    margin-bottom: 0px;
}
.prototype h2{
    text-align: end;
    color: #777;
    margin-bottom: 16px;
} 

/* prototyping */
#Prototyping iframe{
    margin-bottom: 40px;
}


/* designSystem */
#designSystem img{
    margin-bottom: 40px;
} 
#designSystem h3{
    margin-bottom: 10px;
}
#designSystem .largeText{
    font-weight: 800;
    color: #FFAB94;

}

/* redesignBreakdown */
#redesignBreakdownImg{
    position: relative;
    max-width: 1300px;
    width: 100vw; 
    left: 50%; /* Push it to the right */
    transform: translateX(-50%); /* Center it while expanding */

    /* margin: 0 20px; */

    margin-bottom: 220px;
}

/* Responsive Showcase */
#responsiveShowcase h2{
    text-align: center;
    margin-bottom: 20px;
}
#responsiveShowcase img{
    margin-bottom: 120px;
}