body{
    /* background-image: url("../image/background.jpeg"); */
    background-repeat: no-repeat;
    background-size:cover;
    background-color: #fffca1;
    font-family: Arial, Verdana, Helvetica;
}

.container{
    color: rgb(0, 0, 0);
    background-color: 	#F5C70B;
    width: 60%;
    text-align: center;
    position:relative;
    left: 20%;
    padding-bottom: 1vw;
}

#original_photo{
    margin-top: 20%;
    width: 20%;
    border-radius:50%;
}

.autobiography_button{
    cursor: pointer;
    text-decoration: underline;
    text-align: left;
    margin-left: 10vw;
}
.autobiography_button:hover{
    color: black;
}

.w3-modal-content{
    border-radius: 2vw !important;
}
.w3-button{
    color: black !important;
    border-radius: 2vw !important;
}

.w3-container{
   background-color: wheat;

}
.stay_center{
font-size: 1.5vw;
}

article{
    color: black;
    margin: 5vw;
    
}


.link{
    margin-top: -1vw;
    cursor: pointer;
    text-decoration: underline;
    font-size: 1.5vw;
}
.link:hover{
    color: black;
}
a:hover{
    color: black;
}

#article1{
    display: none;
    position: fixed;
    right: 20%;
    left: 20%;
    top:20%;
    bottom: 20%;
}
#article2{
    display: none;
    position: fixed;
    right: 20%;
    left: 20%;
    top:20%;
    bottom: 20%;
}

#article3{
    display: none;
    position: fixed;
    right: 20%;
    left: 20%;
    top:20%;
    bottom: 20%;
}

#article4{
    display: none;
    position: fixed;
    right: 20%;
    left: 20%;
    top:5%;
    bottom: 5%;
}

#article5{
    display: none;
    position: fixed;
    right: 20%;
    left: 20%;
    top:10%;
    bottom: 20%;
   
}

#article6{
    display: none;
    position: fixed;
    right: 20%;
    left: 20%;
    top:10%;
    bottom: 20%;
}

#article7{
    display: none;
    position: fixed;
    right: 20%;
    left: 20%;
    top:20%;
    bottom: 20%;
}

#article8{
    display: none;
    position: fixed;
    right: 20%;
    left: 20%;
    top:10%;
    bottom: 20%;
}

#article9{
    display: none;
    position: fixed;
    right: 20%;
    left: 20%;
    top:10%;
    bottom: 20%;
}


.name{
    margin-bottom: 0vw;
    font-size: 2.5vw;
}

.school{
    margin-top: 0.3vw;
    font-size: 2vw;
}

.github_icon{
    width: 5%;
}

article{
    font-size: 1.5vw;
    margin-left: 5vw;
    margin-right: 5vw;
    text-align: left;
}

.content_block{
    color: white;
    border-style: solid;
    border-width: medium;
    border-color: black;
    border-radius: 1vw;
    background-color: #6B5036;
    margin-bottom: 1vw;
    margin-left: 2vw;
    margin-right: 2vw;
    font-size: 2vw;
}

ul{
    margin-top: 0vw;
    margin-bottom: 4vw;
    padding: 1vw;
}

li{
    list-style-type: none;
    width: 7vw;
    float: left;
   
    border-radius: 1vw;
    margin-left: 12vw;
    /* margin-top: 0vw;
    margin-bottom: 2vw; */
}

.active{
    background-color: #F5C70B;
    color: black;
}

li:hover{
    background-color: #fffca1;
    color: black;
    cursor: pointer;
}

/* 文字靠左對齊 */
.stay_left{
    margin-left: 5vw;
    margin-right: 5vw;
    text-align: left;
    font-size: 1.5vw;
}

.skill_block p{
    font-size: 1.5vw;
}

ul{
    margin-top: -2vw;
}

a{
    color: white;
    font-size: 1.5vw;
}


i{
    position: fixed;
    right: 8vw;
    bottom: 5vw;
    font-size: 5vw;
    color: black;
}

i:hover{
    color:#6B5036;
}