/*hightlight.js vs*/
.hljs{display:block;overflow-x:auto;padding:0.5em;background:white;color:black}.hljs-comment,.hljs-quote,.hljs-variable{color:#008000}.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-name,.hljs-tag{color:#00f}.hljs-string,.hljs-title,.hljs-section,.hljs-attribute,.hljs-literal,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-addition{color:#a31515}.hljs-deletion,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-meta{color:#2b91af}.hljs-doctag{color:#808080}.hljs-attr{color:#f00}.hljs-symbol,.hljs-bullet,.hljs-link{color:#00b0e8}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}

html, body{
    margin: 0;
    padding: 0;
    font-family: 'Verdana','Hiragino Sans GB','Microsoft Yahei',sans-serif;
    overflow-y: auto;
    overflow-x: hidden;
}

.header{

    height: 64px;

    background-color: rgb(51, 51, 51);

    .menu{
        width: 1280px;
        height: 64px;
        margin: auto;

        .item{
            display: inline-block; 
            margin-right: 20px;
            height: 64px;
            line-height: 64px;
            
            color: rgb(255, 255, 255);
            vertical-align: middle;

            .logo{
                margin-top: -13px;
                height: 90px;
            }

            .logo-small{
                margin-top: 7px; 
                height: 50px;
            }

            .link{
                text-decoration: none;
                &:link{
                    color: #fff;
                }
                &:active{
                    color: #fff;
                }
                &:visited{
                    color: #fff;
                }
            }


        }

        .item-right{
            height: 64px;
            float:right;
            .link{                
                .logo{
                    height: 64px;
                }
            }

        }

        .language{
            .link{
                background-color: #3498db;
                padding: 8px 16px;
                border-radius: 20px;
            }
        }
    }
}

.footer{
    clear: both;
    height: 170px;
    background-color: rgb(51, 51, 51);

    .content{
        width: 1280px;
        margin: auto;

        .open-source-icon{
            padding-top: 40px;
            padding-bottom: 40px;
            display: block;
        }
        .license{
            color: rgba(255,255,255,0.7);
        }
        .copyright{
            color: rgba(255,255,255,0.7);
            float: right;
            margin-top: -18px;
        }
    }
}


.g3d{


    .banner{

        height: 700px;

        position: relative;

        .bg{
            position: absolute;
            z-index: -2;
            background-color: #000; 
            height: 700px;
            width: 100%;
        }

        .mask{
            position: absolute;
            z-index: 10;
            height: 100%;
            width: 100%;
            top: 0;
        }

        .content{

            color: #fff;

            text-shadow: 0px 0px 3px #000000;

            .title{
                text-align: center;
                font-size: 60px;
                font-weight: bolder;
                padding-top: 270px;
            }

            .description{
                text-align: center;
                font-size: 30px;
                font-weight: lighter;
                padding-top: 10px;
            }

            .github{
                display: none;
            }

            .github-buttons{
                text-align: center;
                margin-top: 20px;
                a{
                    display: none;
                }
                iframe{
                    margin: 0 10px;
                }
            }
        }
    }

    .intro{
        .content{
            width: 1280px;
            margin: auto;

            .logo{
                img{
                    display: block;
                    width: 200px;
                    margin: auto;
                }
            }

            .title{
                font-size: 30px;
                text-align: center;
            }

            .description{
                font-size: 18px;
                color: #777;
                padding: 20px 140px;
            }

            .blueprint{
                height: 850px;
                margin-top: 80px;
                .title{
                    margin-bottom: 30px;
                }
            }
        }
    }

    .archi{
        height: 600px;
        background: linear-gradient(to bottom, rgb(10,97,252), rgb(3,189,252));
    }

    .usage{
        height: 600px;
        background: #fff;
    }
}

.doc{
    padding-top: 20px;
    padding-bottom: 100px;
    line-height: 20px;
    .content{
        width: 1200px;
        margin: auto;
        padding: 20px 80px;

        .index{
            float: left;
            width: 300px;
            padding-bottom: 50px;

            overflow: hidden;

            ol{
                list-style: none;
                -webkit-margin-start: -20px;

                .item-title{
                    padding: 5px 0 5px 0px;
                    margin-right: 30px;
                    &::before{
                        content: '▶ ';
                        font-size: 8px;
                    }
                }

                li{
                    padding: 5px 0;
                    font-size: 16px;
                    a{
                        text-decoration: none;
                        margin-left: 15px; 
                        display: block;
    
                        &:link{
                            color: #555;
                        }
                        &:active{
                            color: #555;
                        }
                        &:visited{
                            color: #555;
                        }
                    }
                }
            }
        }

        .body{
            margin-left: 300px;
        }
    }

    h2{
        margin-top: 40px;
    }
    h3{
        margin-top: 25px;
    }
    h4{
        color: #555555;
        &::before{
            content: '▸ ';
        }
    }

    pre{
        overflow-y: auto;
        padding: 10px;
        background-color: #eee;
        code{
            font-family: 'Consolas', 'Courier', sans-serif;
        }
    }

    code{
        padding: 5px 3px;
        background: #eee;
        font-family: 'FiraMono', 'Consolas', 'Courier', sans-serif;
    }


    table{
        border: 1px solid #aaa;
        border-collapse: collapse;

        width: 100%;

        color:#444;

        thead{
            tr{
                background: #eee;                
                th{
                    text-align: left;
                    border-right: 1px solid #ccc;
                    padding: 5px;
                    &:last-child{
                        border-right: none;
                    }
                }
            }
        }

        tbody{
            tr{
                &:nth-child(even){
                    background: #eee;
                }      
                td{
                    border-top: 1px solid #ccc;
                    border-right: 1px solid #ccc;                    
                    padding: 5px;                    
                    &:last-child{
                        border-right: none;
                    }       
                }
            }
        }
    }

    img{
        max-width: 900px;
    }
}

iframe.playground{
    display: block;
    width: 900px;
    height: 700px;
    margin: 20px auto;
    border: 1px solid #aaa;
    box-shadow: #ccc 2px 0px 4px;
}

@media only screen and (max-device-width: 640px){

    html, body{
        font-size: 30px;
    }

    .header{
        display: none;
    }

    .g3d{
        .banner{
            height: 100vh;
            .bg{
                z-index: -2;
                background-color: #000; 
                height: 100vh;
                width: 100%;
            }

            .content{
                .title{
                    padding-top: 65vh;
                    font-size: 3rem;
                }

                .description{
                    padding-top: 1vh; 
                    font-size: 1.5rem;
                }

                .github{
                    display: block;
                    background: #ff7979;
                    margin-left: 37vw;
                    margin-top: 10vw;
                    width: 25vw;
                    height: 10vw;
                    line-height: 10vw;
                    font-size: 1.5rem;
                    border-radius: 5vh;
                    text-align: center;
                    a{
                        text-decoration: none;
                        color: #fff;
                        &:hover{
                            color:#fff;
                        }
                        &:link{
                            color: #fff;
                        }
                    }
                }

                .github-buttons{
                    display: none;
                }
            }

            canvas{
                transform: translate(-25vw, -20vh) scale(0.7);
                display: none;
            }
            
            .mask{
                display: none;
            }
        }

        .intro{
            .content{
                width: 100vw;
                height: 100vh;

                .logo{
                    img{
                        width: 50vw;
                    }
                }
    
                .title{
                    display: none;
                }
    
                .description{
                    font-size: 1.5rem;   
                    padding: 10vw 10vw;
                    line-height: 4.5vh;
                }
    
                .blueprint{
                    display: none;
                }
            }
        }

        .usage{
            display: none;
        }
    }

    .footer{
        height: 30vh;
        .content{
            width: 100vw;
            margin: auto;
    
            .open-source-icon{
                padding-left: 30vw;
                padding-top: 5vh;
                padding-bottom: 5vh;
                width: 40vw;
                display: block;
                img{
                    width: 40vw;
                }
            }
            .license{
                float: none;
                font-size: 1.5rem;
                text-align: center;
                height: 7vh;                
            }
            .copyright{
                float: none;
                font-size: 1.5rem;
                text-align: center;                
                height: 7vh;
            }
        }
    }
}

