@charset "utf-8";
html {font-size: 20px; background-color: #D8D2CB;}
body {font-size: 1rem;}
.c_image{width:auto; height: 30rem; overflow:inherit; margin-left: -2rem;}
.c_image img { max-width: 100%; height: auto; display: block; }
.About{width: 60%; height: auto; float: right;background:#A39789; margin-top: -30rem; margin-right: 2.5rem;padding: 1rem; margin-bottom: 1rem;}
.About .name {padding: 1rem; display: flex;}
.name h1{ font-family: 'Noto Sans'; font-weight: 600;font-size: 3rem;color: white;}
.name h2{ font-family: 'Noto Sans'; font-weight: 500; font-size: 1.2rem; color:#544D48; margin-left: 2rem;margin-top: 4rem;}
.name h3{ font-family: 'Noto Sans'; font-weight: 500; font-size: 1.2rem; color:#544D48;text-align: end; margin-top: 4.1rem;padding-left: 8rem;}
.name_1{ display: flex; width: 100%; height: auto; font-family: 'Noto Sans'; color:white; margin-left: 2rem;margin-top: -2rem;justify-content: space-between;}
.name_1 h2{font-weight: 400; font-size: 1.2rem;padding-right: 6rem;}

.explain_me{padding: 1rem;justify-content: s}
.explain_me ul{width:90%; height: auto; display: flex;font-family: 'Noto Sans'; font-weight: 600; font-size: 1.2rem; color:#544D48;}
.explain_me li{width: 100%;margin-left: 1rem;}
.explain_me ul p {font-family: 'Noto Sans'; font-weight: 400; font-size: .9rem; color:#544D48;}
.explain_me span {font-size: 1rem; letter-spacing: .75rem;}
.explain_me img {width: 80%; height: auto; }

.body_1 {padding: 1.5rem;position: relative;}
.body_1 h1 { text-align: center; font-family: 'Noto Sans'; font-weight: 600;font-size: 2rem;color:#544D48;}
.body_1 h2 {padding-left: 7.5rem; font-family: 'Noto Sans'; font-weight: 600;font-size: 1.5rem;color:#544D48;text-decoration: underline; text-decoration-color: white; text-decoration-thickness: 5rem;}
.projects {}
.projects table {float: center; border: #D8D2CB;}
.projects tr {padding-bottom: 1rem;}
.projects th{padding-right: 1.5rem; border: 1px #D8D2CB;font-family: 'Noto Sans'; font-weight: 400; font-size:1.5rem; color:white;padding-left: 4rem;}

.projects td {border: 1px #D8D2CB;font-family: 'Noto Sans'; font-weight: 400; font-size: .95rem; color:#544D48;padding-left: 5%;}
.projects li {font-family: 'Noto Sans'; font-weight: 400; font-size: .95rem; color:#544D48;line-height: 2rem; }


.box {width: 70%; justify-content: space-between;position: relative;margin-left: 20rem; margin-right: 3rem;margin-top: -3rem;}
.contact_b{width: 90%; height: auto; background-color: white; padding:2rem;  align-content: center;}
.contact_b ul{display: flex;margin-top: -2rem;}
.contact_b h3{width: 13rem;height: auto; text-align: justify;  font-family: 'Noto Sans'; font-weight: 500;font-size: 1.3rem;color:#A39789;}
.contact_b h4{font-family: 'Noto Sans'; font-weight: 500;font-size: 1.3rem;color:#544D48;padding-left: 2rem;}
.comtact_b img {width: 30%; height: auto;}

@media (max-width: 800px)
{.c_image{width:auto; height: 20rem; overflow:inherit; margin-left: -0rem;margin-top: -1rem;}
.c_image img { max-width: 40%; height: auto; display: block; }
.About{width: 90%; height: auto; margin-top: -50%; display: block; justify-content: space-between; background:#A39789;margin-left: 1rem;margin-right: 1rem;}
.About .name {justify-content: space-between; padding:1rem; display: block;text-align: left; margin-left: 45%;margin-top: -10%}
.name h1{ font-family: 'Noto Sans'; font-weight: 600;font-size: 280%;color: white;}
.name h2{ font-family: 'Noto Sans'; font-weight: 500; font-size: 1.2rem; color:#544D48; margin-left: -0rem;margin-top: -5%;}
.name h3{ font-family: 'Noto Sans'; font-weight: 500; font-size: 0.8rem; color:#544D48;text-align: left; margin-top: -0rem;padding-left: -0rem;}
.name_1{ display: block; width:40%; height: auto; font-family: 'Noto Sans'; color:white; margin-left: 48%;margin-top: .5rem;justify-content: space-between;}
.name_1 h2{font-weight: 400; font-size: .8rem;padding-right: 5%;margin-top: -.5rem;}
	
	
.explain_me{padding: -0rem;justify-content: space-between;align-content: center;}
.explain_me ul{width:95%; height: auto; display: flex;font-family: 'Noto Sans'; font-weight: 600; font-size: 1.2rem; color:#544D48;}
.explain_me li{width: 100%;margin-left: 1rem;}
.explain_me ul p {font-family: 'Noto Sans'; font-weight: 400; font-size: .9rem; color:#544D48;}
.explain_me span {font-size: 1rem; letter-spacing: .75rem;}
	.explain_me img {width: 80%; height: auto; }
	

.body_1 {padding: 1.5rem;position: relative;}
.body_1 h1 { text-align: center; font-family: 'Noto Sans'; font-weight: 600;font-size: 2rem;color:#544D48;}
.body_1 h2 {padding-left: 5%; font-family: 'Noto Sans'; font-weight: 600;font-size: 1.5rem;color:#544D48;text-decoration: underline; text-decoration-color: white; text-decoration-thickness: 5rem;}
.projects {}
.projects table {float: center; border: #D8D2CB;justify-content: space-between;}
.projects tr {width: 2rem; height: auto;}
.projects th{width:5%; border: 1px #D8D2CB;font-family: 'Noto Sans'; font-weight: 400; font-size:1.5rem; color:white;padding: none;}

.projects td {width:auto;border: 1px #D8D2CB;font-family: 'Noto Sans'; font-weight: 400; font-size: .95rem; color:#544D48;padding-left: 0.2rem;padding-right: 0.2rem;}
.projects li {font-family: 'Noto Sans'; font-weight: 400; font-size: .95rem; color:#544D48;line-height: 2rem; }

.box {width: 100%; justify-content: space-between; align-content: center; margin-top:1%; margin-left: 0rem;}
.contact_b{width: 100%; height: auto; background-color: white; padding:10% 0%;  align-content: center;}
.contact_b ul{display: flex;}
.contact_b h3{width: 10rem;height: auto; text-align: justify;  font-family: 'Noto Sans'; font-weight: 500;font-size: 1rem;color:#A39789;}
.contact_b h4{font-family: 'Noto Sans'; font-weight: 500;font-size: .8rem;color:#544D48;padding-left: 2rem; text-align: left;}
	.contact_b img{width: auto; height: 6rem;padding-left: 1.5rem;padding-top: 1rem;}

}

@media (max-width: 400px)
{.c_image{width:auto; height: 20rem; overflow:inherit; margin-left: -0rem;margin-top: -0rem;}
.c_image img { max-width: 40%; height: auto; display: block; }
.About{width: 80%; height: auto; margin-top: -18rem; display: block; justify-content: space-between; background:#A39789;margin-left: .3rem;margin-right: .3rem;}
.About .name {justify-content: space-between; padding:1rem; display: block;text-align: left; margin-left: 30%;margin-top: -15%}
.name h1{ font-family: 'Noto Sans'; font-weight: 600;font-size: 100%;color: white;}
.name h2{ font-family: 'Noto Sans'; font-weight: 500; font-size: .8rem; color:#544D48; margin-left: -0rem;margin-top: -6%;}
.name h3{ font-family: 'Noto Sans'; font-weight: 500; font-size: .5rem; color:#544D48;text-align: left; margin-top: -.5rem;padding-left: -0rem;}
.name_1{ display: block; width:60%; height: auto; font-family: 'Noto Sans'; color:white; margin-left: 40%;margin-top: -1rem;justify-content: space-between;}
.name_1 h2{font-weight: 400; font-size: .5rem;padding-right: 5%;margin-top: -.5rem;}
	
.explain_me{padding: -0rem;justify-content: space-between;align-content: center;}
.explain_me ul{width:80%; height: auto; display: block;font-family: 'Noto Sans'; font-weight: 600; font-size: .8rem; color:#544D48;}
.explain_me li{width: 100%;margin-left: -0rem;padding-top: 5%;}
.explain_me ul p {font-family: 'Noto Sans'; font-weight: 400; font-size: .7rem; color:#544D48;}
.explain_me span {font-size: .7rem; letter-spacing: .75rem;}
	.explain_me img {width: 80%; height: auto; }
	

.body_1 {padding: .5rem;position: relative;}
.body_1 h1 { text-align: center; font-family: 'Noto Sans'; font-weight: 600;font-size: 1.3rem;color:#544D48;}
.body_1 h2 {padding-left: 2%; font-family: 'Noto Sans'; font-weight: 600;font-size: 1rem;color:#544D48;text-decoration: underline; text-decoration-color: white; text-decoration-thickness: 5rem;}
.projects {width: 80%; float: left;}
.projects table {border: #D8D2CB;justify-content: space-between;margin-left: -20%}
.projects tr { width: 10%; height: auto;}
.projects th{text-align: left; border: .5px #D8D2CB;font-family: 'Noto Sans'; font-weight: 400; font-size:.9rem; color:white;}

.projects td {border: 1px #D8D2CB;font-family: 'Noto Sans'; font-weight: 400; font-size: .7rem; color:#544D48;padding-left: -0rem;padding-right: -0rem;}
.projects stong {width: 1rem;}
.projects li {font-family: 'Noto Sans'; font-weight: 400; font-size: .7rem; color:#544D48;line-height: .7rem; padding-top: .5rem;padding-left: .5rem;}

.box {width: 100%; justify-content: space-between; align-content: center; margin-top:1%; margin-left: 0rem;}
.contact_b{width: 100%; height: auto; background-color: white; padding-left:-5%;  align-content: center;}
.contact_b ul{display: flex;margin-left: -1rem;}
.contact_b h3{width: 5rem;height: auto; font-family: 'Noto Sans'; font-weight: 500;font-size: .7rem;color:#A39789;}
.contact_b h4{font-family: 'Noto Sans'; font-weight: 500;font-size: .6rem;color:#544D48;padding-left: .5rem; text-align: left;}
	.contact_b img{width: auto; height: 6rem;padding-left: 0rem;padding-top: 1rem;}
}