style.css

* {
    box-sizing: border-box;
    font-family: dfkai-sb, stkaiti, 標楷體, 华文楷体, serif !important;
}

html {
    /* background: url(images/snowlight.jpg) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

.letter {
    width: 800px;
    display: block;
    overflow: auto;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 20px 40px;
    margin: 0 auto;
    margin-top: 170px;
    text-align: left;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.3),
                0px 8px 13px rgba(0,0,0,0.1),
                0px 18px 23px rgba(0,0,0,0.1);
}
.letter a{
    color: white;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.3),
                0px 8px 13px rgba(0,0,0,0.1),
                0px 18px 23px rgba(0,0,0,0.1);
}
.box{
    position: relative;
    width: 500px;
    height: 500px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 40px;
    margin: 0 auto;
    margin-top: 170px;
    text-align: center;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.3),
                0px 8px 13px rgba(0,0,0,0.1),
                0px 18px 23px rgba(0,0,0,0.1);
}

.profile_image {
    border-radius: 50%;
    height: 200px;
    width: 200px;
}

ul {
    position: fixed;
    bottom: 20px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
}

li {
    float: right;
    width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
    
}

li a {
    display: block;
    text-decoration: none;
    text-align: center;
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

.secret {
    color: rgba(255,255,255,0.2);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
    text-decoration: none;
}


@-moz-document url-prefix() {
    .profile_image {
        filter: saturate(150%);
    }
}