@charset "UTF-8";
*, *:before, *:after {
	box-sizing: border-box;
}
body  {
    font-size: 1rem;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000000;
    background-color: #FFFFFF;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#container {
    background-color: #FFFFFF;
    width: 1270px;
    margin-left: auto;
    margin-right: auto;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-weight: 200;
    color: #B26769;
}
#intro aside h1 {
    color: #FFFFFF;
    font-size: 5em;
    margin-top: -182px;
    margin-right: -146px;
    margin-left: -146px;
    margin-bottom: -146px;
}
aside p {
    color: #000000;
    font-size: 3.5em;
    margin-bottom: -189px;
    margin-top: 206px;
    margin-left: -141px;
}
#Project1 h1 {
    font-size: 4em;
    border-top-color: #AEAEAE;
    /* [disabled]border-top-style: solid; */
    border-top-width: thin;
    margin-left: 169px;
    margin-bottom: 64px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #000000;
    margin-top: -19px;
}
#Project1 p {
    font-size: 1em;
    color: #000000;
    float: left;
    width: 30%;
    padding-top: 0px;
}
a:link, a:visited {
    color: #000000;
    text-decoration: none;
}
#topNav ul {
    padding-left: 0px;
    list-style-type: none;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    font-size: 1.4em;
    padding-top: 2px;
}
#intro aside {
    border-radius: 76px;
    border: medium solid #F9B61B;
    padding-top: 221px;
    padding-right: 221px;
    padding-bottom: 221px;
    padding-left: 221px;
    background-color: #F9B61B;
    margin-left: 301px;
    margin-top: 90px;
    margin-right: 108px;
    margin-bottom: 238px;
}
#Project2 #imageContainer-project2 p {
    font-size: 3em;
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 103px;
    height: 100px;
    line-height: 100px;
    text-shadow: 0px 0px 59px;
    blur-radius: 10 rgba(0,0,0,1.00);
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-style: normal;
    font-weight: 600;
    padding-bottom: 142px;
}
footer {
    background-color: #FFFFFF;
    padding-top: 52px;
    padding-bottom: 52px;
}
#container footer ul {
    background-color: #FFFFFF;
    list-style-type: none;
    display: flex;
    font-size: 1.4em;
    justify-content: center;
    align-items: center;
	gap: 50px
}
main #Project1 h2 {
    margin-left: -91px;
    margin-top: -60px;
    margin-bottom: -9px;
    color: #000000;
}
main #Project2 h1 {
    font-size: 7em;
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 148px;
    height: 100px;
    line-height: 100px;
    font-family: 'Konkhmer Sleokchher', cursive;
    padding-top: 0px;
    padding-bottom: 150px;
    color: rgba(174,25,28,1.00);
}
main #Project1 #id {
}
#Project1 #computer-portal-image img {
    width: 749px;
    height: 468px;
    border-radius: 31px;
    border: 9px solid #000000;
    display: inline-block;
    margin-bottom: -224px;
    margin-top: 39px;
    margin-left: 242px;
}
main #Project1 img {
    width: 156px;
    height: 337.6px;
    border: 8px solid #000000;
    border-radius: 23px;
    display: inline-block;
    margin-bottom: 215px;
    margin-top: -86px;
    margin-left: 912px;
    padding-bottom: 0px;
}
main #Project1 #Porject-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -825px;
    space-between: 200px;
    margin-bottom: 35px;
    width: auto;
}
#imageContainer-project2 {
    width: 1270px;
    height: 600px;
    margin: 0px auto;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(Assets/Images/optimized-final-wireframe.jpg); /*This image was sourced from (a wireframe I made in Figma.com) This asset is 100% my own*/
}
#imageContainer-design {
    width: 1270px;
    height: 600px;
    margin-top: 279px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("Assets/Images/design-photo.jpg"); /*This image was sourced from https://www.pexels.com/photo/seoul-city-skyline-under-cloudy-sky-11314621/ https://www.pexels.com/license/ */
}
#DesignProcess #imageContainer-design h1 {
    width: 59%;
    position: absolute;
    top: 221px;
    font-size: 71px;
    color: #000000;
    border: 3px solid #F9B61B;
    background-color: #F9B61B;
    margin-left: 249px;
    text-align: center;
    margin-top: -187px;
    padding-bottom: 8px;
    -webkit-box-shadow: 0px 0px 86px -8px #000000;
    box-shadow: 0px 0px 86px -8px #000000;
}
#DesignProcess #imageContainer-design p {
    width: 49%;
    position: absolute;
    top: 261px;
    padding-top: 12px;
    font-size: 2.2em;
    margin-left: 320px;
    margin-top: -91px;
    background-color: rgba(255,255,255,0.68);
    border-radius: 22px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
}
#DesignProcess #imageContainer-design a {
    background-color: rgba(200,75,77,1.00);
    width: 53%;
    position: absolute;
    top: 479px;
    font-size: 2em;
    margin-left: 296px;
    text-align: center;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    border-radius: 10px;
}
a:hover {
    color: #D1428E;
    text-decoration: none;
}
#Project1 #section p2 {
    padding-right: 0px;
}
main #Project1 .p2 {
    margin-top: -188px;
    margin-left: 835px;
    width: 22%;
}
main #Project1 p {
    margin-right: 70px;
    margin-left: 992px;
    margin-top: -148px;
    margin-bottom: 7px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 1px;
}
#section p2 p {
}
.p2 {
}
main #Project1 .p1 {
    margin-left: 518px;
    margin-top: -124px;
    padding-top: 0px;
    width: 23%;
}
#imageContainer-design a:hover {
	color: #FFFFFF
}