@font-face {
    src: url(../fonts/lazy/LazybonesD/LazybonesD.ttf);
    font-family: lazy;
}
html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    /* position: relative; */
}
a {

}

@media (min-width:320px) {
    body {
        background: url(../images/beach_plants1_copy.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position-x: 85%;
        background-position-y: 76%; 
        overflow: hidden;
    }
    header{
        font-family: lazy;
        color: black;
        -webkit-text-fill-color: #0004ff1a;
        -webkit-text-stroke-width: 1.4px;
        -webkit-text-stroke-color: white;
        font-size: 40pt;
        margin: 20px 0 0 0;
        text-align: center;
        width: 100%;
        /* position: fixed; */
    }
    /* BUBBLE TEXT STYLES */
    .bubble-text {
        position: fixed;
        height: 2em;
        filter: contrast(1.3)drop-shadow(-4px 4px 2px black);
        display: block;
    }
    .art {
        filter: contrast(1.3)drop-shadow(-4px 4px 2px black);
        top: 51%;
        height: 2.5em;
        transform: rotate(-8deg);
        padding-left: 10px;
    }
    .art-direction {
        /* display: none; */
        /* top: 20%; */
        top: 31%;
        left: 38%;
        transform: rotate(8deg);
    }
    .shop {
        /* display: none; */
        top: 57%;
        left: 68%;
        transform: rotate(6deg);
    }
    .more {
        /* display: none; */
        top: 85%;
        left: 4%;
        transform: rotate(6deg);
    }
    .info {
        /* display: none; */
        top: 89%;
        left: 68%;
        filter: contrast(2)drop-shadow(-4px 4px 2px black);
        transform: rotate(-13deg);
    }
    .doggy {
        /* display: none; */
        top: 67.5%;
        left: 39.5%;
        width: 15%;
        height: unset;
    }
    .froggy {
        position: fixed;
        bottom: 0px;
        height: 3.8em;
        filter: drop-shadow(-4px 4px 2px black);
    }
    .bubble-text:hover {
        filter: drop-shadow(-4px 4px 2px white);
    }
}
@media screen and (min-width: 375px){
    .art-direction {
        left: 48%;
    }
    .more {
        top: 88%;
    }
    .info {

    }
}
@media screen and (min-width:568px){
    .art-direction {
        left: 66%;
        top: 45%;
    }
    .shop {
        top: 63%;
        left: 65%;
    }
    .more {
        top: 78%;
        left: 2%;
    }
    .info {
        top: 85%;
        left: 74%;
    }
    .doggy {
        top: 70.5%;
        width: 8%;
        left: 46%;
    }
}

@media screen and (min-width: 700px){
    .art-direction {
        left: 70%;
    }
}

@media screen and (min-width:700px) and (min-height:700px) {
    body {
        background-position-x: unset;
    }
    header {
        font-size: 56pt;
        margin-top: 30px;
    }
    .bubble-text {
        height: 3.3em;
    }
    .art {
        padding-left: 5%;
    }
    .art-direction {
        left: 3%;
        top: 68%;
        height: 3em;
    }
    .shop {
        top: 83%;
        left: 81%;
    }
    .more {
        top: 83%;
    }
    .info {
        top: 68%;
        left: 84%;
    }
    .doggy {
        height: 8em;
        top: 78%;
        width: unset;
    }
    .froggy {
        height: 5.8em;
        top: 88%;
    }
}
@media screen and (min-width:1000px){
    header {
        font-size: 85pt;
        margin-top: 3%;
    }
    .bubble-text {
        height: 4em;
    }
    .art-direction {
        left: 2%;
    }
    .doggy {
        height: 11em;
        top: 70%;
    }
}