body {
font-family:"heebo";
font-weight:100;
}

iframe {
width:560;
height:315;
max-width:100%;
}

header {
width:100%;
padding-bottom:200px;
}

#myname {
font-family:"fira sans";
font-weight:100;
font-size:24px;
letter-spacing:1px;
position: relative;
margin-left:45px;
}

@media only screen and (max-width: 500px) { 
	#myname {
	font-size:24px;
	font-weight:100;
	margin:10px;
	position:relative;
	}
}


#chinesename {
font-family: "Noto Sans TC", sans-serif;
font-size: 180%;
font-weight: 100;
float:right;
position:static;
margin-right:100px;
margin-bottom:-50px;
margin-top:-10px;
}


@media only screen and (max-width: 500px) {
	#chinesename {
	position:relative;
        font-size:160%;
        font-weight:100;
	margin-right:10px;
	margin-top:-40px;
	}
}

#indexmsg {
margin-left:45px;
}

@media only screen and (max-width: 500px) {
        #indexmsg {
        margin-left:10px;
        }
}


.title {
font-family:"fira sans";
font-weight: 400;
font-size: 1.2rem;
margin-top: 100px;
}

@media only screen and (max-width: 500px) {
        .title {
        font-size: 1.2rem;
        }
}

.titleinfo {
font-family:"fira sans";
font-weight:300;
font-size:14px;
line-height:150%;
}

@media only screen and (max-width: 500px) {
        .titleinfo {
        font-size:16px;
        width:85%
        }
}

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
}

a:hover {
color: peru;
}

a:active {
color: ;
}


.workpic {
position: relative;
margin-top: 200px;
}

@media only screen and (max-width: 500px) {
	.workpic {
	width:100%;
	}
}

.workinfo {
float: right;
position: sticky;
width: 400px;
margin-top:80px;
margin-right:100px;
margin-bottom:100px;
margin-left: 100px;
letter-spacing:1px;
font-family:"heebo";
font-weight:300;
font-size:14px;
}

@media only screen and (max-width: 500px) {
        .workinfo {
        font-size:16px;
	float:left;
	margin-left:15%;
	width:75%;
	}
}

.work {
margin-left:10px;
margin-right:2%; 
}

@media only screen and (max-width: 500px){
	.work {
	margin-left:2%;
        margin-right:2%; 
	}
}

.smalltext {
font-size: 12px;
margin-top: -2px;
font-family:"heebo";
font-weight:100;
}

@media only screen and (max-width: 500px) {
        .smalltext {
        Font-size:1rem;
        }
}


#back {
float:left;
position:relative;
font-size:40px;
margin-top:200px;
margin-left:45px;
}

@media only screen and (max-width: 500px) {
        #back {
        font-size:120px;
	margin-left:10px;
	margin-top:100px;
	}
}


.tempsmall.portrait{
cursor: pointer;
transition: 0.3s; 
width:100px;
padding:200px;
}

.tempsmall:hover {opacity:0.7;}

.tempsmall.landscape {
cursor:pointer;
transition: 0.3s;
height:100px;
padding:200px;
}

@media only screen and (max-width: 500px) {
        .tempsmall {
        margin-left:-80px;
        }
}  

.modal {
display:none;
position:fixed;
z-index:1;
padding-top:50px;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}

.modal-content {
margin: auto;
display: block;
position:relative;
bottom:80px;
top:100px;
}

@media only screen and (max-width: 500px) {
  .modal-content {
    width:90%;
    margin-top:30px;
    margin-right:;
    position:sticky;
    }
}

.close {
position: absolute;
top:15px;
right:30px;
color: #f1f1f1;
font-size: 40px;
transition:0.3s;
z-index:2;
}

.close:hover,
.close:focus {
color:#bbb;
text-decoration:none;
cursor:pointer:
}

@media only screen and (max-width: 500px) {
	.close {
	font-size:120px;
	margin-top:-60px;
	}
}