html,
body {
    width: 100%;
    height: 100%;
    background: #fefefe;
    border: none;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color: #ffffff;
}

.iconify {
    width: 75px;
    height: 75px;
}

.avatar {
    border-radius: 50%;
    width: 100%;
    max-width: 250px;
    height: auto;
    position: relative;
}

.link:before {
    font-family: "Iconify";
    content: url('https://api.iconify.design/entypo:link.svg?color=white&height=15');
    font-size: 0.8em;
    vertical-align: middle;
    display: inline-block;
    padding-right: 3px;
}

em {
    font-weight: bold;
    font-style: normal;
    font-size: 1.2em;
}

.page {
    position: relative;
    width: 100%;
    overflow: hidden;

    /* fix size */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.about-wrapper {
    height: 100%;
    display: table;

    background: black;
    background: url(../assets/bg.webp);
    background-size: auto, 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    color: white;
}

.about-outer {
    display: table-cell;
    vertical-align: middle;
}

.about-inner {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;
    -webkit-text-shadow: 0px 2px 10px #000000;
    -moz-text-shadow: 0px 2px 10px #000000;
    text-shadow: 0px 2px 10px #000000;
}

.about-inner .links a::before {
    display: none;
}

.cursor:after {
    content: "|";

    -webkit-animation-name: blink;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-timing-function: linear, steps(2, end);

    animation-name: blink;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-timing-function: linear, steps(2, end);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Standard syntax */
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.control {
    background: transparent;
    border: 1px solid #bbbbbb;
    padding: 0.5em;
    border-radius: 6px;
    behavior: url(border-radius.htc);
    /* IE 6-8 */

    -webkit-text-shadow: 0px 2px 10px #000000;
    -moz-text-shadow: 0px 2px 10px #000000;
    text-shadow: 0px 2px 10px #000000;
}

.control.hide {
    display: none;
}

.control:before {
    font-family: "Iconify";
    font-size: 0.8em;
    vertical-align: middle;
    display: inline-block;
    padding-right: 3px;
}

.control.play:before {
    content: url('https://api.iconify.design/ion:play.svg?color=white&height=15');
}

.control.play:after {
    content: "Play";
}

.control.stop:before {
    content: url('https://api.iconify.design/ion:stop.svg?color=white&height=15');
}

.control.stop:after {
    content: "Stop";
}

.button {
    background: transparent;
    border: 1px solid #bbbbbb;
    padding: 0.2em 0.5em;
    border-radius: 6px;
    behavior: url(border-radius.htc);
    /* IE 6-8 */

    -webkit-text-shadow: 0px 2px 10px #000000;
    -moz-text-shadow: 0px 2px 10px #000000;
    text-shadow: 0px 2px 10px #000000;
}

.from {
    text-align: center;
    background: #ffffff;
    color: #111111;

    padding-top: 2em;
    padding-bottom: 2em;
}

.from .map {
    margin: 0px;
    position: relative;
    height: 400px;
}

.from .map iframe {
    width: 100%;
    height: 100%;
}

.from .description {
    background-image: url(ncku-logo.jpg);
    background-size: auto, 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.from .text {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0.7)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b3ffffff', endColorstr='#b3ffffff');
}

.learning {
    text-align: center;
    background: #ffffff;

    padding-top: 2em;
    padding-bottom: 2em;
}

.learning .skill {
    width: 100%;
    display: inline-block;
    position: relative;
    vertical-align: top;
}

.learning .skill .skill-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    width: 95%;
    height: 15em;
    margin-bottom: 0.5em;
    overflow: hidden;
    padding-top: 1em;

    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.26);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.26);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.26);

}

.learning .skill .skill-inner .text {
    padding: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.learning .skill .skill-inner .progress {
    position: absolute;
    height: 6px;
    background-color: #7781c6;
    bottom: 0;
}

.learning .skill .skill-inner .js-icon {
    width: 80px;
    height: 80px;
    display: inline-block;
    position: relative;
    vertical-align: top;

}

.learning .skill .skill-inner .js-icon:before {
    display: block;
    position: absolute;
    left: 5px;
    top: 5px;
    bottom: 5px;
    right: 5px;
    background: #fdde05;
    content: "";
}

.learning .skill .skill-inner .js-icon:after {
    display: block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 40px;
    color: #000000;
    content: "JS";
}

.works {
    color: #f7f7f7;
    background-color: rgb(133, 133, 133);
    text-align: center;

    padding-top: 2em;
    padding-bottom: 2em;
}

.works .work {
    width: 100%;
    display: inline-block;
    position: relative;
    vertical-align: top;
    overflow: hidden;
}

.works .foreground{
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    background-color: rgba(101, 101, 101, 0.95);;
    transition: .5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: larger;
}

.works .foreground ul {
    margin-right:0.5cm;
}

.works .work .work-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    width: 95%;
    height: 20em;
    margin-bottom: 0.5em;
    overflow: hidden;
    padding-top: 1em;
    border-radius: 1%;

    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.26);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.26);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.26);

}

.works .work-inner:hover .foreground{
    transform: translateX(0);
}

.works .work .work-inner img {
    height: 50%;
    width: 100%;
}

.works .work .work-inner h3 {
    color: #000000;
    padding: 1em;
    padding-top: 0.1em;
    padding-bottom: 0.5em;
}

.works .work .work-inner .text {
    color: #000000;
    padding: 1em;
    padding-top: 0.1em;
    padding-bottom: 0.5em;
}

.contact {
    color: #f7f7f7;
    background: rgb(105, 105, 105);
    text-align: center;

    padding-top: 2em;
    padding-bottom: 2em;
}

.contact .contact-method {
    vertical-align: top;
    width: 95%;
    display: inline-block;
    /*height: 200px;*/
    border-top: #777777 solid 1px;
    padding-top: 1em;
    padding-bottom: 1em;
}

.footer {
    text-align: center;
    background: rgb(53, 53, 53);
    color: #dddddd;
}

.footer a {
    color: #dddddd;
}



.nav {
    z-index: 99998;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;

    text-align: right;
    line-height: 2.1em;
    height: 2.5em;
    padding: 0.2em;
}

.nav .icon {
    display: inline-block;
    height: 2em;
    width: 2em;
    margin-right: 0.5em;
    line-height: 1.8em;
    text-align: center;
    box-sizing: border-box;
    /*border: 0.1em solid #ffffff;*/
    border-radius: 4px;
    /*vertical-align: middle;*/
    behavior: url(border-radius.htc);
    /* IE 6-8 */
    color: white;
}

.nav .overlay {
    z-index: 99999;
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    background: rgba(64, 64, 64, 0.7);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b3404040', endColorstr='#b3404040');
    display: none;

}

#toggle-menu:checked~.overlay {
    display: block;
}

.nav .links {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 240px;

    list-style: none;
    text-align: right;

    padding: 1em;

    margin: 0px;

    background: #4FC3F7;
    color: white;
}

.nav a:before {
    display: none;
}

.nav .links li {
    text-align: left;
    margin: 0em 0.5em 0em 0.5em;
    padding: 0.5em 0em 0.5em 0em;
    border-bottom: 1px solid #dddddd;
    position: relative;
}

.nav .links li.close {
    text-align: right;
    border-bottom: none;
}

.nav .links li.last {
    border-bottom: none;
}

.nav .links li:after {
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    display: block;
    background: #ffffff;
    content: " ";
    opacity: 0;

    -webkit-transition: opacity 0.5s;
    /* Safari */
    transition: opacity 0.5s;
}

.nav .links li.selected:after {
    opacity: 1;
}

label.click {
    cursor: pointer;
}

#toggle-menu {
    display: none;
}

.popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -50px;
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #fefefe;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px;
}

/* ie must die */
.ie-8 .learning .skill,
.ie-8 .works .work,
.ie-8 .contact .contact-method {
    width: 33%;
}

.ie-8 .contact .contact-method {
    border-top: none;
}

.ie-8 .from {
    padding-bottom: 2em;
}

.ie-8 .from .pane {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

.ie-8 .from .map {
    overflow: hidden;

    -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
}

.ie-8 .from .text {
    height: 400px;
    box-sizing: border-box;
    padding: 1em;
}

.ie-8 #toggle-menu.checked~.overlay {
    display: block;
}

.nav .links li:after {
    display: none\9;
}

.ie-9 .nav .links li:after {
    display: block;
}

@media screen and (min-width: 600px) {

    .learning .skill,
    .works .work,
    .contact .contact-method {
        width: 33%;
    }

    .contact .contact-method {
        border-top: none;
    }

    .from {
        padding-bottom: 2em;
    }

    .from .pane {
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }

    .from .map {
        overflow: hidden;

        -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
        box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    }

    .from .text {
        height: 400px;
        box-sizing: border-box;
        padding: 1em;
    }
}

@media screen and (min-width: 1000px) {

    .learning .skill,
    .works .work,
    .contact .contact-method {
        width: 330px;
    }

    .from .pane {
        width: 450px;
    }
}