@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body {
    font-family: lato, sans-serif;
}

:root {
    --text-fontsize: 20px;
    --huckle-fontsize: 32px;
    --huckle-and-wealth-fontweight: 800;
    --huckletext-fontweight: 400;
    --main-fontweight: 500;
}

 
@media (max-width: 1280px) {
    
    .entirecontent {
        max-width: 1280px;
        height: 832px;
    }
    
    .header {
        border-bottom: 8px solid #999999;
        border: 0px 0px 8px 0px;
        box-shadow: 0px 4px 4px 0px #00000040;
    }
    
    strong {
         width: 180px;
         height: 38px;
         font-size: var(--huckle-fontsize);
         font-weight: var(--huckle-and-wealth-fontweight);
         margin-inline: 250px;
         position: relative;
         top: 100px; 
         left: 0px;
    }

    
.onspan, .nospan {
    width: 415px;
    height: 60px;
    font-size: var(--text-fontsize);
    font-weight: var(--huckletext-fontweight);
    margin-inline: 250px; 
}

.onspan {
    position: relative;
    top: 130px;
    left: 0px;
}

.nospan {
    margin-block: 150px;  
} 

span { 
    color: limegreen;
    font-family: Lato;
    font-size: 20px;
    font-weight: 800;
    line-height: 30px;
}

main {
    width: 1280px;
    height: 450px;
    background-color: #666666;
    margin: 0;
    position: relative; 
 } 

     
.whitebox {
    width: 808px;
    height: 312px; 
    left: 232px;
    border: 0px 0px 8px 0px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background: #FFFFFF;
    position: relative;
    top: 60px;
    border-bottom: 8px solid #999999; 
} 


.banner {
    width: 398px;
    height: 60px;
    border: 0px 0px 8px 0px;
    background: #FFBF00;
    border-bottom: 8px solid #CC9900;
    position: relative; 
    top: 5px;
    left: -8px; 
 } 


#maincontent {
    width: 752px;
    height: 120px;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px; 
    padding-inline: 30px;
}

.subcontent {
    width: 752px; 
    height: 60px;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px; 
}  


 #content {
    width: 334px;
    height: 29px;
    top: 478px;
    left: 4px;
    line-height: 1.0;
    font-size: 24px;
    font-weight: 800;
    padding-inline: 40px;
    padding-block: 15px;
}

} 



/* styling for Mobile */
@media (max-width: 390px) {
    .entirecontent {
        width: 390px;
        height: 844px;   
        display: inline;
    } 

    .header {
          width: 390px; 
          height: 382px; 
    } 
    strong {
         width: 180px;
        height: 38px;
        margin-inline: 0px;
        margin-block: 5px;
    } 

    .onspan, .nospan {
        padding-block: 10px;
        
    }

    main {
        width: 390px;
        height: 767px;
        
    }

    .whitebox {
        width: 390px;
        height: 455px;
        top: 100px;
        left: 0px;
        border-bottom: 8px solid #999999;
 }

        .banner {
            width: 374px;
            height: 82px;
            position: relative; 
            left: 0px;
            top: 8px;
        }
    
        #maincontent {
            width: 342px;
            height: 240px;
            font-size: var(--text-fontsize);
            font-weight: var(--main-fontweight);
            margin-block: 0px;
            margin-inline: 20px;
        }
    
        .subcontent {
            width: 343px;
            height: 120px;
            font-size: var(--text-fontsize);
            font-weight: var(--main-fontweight);
            margin-block: 20px;
        }
    }


/* styling for Tablet */
@media (max-width: 770px)  {
        .entirecontent {
            width: 768px;
            height: 1024px;
        }

        .header {
            width: 768px;
            height: 382px;
        }

        strong {
            margin-inline: 20px;
        }

        .onspan, .nospan {
            margin-inline: 20px;
        }

        main {
            width: 768px;
            height: 456px;
            position: absolute;
        }

        .whitebox {
            width: 768px;
            height: 312px;
            position: absolute;
            left: 0px;
        }

        .banner {
            width: 398px;
            height: 60px;
            margin-top: 5px;
        }

        #content {
            width: 334px;
            height: 29px;
            padding-inline: 30px;
            display: inline;
            line-height: 2.5;
        }

        #maincontent {
            width: 720px;
            height: 120px;
            font-size: var(--text-fontsize);
            font-weight: var(--main-fontweight);
        }

        .subcontent {
            width: 720px;
            height: 60px;
            font-size: var(--text-fontsize);
            font-weight: var(--main-fontweight);
        }
}