:root {
    --main-color: #b99a76;
    --black-color: #3e3122;
    --black2-color: #222221;
    --white-color: #ffffff;

    --hex-main-color: invert(13%) sepia(53%) saturate(6182%) hue-rotate(348deg) brightness(110%) contrast(111%);
    --hex-black-color: invert(0%) sepia(8%) saturate(7476%) hue-rotate(163deg) brightness(97%) contrast(98%);
    --hex-white-color: invert(100%) sepia(0%) saturate(7414%) hue-rotate(93deg) brightness(118%) contrast(118%);

}

body { margin: 0px; padding: 0px; background-color: var(--main-color); background-image: url("/media/assets/ladel6_background_home.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; width: 100vw; height: 100vh; overflow: hidden; }

#logo { position: fixed; top: 80px; left: 50%; transform: translateX(-50%);  width: 80vw; max-width: 460px;}
#logo img { width: 100%; filter: var(--hex-white-color); }

#text { position: fixed; top: 50%; left: 50%; padding: 20px; background-color: var(--main-color); color: var(--black-color); transform: translate(-50%,-50%); font-size: 1.8rem; letter-spacing: 4px; }

#footer{ position: fixed; bottom: 40px; left: 50%; color: var(--white-color); background-color: var(--black-color); transform: translateX(-50%);   }

@media(max-width: 767px) AND (orientation: portrait){
    body{ height: 108vh; }
}

@media(max-height: 600px) AND (orientation: landscape){
    body{ overflow-y: scroll; height: auto; padding-bottom: 100px; }
    #logo { position: relative; top: 0px; left: 0px; transform: translate(0,0); max-width: 250px; margin: 0 auto; margin-bottom: 50px; margin-top: 50px; }
    #text { position:unset;  top: 0px; left: 0px; transform: translate(0,0); margin: 0 auto;  text-align: center; width: 80%; background: none; color: var(--white-color); }
}