@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&display=swap');

/*html {
    overflow-y: scroll;
}*/

body {
    font-family: 'Kanit', sans-serif;
    margin-top: 0;
    min-width: 800px;
    /*min-width: 800px;
    height: 600px;*/
    position: absolute;
    
}

 .big-image .home1-image {  
    background: url('images/blog_world_1.png') no-repeat;
    display: block;
    margin:  0, auto;
    min-width: 100%; 
    
 }
       
 h0 {
    display: block;
    text-align: center;
    margin-top: -200px;
    font-size: 48px;
    font-weight: bold;
    color: #140101;
}

 #links {
     color: blue;
 }

 .content0{
    display: block;
     margin-top: 200px;
     overflow: hidden;
     width: 100%;    
 }
 
 .content0 .image0{
     display: inline;
     /*margin-top: -20%;*/
     width: 45%;
     height: auto; 
     float: left;         
     margin-left: 3%;   
     overflow: hidden; 
  }
 
 .content0 .content-text0{
     display: inline;
     width: 30%;
     float: right;
     font-size: 36px;
     font-weight: bold;
     overflow: hidden;
     margin-right: 15%;
     color: #550000;    
 }
           
     .content1 {
           display: block;
            margin-top: 30px;
            overflow: hidden;
            width: 100%;    
        }
        
        .content1 .image1 {
            display: inline;
            margin-top: -100px;
            width: 40%;
            height: 40%; 
            float: right;      
            margin-right: 5%;   
            overflow: hidden; 
         }
        
        .content1 .content-text1{
            display: inline;
            width: 30%;
            float: left;
            font-size: 36px;
            font-weight: bold;
            overflow: hidden;
            margin-left: 7%;
            color: #550000;    
        }
        
        .content2 {
            display: block;
             margin-top: 30px;
             overflow: hidden;
             width: 100%; 
         }
         
         .content2 .image2 {
            display: inline;
            margin-top: 200px;
            width: 30%;
            float: left;
            /*height: auto;*/
            /*height: 320px;*/
           /* float: left; */
            margin-left: 3%;
            overflow: hidden;
            
        }

        .content2 .content-text2{
            display: inline;
            /*margin-top: 100px;*/
            width: 50%;
            float: right;
            /*font-size: 36px;
            font-weight: bold;*/
            overflow: hidden;
            margin-right: 5%;
            color: #550000;    
        }  

        .content2 .content-text2 h1{
            /*display: inline;
            margin-top: 100px;
            width: 40%;
            float: right;*/
            font-size: 36px;
            font-weight: bold;
            overflow: hidden;
            /*margin-right: 5%;*/
            color: #550000;    
        }  

        .content2 .content-text2 h2{
            /*display: inline;
            margin-top: 30px;
            width: 40%;
            float: right;
            margin-right: 5%;*/
            font-size: 28px;
            font-weight: bold;
            overflow: hidden;
            color: #550000;    
        }  

        .content2 .content-text2 h3{
            /*display: inline;
            margin-top: 30px;
            width: 40%;
            float: right;
            margin-right: 5%;*/
            font-size: 28px;
            font-weight: bold;
            overflow: hidden;
            color: #550000;    
        }  

        .content2 .content-text2 h4{
            /*display: inline;
            margin-top: 20px;
            width: 40%;
            float: right;
            margin-right: 5%;*/
            font-size: 28px;
            font-weight: bold;
            overflow: hidden;
            color: #550000;    
        }  

        .content2 .content-text2 h5{
            /*display: inline;
            margin-top: 20px;
            width: 40%;
            float: right;
            margin-right: 5%;*/
            font-size: 28px;
            font-weight: bold;
            overflow: hidden;
            color: #550000;    
        }  
         
         

@media only screen and (min-width: 900px) and (max-width: 1199px){

            body {
                margin-top: 0;
                min-width: 100%;
                position: absolute;
                max-height: auto;
                
            }

            
            .big-image .home1-image {
        background: url('images/blog_world_1.png') no-repeat;
        display: block;
        margin:  0, auto;
        min-width: 100%; 
        
     }
           
     h0 {
        display: block;
        text-align: center;
        margin-top: -250px;
        font-size: 56px;
        font-weight: bold;
        color: #550000;
    }
    
     #links {
         color: blue;
     }
     
               
     .content0{
        display: block;
         margin-top: 200px;
         overflow: hidden;
         width: 100%;    
     }
     
     .content0 .image0{
         display: inline;
         /*margin-top: -20%;*/
         width: 40%;
         height: auto; 
         float: left;         
         margin-left: 3%;   
         overflow: hidden; 
      }
     
     .content0 .content-text0{
         display: inline;
         width: 30%;
         float: right;
         font-size: 36px;
         font-weight: bold;
         overflow: hidden;
         margin-right: 7%;
         color: #550000;    
     }
               
         .content1 {
               display: block;
                margin-top: 30px;
                overflow: hidden;
                width: 100%;    
            }
            
            .content1 .image1 {
                display: inline;
                margin-top: -100px;
                width: 40%;
                height: 40%; 
                float: right;      
                margin-right: 5%;   
                overflow: hidden; 
             }
            
            .content1 .content-text1{
                display: inline;
                width: 30%;
                float: left;
                font-size: 36px;
                font-weight: bold;
                overflow: hidden;
                margin-left: 10%;
                color: #550000;    
            }
            .content2 {
                display: block;
                 margin-top: 30px;
                 overflow: hidden;
                 /*width: 100%; */
             }
             
             .content2 .image2 {
                display: inline;
                /*margin-top: -500%;*/
                width: 40%;
                float: left;
                /*height: auto;*/
                /*height: 320px;*/
               /* float: left; */
                margin-left: 3%;
                overflow: hidden;
                
            }
    
            .content2 .content-text2{
                display: inline;
                /*margin-top: 100px;*/
                width: 40%;
                float: right;
                /*font-size: 36px;
                font-weight: bold;*/
                overflow: hidden;
                margin-right: 5%;
                color: #550000;    
            }  
    
            .content2 .content-text2 h1{
                /*display: inline;
                margin-top: 100px;
                width: 40%;
                float: right;*/
                font-size: 36px;
                font-weight: bold;
                overflow: hidden;
                /*margin-right: 5%;*/
                color: #550000;    
            }  
    
            .content2 .content-text2 h2{
                /*display: inline;
                margin-top: 30px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
    
            .content2 .content-text2 h3{
                /*display: inline;
                margin-top: 30px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
    
            .content2 .content-text2 h4{
                /*display: inline;
                margin-top: 20px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
    
            .content2 .content-text2 h5{
                /*display: inline;
                margin-top: 20px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
    }
           

    @media only screen and (min-width: 1200px) and (max-height: 899px) {

            body {
                margin-top: 0;
                width: 100%;
                position: absolute;
                height:  100%;
            }


    .big-image .home1-image {
        background: url('images/blog_world_1.png') no-repeat;
        display: block;
        margin:  0, auto;
        min-width: 100%; 
        
     }
           
     h0 {
        display: block;
        text-align: center;
        margin-top: -200px;
        font-size: 56px;
        font-weight: bold;
        color: #550000;
    }
    
     #links {
         color: blue;
     }
     
               
         .content1 {
               display: block;
                margin-top: 250px;
                width: 100%;
            }
            
            .content1 .image1 {
               display: inline-block;
               margin-top: -130px;
               width: 40%;
               height: auto;
               margin-left: 700px;                 
            }
            
            .content1 .content-text1{
                display: inline;
                /*margin-top: -150px;
                margin-inline-start: 300px;*/
                width: 30%;
                float: left;
                font-size: 36px;
                font-weight: bold;
                overflow: hidden;
                margin-left: 7%;
                color: #550000;
        
            }

            .content2 {
                display: block;
                 margin-top: 30px;
                 overflow: hidden;
                 /*width: 100%; */
             }
             
             .content2 .image2 {
                display: inline;
                /*margin-top: -500%;*/
                width: 40%;
                float: left;
                /*height: auto;*/
                /*height: 320px;*/
               /* float: left; */
                margin-left: 3%;
                overflow: hidden;
                
            }
    
            .content2 .content-text2{
                display: inline;
                /*margin-top: 100px;*/
                width: 40%;
                float: right;
                /*font-size: 36px;
                font-weight: bold;*/
                overflow: hidden;
                margin-right: 5%;
                color: #550000;    
            }  
    
            .content2 .content-text2 h1{
                /*display: inline;
                margin-top: 100px;
                width: 40%;
                float: right;*/
                font-size: 36px;
                font-weight: bold;
                overflow: hidden;
                /*margin-right: 5%;*/
                color: #550000;    
            }  
    
            .content2 .content-text2 h2{
                /*display: inline;
                margin-top: 30px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
    
            .content2 .content-text2 h3{
                /*display: inline;
                margin-top: 30px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
    
            .content2 .content-text2 h4{
                /*display: inline;
                margin-top: 20px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
    
            .content2 .content-text2 h5{
                /*display: inline;
                margin-top: 20px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
        
        }      

  @media only screen and (min-width: 1600px) and (min-height: 900px){


    
    body {
        margin: 0;
        /*width: 100%;*/
        position: absolute;
        /*margin: 20px auto;*/
        height:  100%;

      }

     
      /*.big-image .home1-image {
        min-width: 100%;
        height: auto;
    }*/

    .big-image .home1-image {
        background: url('images/blog_world_1.png') no-repeat;
        display: block;
        margin:  0, auto;
        min-width: 100%; 
        
     }
           
     h0 {
        display: block;
        text-align: center;
        margin-top: -350px !important;
        font-size: 56px;
        font-weight: bold;
        color: #550000;
    }
    
     #links {
         color: blue;
     }
     
               
     .content0{
        display: block;
         margin-top: 380px;
         overflow: hidden;
         width: 100%;    
     }
     
     .content0 .image0{
         display: inline;
         /*margin-top: -20%;*/
         width: 40%;
         height: auto; 
         float: left;         
         margin-left: 3%;   
         overflow: hidden; 
      }
     
     .content0 .content-text0{
         display: inline;
         width: 40%;
         float: right;
         font-size: 36px;
         font-weight: bold;
         overflow: hidden;
         margin-right: 10%;
         color: #550000;    
     }
               
         .content1 {
               display: block;
                margin-top: 30px;
                overflow: hidden;
                width: 100%;    
            }
            
            .content1 .image1 {
                display: inline;
                margin-top: -100px;
                width: 45%;
                height: 45%; 
                float: right;      
                margin-right: 5%;   
                overflow: hidden; 
             }
            
            .content1 .content-text1{
                display: inline;
                width: 30%;
                float: left;
                font-size: 36px;
                font-weight: bold;
                overflow: hidden;
                margin-left: 7%;
                color: #550000;    
            }
       
            .content2 {
                display: block;
                 margin-top: 30px;
                 overflow: hidden;
                 /*width: 100%; */
             }
             
             .content2 .image2 {
                display: inline;
                /*margin-top: -500%;*/
                width: 40%;
                float: left;
                /*height: auto;*/
                /*height: 320px;*/
               /* float: left; */
                margin-left: 3%;
                overflow: hidden;
                
            }
    
            .content2 .content-text2{
                display: inline;
                /*margin-top: 100px;*/
                width: 40%;
                float: right;
                /*font-size: 36px;
                font-weight: bold;*/
                overflow: hidden;
                margin-right: 5%;
                color: #550000;    
            }  
    
            .content2 .content-text2 h1{
                /*display: inline;
                margin-top: 100px;
                width: 40%;
                float: right;*/
                font-size: 36px;
                font-weight: bold;
                overflow: hidden;
                /*margin-right: 5%;*/
                color: #550000;    
            }  
    
            .content2 .content-text2 h2{
                /*display: inline;
                margin-top: 30px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
    
            .content2 .content-text2 h3{
                /*display: inline;
                margin-top: 30px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
    
            .content2 .content-text2 h4{
                /*display: inline;
                margin-top: 20px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  
    
            .content2 .content-text2 h5{
                /*display: inline;
                margin-top: 20px;
                width: 40%;
                float: right;
                margin-right: 5%;*/
                font-size: 28px;
                font-weight: bold;
                overflow: hidden;
                color: #550000;    
            }  


  }