@charset "utf-8";
html{font-size:16px;line-height:1.4;letter-spacing:-0.01rem;}

body{color:#77684a;background-color:#fffce1;font-family: 'Montserrat', sans-serif;}
img{width:100%;}
.wrapper{max-width:960px;text-align:center;background-repeat:no-repeat;background-position:center;margin:0 auto;padding:0 4%;}
h2{font-size:2.5rem;text-transform:uppercase;}
#pdf{border-bottom:2px solid #77684a;font-size:0.85rem;}
#pdf:hover{border-bottom:none;font-size: 0.9rem;}

header{background-color:#dcfaf0;position:fixed;top: 0;width:100%;}
.header{max-width:960px;margin:auto;display:flex;justify-content:space-between;}
h1 img{width:80px;margin:10px 5px 10px 20px;}
header ul{display:flex;margin:10px 20px 10px 5px;}
header ul li{font-size:1.2rem;border-width:3px;border-radius:10px;padding:5px 7px 5px 5px;margin:20px 5px;text-transform:uppercase;padding-left:8px;}
header ul li:hover{background-color:#77684a;color:#dcfaf0;border: 3px solid #77684a;}


h3{font-size:1.6rem;text-transform:uppercase;text-align:center;border-bottom:solid;padding-top:160px;margin-top:-100px;}
.chapter-image-about{max-width:960px;width:90%;background-image:url(../images/about-top.png);background-size:cover;padding:40px 0;margin-top:160px;}
.chapter-image-works{max-width:960px;width:90%;background-image:url(../images/works-top.png);background-size:cover;padding:40px 0;margin-top:160px;}
h3 div{margin-bottom:20px;}
.zoom{font-size:0.8rem;text-align: center;margin-top:5px;}

footer {background-color:#dcfaf0;padding:30px;}footer p{font-size:0.75rem;}

.top-image{width:90%;background-position:center center;background-size:cover;padding:150px 0;margin-top:160px}
.top-image p{font-size:1.25rem;text-align:center;}

.top-contents{display:flex;flex-direction:row-reverse;justify-content:space-around;margin:0 auto 40px auto;}
article ul{width:400px;display:flex;flex-wrap:wrap;} 
article li{font-size:1.1rem;width:160px;height:160px;margin:20px auto;text-transform:uppercase;
   background-repeat:no-repeat;background-position:center;background-size:contain;background-clip:padding-box;}
article li a{display:block;background-color:#fff;border-width:4px;border-radius:24px;overflow: hidden;}
article li a img{transition: 0.5s;}
article li a img:hover{transform: scale(110%);transition: 0.5s;}

.item-about{width:50%;margin:0 auto 40px auto;}
.item-about .title{text-align:left;font-size:1.05rem;font-weight: 400;
   border-bottom: solid;margin:30px auto 10px auto;}
.profile-inside{padding-top:5px;text-align:center;}
.career-item{width:95%;margin:0 auto;text-align: justify;text-justify: inter-ideograph;}
#skill-ill{margin:0 auto;display:inline-block;max-width:90%;width:5px;height:3vh;background-color:#77684a;border-radius:5px;}
#skill-photo{margin:0 auto;display:inline-block;max-width:90%;width:5px;height:3vh;background-color:#77684a;border-radius:5px;}
#skill-html{margin:0 auto;display:inline-block;max-width:90%;width:5px;height:3vh;background-color:#77684a;border-radius:5px;}
#skill-css{margin:0 auto;display:inline-block;max-width:90%;width:5px;height:3vh;background-color:#77684a;border-radius:5px;}
#skill-jq{margin:0 auto;display:inline-block;max-width:90%;width:5px;height:3vh;background-color:#77684a;border-radius:5px;}
.graph{width:95%;margin:0 auto;}
.hobby{padding-bottom:30px;}

#face{width:20%;margin-top:20px;}

.item-works{width:50%;margin:0 auto 60px auto;}
.item-works .title{text-transform:capitalize;
   font-size:1.05rem;font-weight: 400;
   border-bottom: solid;margin:30px auto 15px auto;}
.inside{display:flex;margin:0 auto;}
.works-image{width:30%;text-align: center;}
.works-image img{width:90%;transition: 0.5s;}
.works-image img:hover{transform: scale(110%);transition: 0.5s;}
.works-text{width:70%;text-align:center;}
.works-text span{width:95%;display:inline-block; text-align: justify;text-justify: inter-ideograph;}

.more{text-align:right;margin:10px auto;}
.more a{border-width:2.5px;padding:3px 7px;border-radius:10px;}
.more a:hover{background-color:#77684a;color:#fffce1;border: 2.5px solid #77684a;}

.modal{position:fixed;bottom:0;width:100vw;height:calc(100vh - 100px);background-color:rgba(245, 245, 245, 0.7);display: none;}
.forcas{position:absolute;width:40%;height:auto;top:calc((50vh - 200px)/2);left:calc(60%/2);}
.modal-close{font-size:50px;position:absolute;right:50px;top:40px;}




@media(max-width:768px){

.top-contents{flex-direction:column;}
article ul{max-width:400px;width:100%;margin: 0 auto;}

h1 img{width:50px;margin:10px;}
header ul{width:60%;display:flex;margin-right:5px;}
header ul li{font-size:1.0rem;border-width:2px;border-radius:7px;margin:10px 2px;text-transform:uppercase;padding:3px;}
header ul li:hover{background-color:#dcfaf0;color:#77684a;border: solid 2px #77684a;}
article li a img:hover{transform: scale(100%);}

.top-image{width:90%;background-position:center center;background-size:cover;padding:100px 0;margin-top:100px}
.chapter-image-about{width:90%;background-image:url(../images/about-top.png);background-size:cover;padding:40px 0;margin-top:100px;}
.chapter-image-works{width:90%;background-image:url(../images/works-top.png);background-size:cover;padding:40px 0;margin-top:100px;}

h3{font-size:1.6rem;text-transform:uppercase;text-align:center;border-bottom:solid;padding-top:100px;margin-top:-70px;}
.zoom{font-size:0.5em;text-align: center;margin-top:5px;}

.item-about{width:70%;margin:0 auto;}
.item-about .title{text-transform:capitalize;font-size:1.05rem;font-weight: 400;border-bottom: solid;}
.career-item{width:95%;margin:0 auto;font-size:0.8rem;}
.graph{width:95%;margin:0 auto;}
#skill-ill{height:2vh;}
#skill-photo{height:2vh;}
#skill-html{height:2vh;}
#skill-css{height:2vh;}
#skill-jq{height:2vh;}

.item-works{width:70%;}
.inside{display:flex;margin:0 auto;}
.works-image{width:30%;text-align:center;}
.works-image img:hover{transform: scale(100%);}
.works-text{width:70%;font-size:0.8rem;text-align:center;}
.works-text span{width:95%;display:inline-block; text-align: justify;text-justify: inter-ideograph;}


.more a{font-size:0.8rem;border-width:2px;padding:2px 5px;border-radius:7px;}
.more a:hover{background-color:#fffce1;color:#77684a;border: 2px solid #77684a;}

.modal{height:calc(100vh - 70px);}
.forcas{width:80%;top:calc((50vh - 70px)/2);left:calc(20%/2);}
.modal-close{font-size:30px;position:absolute;right:20px;top:15px;}

}