body {
    font-family: 'Segoe UI', 'Microsoft YaHei', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px !important;
    color: #808080 !important;
    background: #ffffff !important;
    margin: 0px;
    padding: 0px;
    line-height: 32px !important;
    perspective-origin: 50%;
}

header {
    width: 100%;
    height: 64px;
    position: fixed;
    top: 0px;
}

    header nav {
        display: block;
        line-height: 32px !important;
        background: rgba(6, 31, 183, 0.64);
    }

.comm-menu {
    margin: 0px;
    padding: 5px;
    display: block;
}

.comm-menu-item {
    width: 64px;
    height: 64px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    margin-left: 15px;
    background-size: auto 64px;
    background-size: contain;
}

.co-mn-home {
    background-image: url("../images/circuit.svg");
    background-position: center center;
    background-repeat: no-repeat;
}

.co-mn-login {
    background-image: url("../images/login.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 72% 72%;
    float: right;
    margin-right: 10px;
}

.co-mn-mcs51 {
    background-image: url("../images/microchip.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 72% 72%;
}

.co-mn-raspberrypi {
    background-image: url("../images/raspberry-pi.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 64% 72%;
}

.co-mn-arduino {
    background-image: url("../images/arduino.svg");
    background-position: center center;
    background-repeat: no-repeat;
}

.comm-menu-item span {
    width: 64px;
    height: 64px;
    display: inline-block;
}

.item-wrapper {
    width: auto;
    height: auto;
    max-width: 1366px;
    margin: 0 auto;
    background-color: rgba(32, 64, 128, 0.72);
    background-image: url("../images/circuit.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 45%;
    background-attachment: fixed;
}

#items {
    width: auto;
    height: auto;
    clear: both;
    max-width: 1366px;
    min-height: 1024px;
    overflow: hidden;
    margin: 0px auto;
    /*column-count: 2;
    column-gap: 2.5em;
    column-fill: balance;
    column-rule: solid 0px #ff0000;*/
    background-color: rgba(32, 64, 128, 0.32);
    margin-top: 86px !important;
    padding-top: 32px;
    line-height: 48px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    #items * {
        font-size: 20px !important;
    }

div#items article {
    width: 661px;
    height: auto;
    min-height: 100px;
    overflow: hidden;
    text-align: left;
    vertical-align: top;
    margin-left: 1px !important;
    margin-right: 1px !important;
    margin-bottom: 25px !important;
    padding: 5px;
    background: rgba(255, 255, 255, 0.64);
    border-radius: 3px;
}

@media(max-width: 1366px) {
    div#items article {
        width: 576px;
        height: auto;
        transition: width linear 0.25s;
    }
}

@media(max-width: 1166px) {
    div#items article {
        width: 480px;
        height: auto;
        transition: width linear 0.25s;
    }
}

@media(max-width: 970px) {
    #items {
        display: block;
        transition: width linear 0.25s;
    }

    div#items article {
        width: 100%;
        margin-left: 1px !important;
        margin-right: 1px !important;
        transition: width linear 0.25s;
    }
}

@media(max-width: 430px) {
    .comm-menu-item {
        width: 48px !important;
        height: 48px !important;
        display: inline-block;
        overflow: hidden;
        text-align: center;
        margin-left: 5px;
        background-size: auto 48px;
        background-size: contain;
    }
}

div#items section {
}

div#items i {
    margin-right: 5px;
    font-size: 25px !important;
    color: #ff0000 !important;
    font-family: fantasy;
    margin-right: 10px;
}

div#items a {
    color: #030040 !important;
}

div#items h6, div#items .h6 {
    width: auto;
    margin-top: 5px !important;
    font-weight: bold;
}

div#items p {
    font-size: 15px !important;
    line-height: 30px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    color: #ff6a00;
    font-style: italic;
}

.h6-left {
    padding-left: 5px !important;
}

.h6-right {
    /*width: 480px !important;*/
    margin-left: 5px;
}

.p-left {
    padding-left: 5px !important;
}

.p-right {
    /*width: 480px !important;*/
    margin-left: 5px !important;
}

#pages {
    max-width: 1024px;
    overflow: hidden;
    margin: 0px auto;
    text-align: center;
}

#details {
    margin-top: 128px;
    clear: both;
}

    #details article {
        text-align: left;
    }

        #details article > section {
            text-align: center;
        }

            #details article > section h2 {
                font-weight: bold;
                font-family: fantasy;
                color: #000000;
            }

        #details article > figure {
            width: auto;
            min-height: 480px;
            max-width: 1080px;
            overflow: hidden;
            margin: 0px auto;
            column-count: 2;
            column-gap: 2.5em;
            column-fill: balance;
            column-rule: solid 0px #ff0000;
            background: url("../images/p10.png") left top no-repeat;
            background-size: 25px;
        }

        #details article p:nth-child(1) {
            text-indent: 2em;
        }

        #details article > figure p:first-child:first-letter {
            padding-bottom: 32px;
        }

        #details article > figure img {
            border-radius: 5px !important;
            max-width: 512px !important;
        }

@media(max-width: 980px) {
    #details article > figure {
        width: auto;
        min-height: 480px;
        max-width: 1080px;
        overflow: hidden;
        margin: 0px auto;
        column-count: 1;
        column-gap: 2.5em;
        column-fill: balance;
        column-rule: solid 0px #ff0000;
        background-size: 25px;
        transition: width linear 0.25s;
    }

        #details article > figure > table {
            width: 100% !important;
            transition: width linear 0.25s;
        }
}

footer {
    width: 100%;
    height: 270px;
    text-align: center;
    overflow: hidden;
    background: url("../images/wave.png") center bottom repeat-x;
    background-color: rgba(6, 31, 183, 0.64);
    background-size: 24%;
    position: relative;
    bottom: 0px;
}

/* HIGHTLIGHT */
pre {
    width: 512px;
    height: auto;
    display: inline-block;
    white-space: pre-wrap;
    border: 0px !important;
    border-radius: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    background: url("../images/tqfp-top.png") center top no-repeat, url("../images/tqfp-bottom.png") center bottom no-repeat !important;
}

code {
    background: url("../images/tqfp-middle.png") left top repeat-y !important;
}

    code.hljs {
        margin-top: 72px !important;
        margin-bottom: 17px !important;
        background-color: transparent !important;
        padding: 2.5em;
        padding-top: 0.5em !important;
    }
/* END HIGHTLIGHT */

m !important;
        }
    /* END HIGHTLIGHT */