/* base insctructions set for cellphone */

:root{  
    --light-orange: RGB(255,210,150);
    --logo-width: 8vh;
    --burger-width: 2.5vh;
    --menu-font-size: 19px; 
    --menu-background: maroon;
    --menu-color:orange;
    --menu-li-width: var(--menu-font-size)*9;
    --title-color: maroon;
    --title-font-size: 4vh;
    --title-space-top:8vh;
    --title-space-bottom:1vh;
    --home-pics-space:7vh;
    --img-home-pic-ref: 40vw;
    --text-font-family: Arial;
    --p-about-space: 5vh;
    --about-text-size:2.3vh;
    --services-text-size: 2.2vh;
    --div-services-margin: 5vh 2vw 10vh 2vw;
    --contact-text-size: 2.6vh;
    --div-contact-margin: 10vh auto 15vh auto;
    --footer-padding-top: 2vh;
    --footer-item-font-size:2.5vh;
}

body{
    margin:0;
    background: darkorange;
    caret-color: transparent;
    overflow:hidden;   /* to prevent remaining footer background to pop a right arrow */
    height:100%;
    min-height: 600px;

    animation: 1s fadeIn;         /* to avoid flashing photos on loading, see @keyframes fadeIn*/
    animation-fill-mode: forwards;
    visibility: hidden;
}

header{
    position: relative;   /* for burger child position */
    height: var(--burger-width);
    padding: 0;
    background: var(--header-background);
}

#img-logo{
    position: absolute;  
    width:var(--logo-width);
    height:var(--logo-width);
    top:10px;
    left:10px;         /*gap from parent's left */
    margin-top: 0;
}

#burger{
    display:block;
    position: absolute;  
    height:var(--burger-width);
    width:calc(var(--burger-width)*4.2);
    top:5px;
    right:3px;         /*gap from parent's right */
    margin-right: 3px;
    caret-color:transparent;
    /*background: blue;*/
}
  
#burger-strips-container{
    width:var(--burger-width);
    height: var(--burger-width);
    float:left;
}

.burger-strip{
    width:calc(var(--burger-width)*0.8);
    height:20%;
    margin-top: 10%;
    margin-left: 10%;
    background:darkred;
}

#div-burger-text{
    width: fit-content;
    height: 100%;
    font-size: calc(var(--burger-width));
    line-height: var(--burger-width);
    text-align: center;
    float:right;
    color:maroon;
    /*background: yellow;*/
}

#menu{
    position:absolute;
    transition: max-height 0.3s;
    max-height: 0px;
    height:calc(var(--menu-font-size)*20);
    width:calc(var(--menu-li-width)*0.95);
    top: calc(var(--burger-width) + 4px);
    right:3px;
    margin-top: 0;
    padding-left:0;
    overflow: hidden;   /* prevent menu from showing at start */
    background: transparent;
}

#menu ul{
    display:block;
    position:absolute;
    width:fit-content;
    height:fit-content;
    top:1px;
    left:1px;
    margin-top: 0;    /* eiminates preset margin */
    padding-left: 0;  /* places ul to left side */
    background:var(--menu-background);
    border: 1px solid maroon;
}

#menu li{
    list-style-type: none;
    font-size: var(--menu-font-size);
    width: var(--menu-li-width);
    padding: 10px 30px 10px 10px;
    cursor:default;
    color:var(--light-orange);
}

#menu li:hover {
    background: var(--light-orange);
    color:maroon;
}

.page{ display:none}

.page-title{
    color:var(--title-color);
    text-align: center;
    font-size: var(--title-font-size);
    margin-top: 0;
    padding-top: var(--title-space-top);
    margin-bottom: var(--title-space-bottom);
}

#div-home-pics{
    display:block;
    width:100%;
    text-align: center;
    margin-top: var(--home-pics-space);
    margin-bottom: var(--home-pics-space);
    margin-left: 1px;
}

#img-production{
    display:block;
    margin: 0 auto 5px auto;
    width: calc(var(--img-home-pic-ref)*2.2)
}

#img-tall-tree{
    width: calc(var(--img-home-pic-ref)*0.967);
    aspect-ratio: 4/5;
}
#img-stand{ 
    width: calc(var(--img-home-pic-ref)*1.209);  
    aspect-ratio: 1;
}


                                            /****** ABOUT *****/

#p-about{
    margin: 5vw;
    margin-top: var(--p-about-space);
    margin-bottom: calc(var(--p-about-space)*1.8);
    font-size: var(--about-text-size);
    font-family: var(--text-font-family);
}

.spam-about{
    display:block;
    margin: 3vh 0 3vh 0;
    font-size: calc(var(--about-text-size)*1.1);
}


                                                    /****  SERVICES  ****/

#div-services{ margin: var(--div-services-margin);}

.div-services-container{
    display:block;
    padding: 0;
}

.div-services-child{
    display: inline-block;
    width:49%;
    margin-top: 0;
    padding-top: 0;
}

#div-services-container2{ margin-top: 5vh;}

h2, h3{
    text-align: center;
    margin: 2vh 0 2vh 0;
    padding: 0 1vw 0 1vw;
    font-size: var(--services-text-size);
    font-weight: 600;
}


                                                /**** CONTACT ****/

#div-contact{
    width: fit-content;
    margin: var(--div-contact-margin);
}

#a-email:hover{ color:darkblue}

h4{
    margin:0;
    padding: 1vh 0 1vh;
    font-size: var(--contact-text-size);
    font-weight: 600;
}

#div-location{
    display: inline-block;
    position: relative;
    width: calc(var(--contact-text-size)*13);
    margin-top: 7vh;
    padding:0;
}

#div-address{
    display:inline-block;
    width: fit-content;
}

#div-google-map{
    display:inline-block;
    position: absolute;
    top:0;
    right:0;
    height: 100%;
    aspect-ratio: 1;
}

#img-google-map{
    position: absolute;
    top:0;
    right:0;
    height:100%;
    aspect-ratio: 1;
    padding-top: 0;
    border: 3px solid blue;
}

#img-google-map:hover{ border: 3px solid mediumblue}


                                        /**** GALLERY ****/

#div-gallery{ margin: 5vh 0 10vh 0}

.div-img-gallery{
    height: fit-content;
    margin-bottom: 5vh;
    text-align: center;
}

.img-gallery{ height: 60vw}

.spam-img-gallery{
    display: block;
    text-align: center;
    font-family: Arial;
    font-size: 6vw;
    color: maroon;
    padding: 2px 0 3px;
}


                                        /**** FOOTER ****/

footer{
    background: maroon;
    padding-top: var(--footer-padding-top);
    padding-bottom: 30vh;
}

.footer-item{
    display: inline-block;
    width: 32vw;
    text-align: center;
    color:orange;
    font-size: var(--footer-item-font-size);
}

.footer-item:hover{
    color:var(--light-orange);
    cursor:default;
}


/* IMPORTANT: @media instructions are executed in order. Set instructions from 
              smaller screens to larger screens.
*/

@media (min-aspect-ratio: 0.55){   
    :root{
        /*--title-color:lightgreen;*/
        --title-font-size: 4.5vh;
        --title-space-top:7vh;
        --home-pics-space:6vh;
        --p-about-space: 10vh;
        --about-text-size: 2.5vh;
        --services-text-size: 2.5vh;
        --contact-text-size: 3vh;
        --contact-div-space-w: 12vw;
        --contact-div-margin-left:3vw;
        --footer-padding-top: 1vh;
        --footer-item-font-size:3vh;
    }

    #img-production{ width: calc(var(--img-home-pic-ref)*2.23)}

    #img-tall-tree{ width: calc(var(--img-home-pic-ref)*0.98)}

    #img-stand{ width: calc(var(--img-home-pic-ref)*1.225);}
    
    #div-gallery{margin-top: 10vh}

    .img-gallery{ height: 55vw}

    .spam-img-gallery{ font-size: 5vw};
}

@media (min-aspect-ratio: 0.65){   
    :root{
        /*--title-color: pink;*/
        --logo-width: 10vh;
        --title-font-size: 5vh;
        --title-space-top:9vh;
        --home-pics-space:5vh;
        --about-text-size: 2.8vh;
        --services-text-size: 2.8vh;
        --div-services-margin: 5vh 2vw 10vh 2vw;
        --div-contact-margin-sides: 10vh 0;
    }
    #img-production{ width: calc(var(--img-home-pic-ref)*1.8)}

    #img-tall-tree{ width: calc(var(--img-home-pic-ref)*0.79)}

    #img-stand{ width: calc(var(--img-home-pic-ref)*0.985)}

    .img-gallery{ height:50vw}
    
    .spam-img-gallery{ font-size: 4vw};

}

@media (min-aspect-ratio: 0.70){   
    :root{
        /*--title-color: lightblue;*/
        --logo-width: 12vh;
        --title-font-size: 6vh;
        --title-space-top:11vh;
        --home-pics-space:14vh;
        --p-about-space: 8vh;
        --about-text-size: 3vh;
        --services-text-size: 3.2vh;
        --div-services-margin: 2vh 2vw 5vh 2vw;
        --div-contact-margin: 10vh auto 15vh 20vw;
    }

    #img-production{
        display:inline;
        width: var(--img-home-pic-ref);
        margin:0;    
        aspect-ratio: 4/3;
    }

    #img-tall-tree{ width: calc(var(--img-home-pic-ref)*0.6)}

    #img-stand{ width: calc(var(--img-home-pic-ref)*0.75)}

    .img-gallery{ height:45vw}

    .spam-img-gallery{ font-size: 3.3vw};
}

@media (min-aspect-ratio: 1.05){   
    :root{
        /*--title-color: cyan;*/
        --logo-width: 15vh;
        --title-font-size: 8vh;
        --title-space-top:9vh;
        --home-pics-space:12vh;
        --about-text-size: 3.2vh;
        --services-text-size: 3.5vh;
        --contact-text-size: 3vh;
        --contact-div-space-w: 20vw;
        --contact-div-space-h: 8vh;
    }

    .img-gallery{ height:35vw}

    .spam-img-gallery{ font-size: 2.5vw};
}

@media (min-aspect-ratio: 1.5) {   
    :root{
        /*--title-color: white;*/
        --title-font-size: 9vh;
        --title-space-top:5vh;
        --home-pics-space:6vh;
        --about-text-size: 3.5vh;
        --services-text-size: 4vh;
        --contact-text-size: 3.3vh;
    }

    .img-gallery{ height: 30vw;}

    .spam-img-gallery{ font-size: 2vw};
}

@media (min-aspect-ratio: 2) {   
    :root{
        /*--title-color: blue;*/
        --img-home-pic-ref:35vw;
        --title-space-top:3vh;
        --home-pics-space:4vh;
        --about-text-size: 4vh;
    }

    .img-gallery{ height: 25vw}
}

@media (min-aspect-ratio: 2.2) {   
    :root{
        /*--title-color: black;*/
        --logo-width: 7vw;
        --title-font-size: 4vw;
        --title-space-top:2vw;
        --home-pics-space:2vw;
        --about-text-size: 1.7vw;
        --services-text-size: 1.6vw;
        --div-services-margin: 1vw 2vw 3vw 2vw;
        --contact-text-size: 1.25vw;
        --p-about-space: 5vw;
        --footer-item-font-size:1.25vw;
    }

    h2, h3{ margin: 1vw 0 1vw 0}
}

@keyframes fadeIn {                     /* see body {animation + visibility */
    99% { visibility: hidden}
    100% { visibility: visible}
}