:root {
    --blue: 0,130,255;
    --grey: 60,60,60;
    --lime: 225,254,107;
    --text: rgba(0,0,0,0.8);
    --paddingR: 1rem;
    --paddingM: 1.5rem;
    --paddingL: 2rem;
    --radius: 1rem 0px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background-color: white;
    color: var(--text);
}

html {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: calc(min(max(5vw, 16px), 20px));
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover, a:visited, a:active {
    text-decoration: underline;
}

h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#header {
    width: 100%;
    height: 20vh;
    max-height: 150px;
    background-color: rgb(var(--blue),0.9);
    position: fixed;
    z-index: 1;
}

#content {
    flex: 1;
}

#footer {
    width: 100%;
    background-color: rgb(var(--grey));
    font-size: 0.8rem;
    padding: var(--paddingR);
    color:rgba(255,255,255,0.8);
    text-align: left;
}

#menu {
    position: fixed;
    height: 100%;
    width: 80%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1;
    right: 0px;
    padding: var(--paddingR);
    display: none;
    color: var(--text);
    line-height: 2rem;
}

#menu:target {
    display: block;
}


#pan11:target {
    padding-top: 170px;
}

#bMenu, #bMenuC {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 10px;
    top: 10px;
    background-image: url('menu.png');
    background-position: 0px 0px;
    opacity: 0.9;
}

#bMenuC {
    background-position: 50px 0px;
    opacity: 0.6;
}

.tac {
    text-align: center;
}

.tal {
    text-align: left;
}

.h100 {
    height: 100%;
}

.o80 {
    opacity: 0.8;
}

.nw {
    white-space: nowrap;
}

#logo {
    height: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#pan1 {
    background-image: url('citrus.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
    padding-top: calc(min(20vh, 150px));
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#pan1A {
    font-size: calc(min(20vw, 15vh));
    text-align: center;
    color: white;
    font-weight: bold;
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.9));
}

#pan1B {
    font-size: calc(min(10vw, 7.5vh));
    text-align: center;
    color: white;
    font-weight: bold;
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.9));
}

#pan1C {
    background-color: rgba(var(--blue),0.9);
    color: white;
    padding: var(--paddingL) var(--paddingR);
    text-align: center;
    font-size: 1.2rem;
}

#pan2 {
    background-image: url('ingredients.jpg');
    background-position: center;
    background-size: cover;
    display: flex;
}

#pan7 {
    background-image: url('rainbow.jpg');
    background-position: center;
    background-size: cover;
    display: flex;
}

#pan2A {
    background-image: url('ingredients.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
}

#pan7B {
    background-image: url('rainbow.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
}

#pan2B {
    background-color: rgba(var(--lime),0.9);
    width: 100%;
}

#pan7A {
    background-color: rgba(var(--lime),0.9);
    width: 100%;
}


#pan3, #pan5, #pan7, #pan8, #pan9, #pan10 {
    display: flex;
}

#pan3A, #pan9A {
    width: 100%;
}

#pan3B, #pan9B {
    width: 100%;
    text-align: center;
}

#img3B, #img9B {
    border-radius: var(--radius);
}

#pan4 {
    text-align: center;
    background-color: rgb(var(--blue));
    color: white;
}

#pan5A, #pan5B, #pan5C {
    width: 100%;
}

#img5A, #img5B, #img5C {
    background-position: center;
    background-size: cover;
    width: 100%;
    padding: var(--paddingL);
}

#img5A {
    background-image: url('spinach.jpg');
}

#img5B {
    background-image: url('grapefruit.jpg');
}

#img5C {
    background-image: url('blueberries.jpg');
}

.tex5A, .tex8, .tex10 {
    background-color: rgba(var(--blue), 0.9);
    padding: var(--paddingL);
    border-radius: var(--radius);
    color: white;
    position: relative;
    top: 100%;
    transform: translateY(-100%);
}

#pan6 {
    background-color: rgb(var(--blue));
    color: white;
    text-align: center;
}

#pan7 {
    background-color: rgb(var(--lime));
}

#img7 {
    border-radius: var(--radius);
}

#pan8A, #pan10A {
    background-position: center;
    background-size: cover;
    width: 100%;
    min-height: 50vh;
    padding: var(--paddingL);
}

#pan8A {
    background-image: url('group_support.jpg');
}

#pan10A {
    background-image: url('purple_heather.jpg');
}

#pan8B, #pan10B, #pan11 {
    width: 100%;
    background-color: pink;
}

#pan10B {
    width: 100%;
    background-color: rgb(var(--blue));
    color: white;
}

#img9B {
    margin-bottom: var(--paddingL);
}

.pHlt {
    background-color: rgb(var(--blue));
    color: white;
    padding: var(--paddingR);
    border-radius: var(--radius);
}

@media screen and (orientation: portrait) {
    .fd {
        flex-direction: column;
    }
    #pan2B,
    #pan7A,
    #pan3A,
    #tex3B,
    #pan4,
    #pan6,
    #pan7,
    #pan8B,
    #pan9A,
    #pan10B,
    #pan11 {
        padding: var(--paddingM);
    }
    #pan2, #pan7 {
        padding: var(--paddingR);
    }
    #pan2A, #pan7B {
        background-image: none;
        height: 15vh;
    }
    #pan2B, #pan7A, #pan9B {
        border-radius: var(--radius);
    }
    #img3B, #img7, #img9B {
        margin-top: 0px;
        width: 80vw;
    }
    #img5A, #img5B, #img5C, #pan8A, #pan10A {
        height: 50vh;
    }
    .tex5B {
        padding: var(--paddingL);
    }
}

@media screen and (orientation: landscape) {
    .fd {
        flex-direction: row;
    }
    #pan2B,
    #pan7A,
    #pan3A,
    #tex3B,
    #pan4,
    #pan6,
    #pan7,
    #pan8B,
    #pan9A,
    #pan10B,
    #pan11 {
        padding: var(--paddingL);
    }
    #pan2, #pan7 {
        padding: 0px;
    }
    #pan2A, #pan7B, #pan8A, #pan10A {
        height: unset;
    }
    #pan2B, #pan7A {
        border-radius: 0px;
    }
    #img3B, #img7, #img9B {
        margin-top: var(--paddingL);
        height: 50vh;
    }
    #img5A, #img5B, #img5C {
        height: 75vh;
    }
    .tex5B {
        padding: var(--paddingR);
    }
}