*{padding: 0; margin: 0; height: ; font-family: sans-serif;}


#screens{
    width: 100vw;
    height: auto;
    min-height: ;
    background-color: #900;
}
.margin-container-body{/*can you do at max-w calc screen(-)max then /2=padding */
    margin: auto; /*now can you do this in js to get the w of an item and (-) */
    background-color: #915;/*to be exact and not rely on queries individually fixed */
}                /*one for less and higher than 1280px or any px other than that else */
#heading-nav{
    width: 100%;
    height: auto;
    padding-top: 12.5px;
    padding-bottom: 12.5px;
    box-sizing: border-box;
    background-color: whitesmoke;
    position: relative;
    float: left;
}

#footing-nav{
    width: 100%;
    height: auto;
    min-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 12.5px;
    padding-bottom: 12.5px;
    box-sizing: border-box;
    background-color: whitesmoke;
    position: relative;
    float: left;
}
#footing-nav ul{
    margin: 10px 20px;
    display: inline-block;
    float: left;
}

#footing-nav p{
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: lightblue;
    box-sizing: border-box;
    float: left;
}

#main-second-nav{
    
}

#main-second-nav li{
    /*display: inline-block;
    margin: 20px 10px;*/
}

#logo-icon{
    min-width: 40px;
    width: 12.5%;
    padding-top: 12.5%;
    max-width: 80px;
    min-height: 40px;
    height: 100%;
    max-height: 80px;
    margin-right: 5px;
    box-sizing: border-box;
    background-color: lightgoldenrodyellow;
    float: left;
}

#nav-icon{
    min-width: 40px;
    width: 12.5%;
    max-width: 80px;

    padding-top: 12.5%;
    min-height: 40px;

    max-height: 80px;
    box-sizing: border-box;
    background-color: pink;
    position: ;
    /*position: absolute;
    top:0; right: 0;*/
    float: right;
}

.marg-auto{}

header{
    min-width: 320px;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    padding: 10px;
    background-color: ;
    float: left;
}

header h1{border-bottom: 1px solid #000;}

#sub-pg-header{
    min-width: 320px;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    padding: 10px;
    background-color: ;
    text-align: center;
    position: /*relative*/;
    float: right;
}

#sub-pg-header>h2{margin-top: 15px; margin-left: 25px;}
#sub-pg-header>h3{margin-top: 20px; margin-left: 30px;}

#search-gal{
    width: 100%;
    min-width: 320px;
    max-width: 1280px;
    height: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: silver;
    float: left;
}

#input search{
    width: 95%;
    height: 100%;
    margin-left: 10px; margin-right: 10px;
}
.mob-mob-size{
    width: 318px;
    height: 478px;
    margin: 1px;
    overflow: hidden;
    background-color: #930;
    float: left;
}
.mob-mob-size:hover{background-color: #935;}
.mob-mob-size img{height: 100%; width: auto; margin: auto; align-content: center;}
.mob-mob-size img:hover{opacity: .8;}

#vw-padding-size{
    width: 50vw;
    height: ;
    padding-top: 25%;
    margin: 1px 25vw;
    overflow: hidden;
    color: azure;
    text-align: center;
    position: relative;
    background-color: blue;
    float: left;
}

#against-vw-padding-size{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: navajowhite;
    float: ;
}
.against-vw-padding-size-float{
    width: ;
    height: ;
    margin: 10px;
    float: left;
    background-color: rebeccapurple;
}


/*--------------------DESKTOP MONITORS-----------------------------------------------*/

@media only screen and (min-width:1281px) and (max-width: 2600px){
    .margin-container-body{/*can you do at max-w calc screen(-)max then /2=padding */
        margin-left: calc((100vw - 1280px)/ 2);
        margin-right: calc((100vw - 1280px)/ 2);
}
}

/*---------------------LAPTOP---------------------------------------------------*/

@media only screen and (min-width:960px) and (max-width: 1279px){
    .margin-container-body{/*can you do at max-w calc screen(-)max then /2=padding */
        margin-left: calc((100vw - 960px)/ 2);
        margin-right: calc((100vw - 960px)/ 2);
    }
}

/*--------------------TABLET----------------------------------------------------*/

@media only screen and (min-width:640px) and (max-width: 959px){
    .margin-container-body{/*can you do at max-w calc screen(-)max then /2=padding */
        margin-left: calc((100vw - 640px)/ 2);
        margin-right: calc((100vw - 640px)/ 2);
    }
    
    #desktop-test{/*code 1st of 3*/
    display: none;
}
    
    #tablet-test{/*code 1st of 3*/
    width: 200px;
    height: 100px;
    background-color: yellow;
    }
}

/*--------------------MOBILE----------------------------------------------------*/

@media only screen and (min-width:320px) and (max-width: 639px){
    .margin-container-body{/*can you do at max-w calc screen(-)max then /2=padding */
        margin-left: calc((100vw - 320px)/ 2);
        margin-right: calc((100vw - 320px)/ 2);
    }
    
    #desktop-test{/*code 1st of 3*/
    display: none;
    }
    
    #tablet-test{/*code 1st of 3*/
    display: none;
    }
    
    #phone-test{/*code 1st of 3*/
    width: 100px;
    height: 100px;
    background-color: black;
    }
    
    #sub-pg-header{
    
    text-align: left;
    }

    #sub-pg-header>h2{margin-top: 7.5px; margin-left: 5px;}
    }
/**/

/*Using fixed and percentages. What if use percentage width but set min-width px to retain for screen sizes Or decrease min as the screen devices gets smaller*/