*{
    box-sizing: border-box;
}
  

body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 24px; 
    background: #f4f4f2;
}


h1, h2, h3, h4{
    font-weight: bold;
}

.header{
    background: #000;
    color: #fff;
}



.header > .inner{
    padding: 10px 10px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
}

.site-name a{
    font-size: 30px;
    font-weight: 700;
}

.topad{
    margin: 0 auto;
}


.article{
    background: #fff;
    
}


.article .inner{
    
    
}
.article .inner > *{
    margin: 20px 0;
}










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

    .hbtn div{
        width: 35px;
        height: 5px;
        background: #fff;
        margin: 6px 0;
        transition: 0.4s;
    }

    .main-nav > .inner{
        display: none;
    }
      
    .main-nav > .inner.mobile{
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 10;
        background:rgb(0, 0, 0, 0.5);
        top: 0;
        left:0;
    }
      
    .main-nav > .inner.mobile ul{
        background: #000;
        height: 100%;
        width: 70%;
        padding: 10px;
    }
      
    .main-nav > .inner.mobile ul li{
        padding: 20px;
        border-bottom: 1px solid #fff;
    }
        
    .main-nav > .inner.mobile ul li a{
        display:block;
        font-size: 1.2em;
        color: #fff;
        
    }

    .article .inner{
        padding: 0 10px;
        max-width: 720px;
        margin: 0 auto;  
    }
  
    @media only screen and (max-width: 539px) {
       
        .topad .inner{
            min-height: 360px;
        }

    }
  
    @media only screen and (min-width: 540px) {
        
        .topad .inner{
            min-height: 280px;
            max-width: 1200px;
        }
    }
}


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

    .topad{
        min-height: 300px;
        width: 1200px;
        max-width: 1200px; 
    }

    .content > .inner{
        display: grid;
        grid-template-columns: 1fr 900px 1fr;
        grid-template-rows: auto auto;
        gap: 40px;
    }

    .left{
        grid-column: 1 / 2;
        grid-row: 1 / -1;
    }

    .article{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        padding: 20px 100px;
        margin-top: 20px;
    }

    .bottom{
        grid-column: 2 / 3;
        grid-row: 2 / -1;
    }

    .right{
        grid-column: 3 / -1;
        grid-row: 1 / -1;
    }

    .inner-width{
        max-width: 1900px;
        margin: 0 auto;
    }


    .hbtn{
        display: none;
    }
    
    .main-nav{
        background: #000;
        color: #fff;
    }
    
    .main-nav .inner{
        display: block;
        padding: 10px 10px;
    }
    
    .main-nav ul{
        display: flex;
        justify-content: space-between;
    }

    .widget.ad{
        min-width: 300px;
        max-width: 300px;
        min-height: 600px;
    }
}

.article h1{
    font-size: 1.7em;
}

.article h2{
    font-size: 1.5em;
}

.article h3{
    font-size: 1.3em;
}

.article h4{
    font-size: 1.1em;
}

.article p{
    line-height: 1.5;
}


/* .article img{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain !important;
} */

.article img{
    display: block;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    object-fit: contain !important;
}

.ar-wide-1{
    aspect-ratio: 1382 / 294;
}

figcaption{
    text-align: center;
    font-size: 0.8em;
}
  
.wp-block-image{
    cursor: pointer;
}

.wp-block-image.max{
    background: rgb(45, 45, 45, 0.9);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: -20px;
    left:0;
    z-index: 10;
    
}
  
.wp-block-image.max img{
    height: auto;
    width: auto;
    max-width: 90%;
    max-height: 90%;
}
.wp-block-image.max figcaption{
    color:#fff;
}

.wp-block-code, .cli, .sm_command{
    overflow: auto;
    padding: .05em 1em;
    background: #fff;
    font-family: Consolas,monospace;
    line-height: 1.5;
    text-shadow: 0 1px #ccc;
    font-size: 0.9em;
    border-left: 10px solid #034a65;
    box-shadow: 0 1px 5px #979797;
}
  
.wp-block-code.error{
    overflow-wrap: break-word;
    white-space: pre-wrap;
    border: 3px solid #B82930;
    background: #fff;
    color: #B82930;
    text-shadow: none;
}
  
p code, li code{
    padding: 2px 5px;
    border-radius: 2px;
    color: #23282d;
    background: #d4d5d5;
    font-family: Menlo,Consolas,monaco,monospace;
    font-size: 0.9em;
    border-radius: 2px;
}

p.note, .wp-block-group.note{
    padding: 20px;
    background: #a0a0a0;
}
.wp-block-group div.note > *{
    margin: 20px 0;
  
}

p.note a, .wp-block-group.note a{
    color: #024093;
}

.wp-block-group.list{
    border: 2px solid #000;
    position: relative;
    padding: 25px 20px 20px 10px;
    border-radius: 5px;
}

.wp-block-group.list h2, .wp-block-group.list h3{
    position: absolute;
    top: -20px;
    left: 15px;
    font-size: 25px;
    background: #fff;
    padding: 0 10px;
}

.wp-block-group.list ul{
    padding-left: 40px;
}
  
p.error{
    padding: 20px;
    border: 3px solid #B82930;
    color: #B82930;
}
  
.article ul, .article ol{
    padding-left: 50px; 
}
.article ul li{
    list-style-type: square;
    margin: 10px 0;
}
  
.article ol li{
    list-style-type: decimal;
    margin: 10px 0;
}
.article ol li > *{
    margin: 10px 0;
}
  
.article a{
    color: #0382b7;
    border-bottom: 2px solid #0382b7;
}
  
.steps{
    border-top: 2px solid #000;
    padding-top: 20px;
}
.steps::before{
    counter-increment: steps;
    content: counter(steps);
    padding: 4px 9px;
    background: #000;
    color: #fff;
    font-size:0.7em; 
    margin-right: 10px; 
}
  
.embed-youtube iframe{
    aspect-ratio: 16 / 9;
    width: 100%;
}
table { 
    border-collapse: collapse;
}
thead {
    border-collapse:separate; 
    border-bottom: 5px solid #000;
    font-weight: bold;
    
}
td, th {
    border: 2px solid;
    padding: .5em;
}
.has-fixed-layout td:first-child{
    white-space:nowrap;
    font-weight: bold;
}

.right .widget{
    margin: 10px 0;
}

.widget li a{
    background: #000;
    display: block;
    margin: 5px 0;
    padding: 10px 15px;
    color: #fff;
}


.no-scroll{
    overflow: hidden;
}