* { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
:root {--txt-color-1:  rgb(2, 73, 9);
       --bg-color-1: rgb(1, 40, 5); 
       --cta-color-1: rgb(240, 132, 8);}
body { padding-top: 20vh; position: relative; 
    min-height: 100vh; max-width: 100vw; 
    background-color: var(--bg-color-1); 
    font-family: verdana; 
    color: var(--txt-color-1); }

/* -- mobile phone, tablet users --*/
#logoheader { height: 20vh; width: 100%;
    display: flex; 
    background-image: 
    linear-gradient(150deg, white 65%, rgb(2, 73, 9));
    position: fixed; top: 0; 
    border: 4px dotted green;
    border-top: 4px dotted var(--bg-color-1); 
    border-bottom: 4px dotted var(--bg-color-1); }
#logoArea { width: 40%; margin-top: .6vw;
    background-image: url("/images/bowl-envy-logo.jpg");
    background-size: cover; 
    background-position: bottom; }
#ctaAreaDesktop { display: none; }
#InfoAndCtas { width: 60%; height: 100%; 
    display: flex; flex-direction: column; }
#phoneAddressHours { flex-grow: 1; }
h1 { color: var(--bg-color-1); font-size: 4vw; 
    text-align: right; padding: 1vw 4vw 1vw 1vw; }
h1 span { font-size: 5vw; }
#ctaBlock { display: flex; gap: 2vw; }
#eventsCta, #orderCta { margin-bottom: 5.5vw; margin-right: 2vw;
    text-align: center;
    background-color: var(--cta-color-1); 
    padding: 1.5vw 1vw;     
    font-size: 5.5vw; font-weight: bolder;
    color: black; 
    border-radius: 10px; 
    text-shadow: 1px 2px 2px yellow; 
    color: var(--txt-color-1); text-decoration: none; }
#eventsCta { width: 50%; }
#orderCta { width: 50%; }

#heroheader { display: none }

main { width: 100%; 
    display: flex; flex-wrap: wrap;  
    font-weight: lighter; font-stretch: wider; }
main a { height: 21vh; width: 100%; padding: 10px 20px; 
    flex-direction: column; flex: 1 0 auto;
    text-decoration-line: none; text-align: left; 
    font-size: 30px;  
    background-size: cover;
    border-bottom: 3px solid var(--bg-color-1); }
#morning-menu { 
    background-image: url("/images/be-breakfast.jpg");
    color: var(--cta-color-1); text-align: right;
    text-shadow: 1px 1px 2px black, 8px 8px 10px rgb(211, 166, 4); }
#lunch-menu { 
    background-image: url("/images/be-lunch.jpg");
    color: white; 
    text-shadow: 1px 1px 2px black, 8px 8px 10px rgb(42, 40, 40); }
#lunch-menu span { 
    font-size: 25px; font-weight: lighter; }
#dinner-menu { 
    background-image: url("/images/be-dinner.jpg");
    background-position: center;
    color: rgb(3, 15, 75); text-align: center; 
    text-shadow: 1px 1px 2px black, 8px 8px 10px rgb(42, 40, 40); }
#dinner-menu span { font-size: 20px; }

footer { position: absolute; top: 83vh; height: 16.5vh;
    font-size: 30px; font-weight: bolder; 
    letter-spacing: 4px; 
    margin-bottom: 2px;
    background-image: url("/images/be-many-bowls.jpg"); 
    background-size: cover; background-position: 70% 40%; }
footer div{ display: flex; }
footer div:nth-child(1), div:nth-child(3) { height: 15%; }
footer div:nth-child(2) { height: 70%;
    background-color: rgba(255, 255, 255, .6); }
footer a { width: 25vw; color: var(--txt-color-1);
    text-shadow: 1px 1px 1px black;
    text-decoration-line: none; font-size: 13px;
    text-align: center; letter-spacing: 1px; 
    justify-content: center; align-self: center; 
    border: 20px solid rgba(255, 255, 255, .5); border-radius: 50%; }
footer p { width: 50vw; 
    font-size: 19px; font-family: Georgia, serif; 
    font-style: italic; text-align: center;
    text-shadow: 1px 1px 0 black;
    justify-content: center; align-self: center; }


/* === styling for tablet (landscape), desktops === */


@media (width > 1000px) {

body { background-image: 
    linear-gradient(165deg, white 50%, rgb(2, 73, 9)); } 

#logoArea { width: 25%; }
#InfoAndCtas { width: 75%; display: flex; 
    flex-direction: row-reverse; }
#phoneAddressHours h1 { width: 45vw; font-size: 1.75vw; 
    padding: 1.6vh 0; flex-grow: 0; }
h1 span /* Phone # */ { 
    font-size: 2.5vw; }
#ctaBlock { gap: 0; }
#eventsCta, #orderCta { margin: 7%; margin-left: 20%;
    font-size: 2.5vw; font-weight: bolder; 
    padding: 1vw 2vw;
    text-align: center; }
#orderCta:hover, #eventsCta:hover {
    background-color: rgb(186, 247, 63); }

#heroheader { display: block; height: 20vh; width: 100%; 
    background-image: url("/images/be-chard.jpg");
    background-size: cover; 
    border-bottom: 3px solid var(--bg-color-1); }
#heroheader h1 /* "No question..." */
    { padding: 1.4vh 5.5vw; color: white; 
    font-size: 3vw; font-weight: normal; text-align: left; font-family: Georgia, serif; font-style: italic; 
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(2, 73, 9), 0 0 5px green; }
#heroheader h1 span /* We're In To Green */ { 
    padding-bottom: 2vh; padding-top: 0; 
    padding-left: 31.25vw; padding-right: 0;
    font-size: 4.5vw; font-weight: bolder;   
    letter-spacing: .75vw;  }

main { display: flex; flex-direction: row;  
    justify-content: space-evenly; }
main a { font-size: 35px; font-weight: bolder; 
    height: 40vh; flex: 1 1; }
#dinner-menu { background-position: bottom; }
#dinner-menu span { font-size: 20px; }
#lunch-menu { 
    border-left: 3px solid var(--bg-color-1); 
    border-right: 3px solid var(--bg-color-1); }
#morning-menu:hover, #lunch-menu:hover, #dinner-menu:hover { color: var(--bg-color-1);
    background-color:rgb(255, 255, 255, .3);
    text-shadow: 2px 2px 4px rgb(139, 228, 60); 
    transition: all 500ms ease-in-out; } 

footer { width: 100%; position: absolute; left: 0; top: 80vh; height: 20vh; }
footer a { font-size: 30px; letter-spacing: 3px; }
footer a:hover { padding: 10 15px; border-radius: 0px;
    color: orange; 
    text-shadow: 1px 1px 0 black, 8px 8px 10px rgb(42, 40, 40);
    background-color:rgba(255, 255, 255, .4);
    transition: all 500ms ease-in-out; }
footer p { font-size: 42px; }
}