#overlayBlog { 
    width: 100%;
    opacity: 0;
    height: 100%;
    z-index: 0;
    background: rgb(26, 26, 29, 0.995);
    position: fixed;
    overflow-y: scroll;
    transition: 0.5s;
}

    #to-top-blog {
        opacity: 0;
        position: fixed;
        bottom: 20px;
        right: -20vw;
        z-index: 10000;
        font-size: 26px;
        width: 50px;
        height: 50px;
        color: #e3e2f2;
        text-shadow: 3px 3px 0 #b20a3a;
        background-color: #c3073f;
        border: none;
        cursor: pointer;
        transition: all 0.7s;  
    }

    #to-top-blog:hover {
        background: #b20a3a;
    }

.blogContainer {
    display: grid;
    max-width: 1366px;
    height: 100%;
    margin: 0 auto;
    padding: 30px;
    align-content: start;
}

    #closeBlog {
        color: #f2f2ff;
        font-size: 36px;
        cursor: pointer;
        justify-self: end;
        transition: 0.3s;
    }

    #closeBlog:hover {
        color: #454559;
    }

    #overlayBlogContent {
        width: 100%;
        display: grid;
    }

        .blogContentHead {
            display: grid;
            margin: 20px 0;
        }
                .headTags a {
                    color: #454559;
                    font-size: 18px;
                    font-weight: 500;
                    margin-right: 10px;
                }
            
            .blogContentHead h1 {
                color: #f2f2ff;
                font-size: 48px;
                font-weight: bold;
                text-align: left;
                margin-bottom: 10px;
            }

            .headInfo a {
                background: #c3073f;
                border-radius: 10px;
                color: #f2f2ff;
                font-size: 24px;
                font-weight: 400;
                padding: 5px 15px;
                margin-right: 20px;
            }

        .thingsboardBody {
            display: grid;
            margin: 20px 0;
        }

            .thingsboardCover {
                margin: 20px 0;
            }

                .thingsboardCover p {
                    color: #f2f2ff;
                    font-size: 24px;
                }

                .thingsboardCover a {
                    color: #f2f2ff;
                }

                .thingsboardCover iframe {
                    width: 100%;
                    height: 700px;
                    border-radius: 20px;
                    
                    margin-top: 10px;
                    margin-bottom: 40px;
                }

                .thingsboardCover img {
                    content: url("../img/thingsboardrancang.png");
                    width: 100%;
                    border-radius: 20px;
                    
                    margin-top: 10px;
                }

            .thingsboardContent {
                margin: 20px 0;
                text-align: left;
            }

                .thingsboardContent p, .thingsboardContent li, .thingsboardContent br {
                    color: #f2f2ff;
                    font-size: 32px;
                }

                .tbContent1, .tbContent2, .tbContent3, .tbContent4, .tbContent5 {
                    margin: 40px 0;
                }

                .tbContent1 h3 {
                    font-size: 36px;
                    font-weight: bold;
                    color: #f2f2ff;
                    margin: 20px 0;
                }

                .tbContent1 h4, .tbContent2 h4, .tbContent3 h4, .tbContent4 h4, .tbContent5 h4 {
                    font-size: 32px;
                    font-weight: bold;
                    color: #f2f2ff;
                    margin: 20px 0;
                }

                .tbContent1 a {
                    color: #f2f2ff;
                }

                    .deviceTb {
                        display: flex;
                        flex-wrap: wrap;
                        margin: 40px 0;
                    }

                        .deviceTb1 {
                            content: url("../img/add-device1.png");
                            height: 657px;
                            border-radius: 20px;
                            
                            margin-right: 30px;
                            margin-bottom: 30px;
                        }

                        .deviceTb2 {
                            content: url("../img/device-token1.png");
                            height: 427px;
                            border-radius: 20px;
                            
                            margin-right: 30px;
                        }

                .tbContent2 p {
                    color: #f2f2ff;
                    font-size: 32px;
                    margin: 20px 0;
                }
                    
                .tbContent2 input {
                    color: #f2f2ff;
                    font-size: 32px;
                    background: rgba(227, 226, 242, 0.14);
                    padding: 10px 15px;
                    width: 60%;
                    margin: 20px 0;
                }

                .tbContent2 .tb2Img1 {
                    content: url("../img/prefrence1.png");
                    border-radius: 20px;
                    
                    margin: 30px 0;
                    width: 70%;
                }

                .tbContent2 .tb2Img2 {
                    content: url("../img/esp321.png");
                    border-radius: 20px;
                    
                    margin: 30px 0;
                    width: 70%;
                }

                .tbContent3 .tbLibrary {
                    display: flex;
                    width: 100%;
                    flex-wrap: wrap;
                }

                    .lib1 {
                        content: url("../img/thingsboard1.png");
                        margin-right: 20px;
                        margin-top: 20px;
                        border-radius: 20px;
                        
                    }

                    .lib2 {
                        content: url("../img/pubsub1.png");
                        margin-right: 20px;
                        margin-top: 20px;
                        border-radius: 20px;
                        
                    }

                    .lib3 {
                        content: url("../img/arduinohttpclient1.png");
                        margin-right: 20px;
                        margin-top: 20px;
                        border-radius: 20px;
                        
                    }

                    .lib4 {
                        content: url("../img/arduinojson1.png");
                        margin-right: 20px;
                        margin-top: 20px;
                        border-radius: 20px;
                        
                    }
                    

                .tbContent4 .textCode {
                    font-size: 32px;
                    color: #f2f2ff;
                    background: rgba(227, 226, 242, 0.14);
                    padding: 10px 15px;
                    margin: 20px 0;
                    width: 100%;
                    height: 400px;
                    overflow-y: scroll;
                    font-family: 'Roboto Mono', monospace;
                }
        
                .tbContent5 .displayTb {
                    display: flex;
                    flex-wrap: wrap;
                    margin: 40px 0;
                }

                    .displayTb1 {
                        content: url("../img/telemetry1.png");
                        margin-right: 20px;
                        margin-bottom: 20px;
                        border-radius: 20px;
                                                
                    }

                    .displayTb2 {
                        content: url("../img/dashboard1.png");
                        margin-right: 20px;
                        margin-bottom: 20px;
                        border-radius: 20px;
                        
                    }

        .heightBody {
            display: grid;
            margin: 20px 0;
        }

            .heightBody p{
                color: #f2f2ff;
                font-size: 32px;
            }

            .heightBody a {
                color: #f2f2ff;
                font-size: 32px;
            }

            .wpBlog p, .wpBlog a {
                font-size: 24px;
            }

            .heightBody .demoHeight {
                content: url("../img/img_30592.png");
                width: 100%;
                margin-top: 20px;
                margin-bottom: 40px;
                border-radius: 20px;
                
            }

            .heightBody .smHeight {
                width: 100%;
                content: url("../img/img_92421.png");
                margin: 40px 0;
                border-radius: 20px;
                                
            }

            .heightBody .dwnHeight {
                margin: 40px 0;
            }

        .votingBody {
            display: grid;
            margin: 20px 0;
        }

            .votingBody p, .votingBody a, .votingBody b, .votingBody li {
                color: #f2f2ff;
            }

            .votingBody .textVoting p, .textVoting b, .textVoting a{
                font-size: 32px;
                margin: 20px 0;
            }

            .votingBody img {
                margin: 20px 0;
                border-radius: 20px;
            }

            .votingBody .votingServer {
                content: url("../img/interface-server.png");
            }

            .votingBody .votingClient {
                content: url("../img/interface-client.png");
            }
            
            .votingBody .votingScheme {
                content: url("../img/skema-voting.png");
            }            

            .listVoting {
                color: #f2f2ff;
                font-size: 32px;
                margin: 20px 0;
            }

        .trashBody {
            display: grid;
            margin: 20px 0;
        }

            .trashBody p, .trashBody a {
                color: #f2f2ff;
            }

            .trashBody .textTrash p {
                font-size: 32px;
                margin: 20px 0;
            }

            .trashBody iframe {
                width: 100%;
                height: 700px;
                border-radius: 20px;
                margin: 20px 0;
            }

            .trashBody img {
                content: url("../img/trashIMG.png");
                width: 100%;
                border-radius: 20px;
                margin: 20px 0;
            }

            .trashBody .textCode {
                font-size: 32px;
                color: #f2f2ff;
                background: rgba(227, 226, 242, 0.14);
                padding: 10px 15px;
                margin: 20px 0;
                width: 100%;
                height: 400px;
                overflow-y: scroll;
                font-family: 'Roboto Mono', monospace;
            }

        .englishBody {
            display: grid;
            margin: 20px 0;
        }

            .englishBody p, .englishBody a {
                color: #f2f2ff;
            }

            .englishBody img {
                margin: 20px 0;
                border-radius: 20px;
            }

            .englishBody .english1 {
                content: url("../img/englishc1.png");
                width: 100%;
            }

            .englishBody .english2 {
                content: url("../img/englishc2.png");
                width: 100%;
            }
            
            .englishBody .english3 {
                content: url("../img/englishc3.png");
                width: 100%;
            }
            
            .englishBody .english4 {
                content: url("../img/englishc4.png");
                width: 100%;
            }
            
            .englishBody .english5 {
                content: url("../img/englishc5.png");
                width: 100%;
            }
            
            .textEnglish {
                margin: 20px 0;
            }

            .textEnglish p {
                font-size: 32px;
            }

            .dwnEnglish {
                margin: 20px 0;
            }

            .dwnEnglish a {
                font-size: 32px;
            }

.blogContent {
height:100%;
width: 100%;
display: grid;
z-index: 1;
order: 2;
overflow: hidden;
align-content: space-between;
}

    .blogHead {
        display: grid;
        width: 100%;
        padding: 20px 0px;
        align-content: center;
        justify-content: center;
    }

        .blogHead h1 {
            justify-self: center;
            font-size: 48px;
            color: #1a1a1d;
            font-weight: bold;
            text-shadow: 3px 3px 0 #d6d5e2;
        }

        .blogHead h3 {
            justify-self: center;
            color: #1a1a1d;
            font-size: 24px;
            width: 100%;
            font-weight: lighter;
        }

    .blogBody {
        padding: 20px 0px;
        display: grid;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }

        .blogBodyContent {
            width: 92%;
            height: 454px;
            margin: 30px auto;
            display: grid;
            background: #e3e2f2;
            box-shadow: 6px 6px 0 #d6d5e2;
            border-radius: 20px;
            padding: 30px;
            align-content: space-between;
            transition: all 0.4s;
        }

        .blogBodyContent:hover {
            transform: translateY(2%);
        }

        .blogBodyContent.thingsBoard {
            background-image: url("../img/thingsboard.png");
            background-size: cover;
        }

        .blogBodyContent.heightPro {
            background-image: url("../img/height.png");
            background-size: cover;
        }

        .blogBodyContent.votingServer {
            background-image: url("../img/voting.png");
            background-size: cover;
        }

        .blogBodyContent.smartTrash {
            background-image: url("../img/trash.png");
            background-size: cover;
        }

        .blogBodyContent.englishLearn {
            background-image: url("../img/english.png");
            background-size: cover;
        }

            .blogBodyContent h2 {
                font-size: 36px;
                font-weight: bold;
                color: #f2f2ff;
            }

            .blogBodyContent h3 {
                font-size: 24px;
                font-weight: normal;
                color: #f2f2ff;
                justify-self: end;
            }

            .blogBodyContent h4 {
                font-size: 24px;
                font-weight: normal;
                color: #f2f2ff;            
            }

            .blogBodyContent .blogRead {
                font-size: 16px;
                font-weight: normal;
                text-decoration: none;
                cursor: pointer;
                background: #c3073f;
                color: #f2f2ff;
                width: 149px;
                height: 38px;
                justify-self: center;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 10px auto;
                transition: all 0.4s;
            }

                .blogRead:hover {
                    background: #b20a3a;
                }

            .blogBodyContent ul {
                justify-self: start;
            }

            .blogBodyContent ul a {
                font-size: 16px;
                font-weight: normal;
                color: #f2f2ff;
                text-decoration: none;
                padding: 1px 6px;
                cursor: default;
                background: rgb(242, 242, 255, 0.2);
                border-radius: 5px;
            }