*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    --cc-green: #e1eae6;
    --cc-white: #fdf8f4;
    --cc-blue: #e3f7ff;
    --cc-red: #ffe7e3;
    --cc-black: #242f2e;
    --cc-orange: #ffa661;
    --cc-orange-glow: #ff913b;
    --cc-white-darker: #e5e0dd;
    --cc-green-darker: #cdd5d1;
    --cc-black-real: #000000;
    --cc-black-darker: #121817;
    --cc-black-lighter: #3b4d4b;
    margin: 0;
    padding: 0;
    max-height: 100vh;
    max-width: 100vw;
    min-height: 100vh;
    min-width: 100vw;
}

#menu {
    position: fixed;
    display: grid;
    grid-template-columns: 16.8% 70% 1fr;
    width: 100vw;
}

#menu * {
    align-self: center;
    justify-self: right;
}

#brand_container {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    justify-self: stretch;
}

#brand_container * {
    margin: 0.6em;
}

#menu_list {
    display: flex;
    justify-content: center;
    justify-self: stretch;
}

#menu_list p {
    margin: 2rem;
}

#menu_list p:hover {
    text-decoration: underline;
}

#cart {
    margin-right: 6rem;
}

#logo_container {
    height: 3.5em;
    margin-left: 7vw;
}

#cart {
    height: 2em;
}

#main {
    background-color: var(--cc-white);
    display: grid;
    grid-template: 1fr / 56% 44%;
    max-height: 100vh;
    min-height: 100vh;
    max-width: 100vw;
    min-width: 100vw;
}

#big_cactus_container {
    background-color: var(--cc-green);
    background: rgb(214, 229, 224);
    background: linear-gradient(0deg, rgba(214, 229, 224, 1) 0%, rgba(225, 236, 230, 1) 100%);
    display: flex;
}

#big_cactus_img {
    width: 100%;
    object-fit: contain;
    height: 100vh;
}

#content_container {
    display: grid;
    grid-template: 72% 28% / 1fr;
    max-height: 100vh;
    min-height: 100vh;
}

#major {
    display: grid;
    grid-template-columns: 30% 35% 35%;
    align-items: stretch;
}

#social {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bar {
    width: 1px;
    background-color: var(--cc-black-lighter);
    height: 3.5em;
    margin: 1.2em 0;
}

.social_logo {
    height: 1.5em;
    margin: 1.2em 0;
}

#dialog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#button_explore {
    border: none var(--cc-black-real) 1px;
    border-radius: 50px;
    box-shadow: 0px 0px 2px 3px var(--cc-orange-glow);
    padding: 1em calc(1em + 8px) 1em calc(1em + 8px);
}

#button_explore:active {
    background-color: var(--cc-white-darker);
    padding: 1em calc(0.8em + 8px) 1em calc(1.2em + 8px);
    box-shadow: 0px 0px 2px 3px var(--cc-orange-glow), inset 0px 7px 9px -7px rgba(0, 0, 0, 0.7);
}

#p_explore {
    white-space: pre;
    margin: 0;
}

#minor {
    display: flex;
    justify-content: space-between;
}

#page_selector {
    background-color: var(--cc-green);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center
}

.page_selector {
    background-color: var(--cc-green);
    border: solid var(--cc-black-real) 1px;
    border-radius: 100%;
    height: 3.8em;
    width: 3.8em;
}

.page_selector:active {
    background-color: var(--cc-green-darker);
    box-shadow: inset 0px 7px 9px -7px rgba(0, 0, 0, 0.7)
}

.cactus_container {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-position: right 10% bottom 10%;
    background-size: 40%;
    background-repeat: no-repeat;
}

#cactus_concrete {
    background-color: var(--cc-blue);
    background-image: url(./media/cactus_little3-tr.png);
}

#cactus_exotic {
    background-color: var(--cc-red);
    background-image: url(./media/cactus_little1v3-tr.png);
}

.cactus_container p {
    margin-left: 10%;
    margin-top: 0.5rem;
}

.cactus_container p:first-child {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.cactus_container p:last-child {
    margin-top: auto;
    margin-bottom: 2rem;
}

.cactus_container p:last-child:hover {
    text-decoration: underline;
}

.fontGentium {
    font-family: 'Gentium Basic', serif;
}

.fontJosefin {
    font-family: 'Josefin Sans', serif;
}


/* Title */

.fontstyleA {
    font-weight: 900;
    font-size: 6em;
    line-height: 1em;
    color: var(--cc-black-darker);
}


/* NavMenu, Other text */

.fontstyleB {
    font-weight: 200;
    font-size: 1em;
    color: var(--cc-black);
}


/* Explore button, Counter */

.fontstyleC {
    font-weight: 900;
    font-size: 1em;
    color: var(--cc-black);
}


/* Cactus Title*/

.fontstyleD {
    font-weight: 900;
    font-size: 2em;
    color: var(--cc-black-darker);
}


/* Brand name*/

.fontstyleE {
    font-weight: 200;
    font-size: 1.4em;
    color: var(--cc-black);
    letter-spacing: 0.3em;
}

strong {
    font-size: 1.5em;
}

@media only screen and (max-width: 1000px) {
    #main {
        display: flex;
        flex-direction: column;
        max-width: 100vw;
        min-width: 100vw;
        max-width: 100%;
    }
    #big_cactus_container {
        display: none;
    }
    #menu_list p {
        margin: 1rem;
    }
}

@media only screen and (max-width: 850px) {
    #cart {
        margin-right: 2rem;
    }
    #logo_container {
        margin-left: 2vw;
    }
}

@media only screen and (max-width: 750px) {
    #menu_list {
        justify-content: flex-end;
    }
}

@media only screen and (max-width: 640px) {
    #menu {
        display: flex;
        flex-direction: column;
        position: initial;
        background-color: var(--cc-white);
    }
    .fontstyleA {
        font-size: 4em;
    }
    #cart {
        display: none;
    }
    #logo_container {
        height: 6em;
    }
    .fontstyleE {
        font-size: 2em;
    }
}

@media only screen and (max-width: 370px) {
    .fontstyleA {
        font-size: 3em;
    }
}

@media only screen and (max-height: 650px) and (min-width: 450px) {
    #menu {
        position: initial;
        background-color: var(--cc-white);
    }
    #content_container {
        max-height: initial;
        min-height: initial;
    }
    .fontstyleA {
        font-size: 4em;
    }
}