#page2 {
    margin-bottom: 2rem;
    z-index: 1; /** prevents img background from next page to shadow this page */
}

#explain {
    width: 100%;
    padding-top: 75px;
    padding-bottom: 40px;
}

#concept {
    align-self: flex-end;
    padding: 3rem;
}

#main-banner {
    isolation: isolate; /** allows background with negative z-index not to be hidden */
    background-size: 200%;
    background-image: linear-gradient(146deg, #e6c566 0%, hsl(47deg 100% 61%) 20%, #b75d32 100%);
    /** failsafe for a edge-case : On Android Chrome, when streching the screen to a border, a flickering effect (overlapping of background-image and background-color) happens. this property prevents that. */
    /*
    animation: wavingBg 10s ease infinite;
    will-change: transform;
    */

    /** */
    height: max(220px, 33vh);
    overflow: hidden;
    width: 100%;

    /** */
    font-size: max(1.5rem, 2vmax);
    gap: 1rem;
    box-shadow: 2px 4px 12px 10px #1f1f28;
}

#main-banner .bg {
    opacity: .025;
    width: 100%;
    transform: rotate(270deg);
}

#main-mock {
    flex-shrink: 0;
    transition: scale .5s;
}

#main-mock .content .point {
    position: absolute;
    opacity: 0.3;
    width: 12px;
    transform: rotate3d(1, 1, 1, 328deg);
    filter: grayscale(0.6);
}

#main-mock .content .tooltip {
    position: absolute;
}

#main-mock .content .tooltip > * {
    padding: 0.75em;
    background-image: linear-gradient(128deg, hsl(47deg 100% 50%), hsl(28, 45%, 35%, 1));
    border-radius: 10px;
    color: white;
    z-index: 1; /** allows tail of tooltip to be hidden */
}

#main-mock .content .tooltip:after {
    content: "";
    position: absolute;
    width: 0; 
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    
    border-top: 10px solid #a2752d;
    bottom: -15%;
}

#main-mock .content .point.point-1 { left: -3%; }
#main-mock .content .point.point-2 { right: 8%; top: 20%; }

#main-mock .content .point.point-3 { opacity: .7; bottom: 10%; right: 27%; }
#main-mock .content .tooltip.point-3 { bottom: 15.5%; right: 21.7%; }

#main-mock .content .point.point-4 { top: 10%; left: 20%; }
#main-mock .content .point.point-5 { left: -3%; }
#main-mock .content .point.point-6 { right: 20%; top: 60%; }
#main-mock .content .point.point-7 { bottom: 20%; left: 10% }
#main-mock .content .point.point-8 { bottom: 5%; right: -2%;}

#main-mock .content .point.point-9 { opacity: .7; left: 30%; top: 30%;}
#main-mock .content .tooltip.point-9 { left: 24%; top: 19.5%; }

#main-mock .content .point.point-10 { left: 65%; top: 35%;}
#main-mock .content .point.point-11 { top: 5%; right: -3%;}

#main-content {
    position: absolute;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 2%;

    display: inline-grid;
    grid-template-columns: 225px 1fr;
}

#main-text {
    padding: 0 5%;
    flex: 1;
}

#main-text > div {
    max-width: 600px;
}

#main-text > div > * {
    top: -1.2rem;
}

#main-text span {
    font-family: TrenchThin;
    font-size: min(20vmin, 7rem);
    filter: drop-shadow(2px 4px 6px #888);
}

#main-text p {
    font-size: max(1rem, 3vmin);
    margin-top: 1vmin;
    margin-bottom: .5vmin;
}

#main-text b {
    color: #104c78;
}

@media (max-width: 700px) {
    #main-text {
        text-align: justify;
    }

    #main-text p {
        margin-bottom: 0;
    }
}

@media (min-width: 700px) {
    #with-visuals {
        font-size: 2rem;
    }
}

#with-visuals *:nth-child(2n) {
    font-size: .5em;
}

@media (max-width: 420px), (max-height: 600px) {
    #main-mock {
        scale: .75;
        transform-origin: left;
    }

    .mock .screen .island {
        color: transparent; /** since font does not scale as well as shapes, juste hide text content */
    }

    #main-content {
        grid-template-columns: calc(225px * .75) 1fr; /** scale ratioed */
    }
}

.explain-more {
    font-style: italic;
    font-size: max(1.5vmin, .65em);
    padding: 0.5em 0.75em;
}

.small {
    vertical-align: sub;
}

.buddiz-explain {
    align-self: self-end;
    z-index: 1; /** to not be shadowed */
}