body, button, html, input, select, textarea {
    font-family: "Microsoft JhengHei";
}

pre code {
    font-size: 18px !important;
    margin-left: -80px;
}

.navbar-toggler {
    padding: 3px 8px 2px 8px;
}

.navbar-main {
    background-color: #333 !important;
}

.navbar-brand {
    color: #80d780 !important;
}

.navbar-toggler {
    border: solid 1px #eee !important;
    border-radius: 0px;
}

.navbar-toggler-icon {
    width: 28px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(250, 250, 250, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.jumbotron-main {
    padding-top: 80px;
    padding-bottom: 10px;
    background-color: #4c4c4c !important;
    border-radius: 0px;
}

.jumbotron-main * {
    color: #fff;
}

.home-header {
    margin-top: 30px;
    padding: 30px 0 20px;
    background-color: #4c4c4c;
    color: #fff;
    border-radius: 5px;
}

.home-header h2 {
    font-size: 36px;
}

.nav-item .nav-link {
    color: #eee !important;
}

.nav-item .nav-link:hover {
    color: #fff !important;
}

.nav-item.blank-item {
    color: transparent;
}

.nav-item .nav-link.nav-home {
    color: #ffdb87 !important;
}

.nav-item .nav-link.nav-home:hover {
    color: #ffce44 !important;
}

.nav-item .nav-link.ex-count {
    color: #a5d1e4 !important;
}

.nav-item .nav-link.ex-count:hover {
    color: #a5d1e4 !important;
}

.nav-item .dropdown-item {
    font-size: 18px;
}

.btn:hover {
    cursor: pointer;
}

.btn-info,
.btn-info:focus,
.btn-info:active {
    color: #fff;
    background-color: #2896ad;
    border-color: #2896ad;
}

.btn-info:hover {
    color: #fff;
    background-color: #2e7d8e;
    border-color: #2e7d8e;
}

.btn-udemy,
.btn-udemy:focus,
.btn-udemy:active {
    color: #fff;
    background-color: #7c0ec8;
    border-color: #7c0ec8;
}

.btn-udemy:hover {
    color: #fff;
    background-color: #7c0ec8;
    border-color: #7c0ec8;
}

.btn-copy {
    font-size: 14px;
    border-radius: 0;
}

.btn-block .btn {
    width: 100%;
}

ul.outline {
    list-style-type: square;
    font-size: 16px;
}

ul.lead {
    font-size: 18px;
}

ul.none {
    list-style-type: none;
    font-size: 16px;
    padding-left: 12px;
}

.section-area {
    margin: 0;
    padding: 10px 0 10px 0;
    border-bottom: solid 1px transparent;
}

.section-course {
    margin: 0;
    padding: 20px 0;
    border-bottom: solid 1px transparent;
}

.section-course .row {
    margin: 0;
    padding: 10px 0;
}

.section-area div,
.section-course div {
    text-align: center;
}

.section-resources h3 {
    margin: 60px 0 20px;
}

.section-chapter h2 {
    color: #007bff;
}

.section-chapter h3 {
    color: #28a745;
    margin-top: 40px;
}

.section-chapter h4 {
    color: #17a2b8;
}

.section-chapter h4.piece:hover {
    cursor: pointer;
}

.section-chapter h5 {
    font-size: 22px;
    color: #604f98;
}

.section-chapter.code-desc > div.desc,
.section-chapter.memo-desc > div.desc,
.section-chapter.code-desc > p,
.section-chapter.memo-desc > p,
.section-chapter .code-desc,
.section-chapter .memo-desc {
    font-family: Consolas, "Microsoft JhengHei";
    padding: 10px 10px 2px;
    font-size: 18px;
    margin-bottom: 20px;
}

.section-chapter.code-desc > p,
.section-chapter.memo-desc > p {
    padding: 10px;
}

.section-chapter.code-desc > p code,
.section-chapter.memo-desc > p code,
.section-chapter .code-desc code,
.section-chapter .memo-desc code {
    font-size: 18px;
}

.section-chapter.code-desc > div.desc,
.section-chapter.code-desc > p,
.section-chapter .code-desc {
    background-color: #eee;
    border-left: 8px solid #666;
}

.section-chapter.memo-desc > div.desc,
.section-chapter.memo-desc > p,
.section-chapter .memo-desc {
    background-color: #ffe3e1;
    border-left: 8px solid #ce2516;
}

.section-chapter .list-group-item,
.section-resources .list-group-item {
    font-size: 18px;
}
.section-chapter .list-group-item,
.section-resources .list-group-item:hover {
    color: #007bff;
}

.section-divider {
    padding-top: 60px;
}

.area-divider {
    padding-top: 30px;
}

.quick-link {
    padding: 30px 0;
}
.quick-link div {
    padding: 5px 20px;
}
.quick-link .btn {
    width: 100%;
    margin: 5px 0;
}

.hw-link {
    padding: 30px 0;
}
.hw-link div {
    padding: 5px 20px;
}

.extra-link {
    padding: 30px 0;
}
.extra-link div {
    padding: 5px 20px;
}

section h4 {
    padding-top: 30px;
}

img {
    max-width: 100%;
}

img.hasborder {
    border: solid 1px #666;
}

img.img-apcs {
    margin-bottom: 100px;
}

/*.page-section {
    padding: 20px 0 10px;
}*/

.page-section + h3 span {
    color: #fff;
    background-color: #007bff;
    padding: 10px 20px;
    border-radius: 3px;
}

.extra-links div {
    padding: 20px 10px;
}

.texti-pyone {
    color: #3e9a32;
}

.texti-vital {
    color: #cc4444;
}

.alert-pyone {
    padding-bottom: 5px;
}

.texti-code,
.texti-code * {
    font-family: Consolas, "Microsoft JhengHei";
}

.courses .card {
    margin: 30px 0px;
}

.courses .card p {
    font-family: Consolas, "Microsoft JhengHei";
    font-size: 24px;
}

.icon-block  {
    color: #fff;
}

.icon-block i {
    opacity: 0.9;
}

.bg-udemy {
    background-color: #7c0ec8;
}

.bg-pybasic {
    background-color: #3aaa2b;
}

.bg-ccbasic {
    background-color: #9c004c;
}

.bg-links {
    background-color: #333;
}

.bg-apcs {
    background-color: #1a68a7;
}

.font-lg {
    font-size: 24px;
}

.footer-hr {
    margin-top: 60px;
}

@media screen and (max-device-width: 640px) {
    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 22px;
    }

    h4 {
        font-size: 20px;
    }

    pre code {
        font-size: 16px !important;
        margin-left: -90px;
    }

    .home-header h2 {
        font-size: 32px;
    }

    .bg-inverse {
        opacity: 0.95;
    }

    .nav-item .nav-link {
        padding: 5px 0px;
        font-size: 24px;
    }

    .nav-item .dropdown-item {
        padding: 5px 20px;
        font-size: 22px;
    }

    .nav-item:first-child {
        margin-top: 20px;
    }

    ul.navbar-nav {
        padding-bottom: 40px;
    }
}