/* A custom font reminiscent of the one Jelly Belly uses (thanks to Insanitype) */
@font-face {
    font-family: "Kool Beans";
    src: 
        url("../fonts/koolbeans-eerm-webfont.woff") format("woff"),
        url("../fonts/koolbeans-eerm-webfont.woff2") format("woff2");
}

/* Root font size. Seeting size on this element was also necessary for mobile compatibility I think */
html {
    font-size: 20pt;
    width: 100dvw;
    max-width: 100%;
    overflow-x: hidden;

}

/* Body is a column flexbox as wide as the page. Relative positioning is for positioning child elements */
body {
    position: relative;
    width: 100dvw;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header is a flexbox with fixed position at the top of the page, Z-index 3 to raise it above other elements, and a gradient background */
header {
    position:fixed;
    top: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    height: 80px;
    background-color: rgb(245,245,245);
    background: linear-gradient(180deg, rgba(75,148,234,1) 20%, rgba(62,97,229,1) 65%, rgba(28,63,218,1) 97%);
    z-index: 3;
}

/* Box for containing all the elements of my nav menu. */
header>#navMenuContainer {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
}

/* The links in my nav menu. I'm making them small and hiding them underneath the menu icon to start. */
header>#navMenuContainer li {
    display: block;
    transition: all 0.5s ease-out;
    position: absolute;
    top: 15px;
    left: 15px;
    width: 20px;
    height: auto;
}

/* The images for the nav links. I'm giving them a base filter property to transition them. */
header>#navMenuContainer a img {
    width: 20px;
    height: auto;
    filter: brightness(1) saturate(1);
    transition: filter 0.1s ease-in-out, width 0.5s ease-out; 
}

/* Hover transition of link images: A brightness and saturation effect */
header>#navMenuContainer a:hover img {
    filter: brightness(1.7) saturate(1.25); 
}

/* Embiggen the links on hover of menu icon */
header>#navMenuContainer:hover li {
    width: 70px;
    left: -10px;
    top: 70px;
}

/* Embiggen the pictures in the links */
header>#navMenuContainer:hover img {
    width: 70px;
}

/* Stack the links in a column descening from the menu icon */
header>#navMenuContainer:hover>menu>li:nth-of-type(2){
    top: 120px;
}
header>#navMenuContainer:hover>menu>li:nth-of-type(3){
    top: 170px;
}
header>#navMenuContainer:hover>menu>li:nth-of-type(4){
    top: 220px;
}

/* Menu Icon. It gets base filter to transition. */
header>#navMenuContainer svg {
    position: absolute;
    top: 0px;
    left: 0px;
    aspect-ratio: 1 / 1;
    width: 100%;
    height:auto;
    filter: brightness(1) saturate(1); 
}

/* Hover effect for nav menu icon */
header>#navMenuContainer:hover svg {
    filter: brightness(1.35) saturate(1.35); 
}

/* Embiggen the nav menu container while it's hovered. This may not actually be necessary but it's harmless*/
header>#navMenuContainer:hover {
    height: 270px;
}

/* This targets only the Jelly Belly logo on the header. Sizes it and moves it a little away from the edge */
header>img {
    height:60px;
    width: auto;
    margin: 0 10px;
}

/* Main, where most of the page lives. Column flexbox. */
main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
}

/* My Masthead is a fixed-height column flexbox. It scales somewhat to the width of the page. It has a background gradient.
Over top of the background but behind the logo, I'm generating a bunch of jellybeans in javascript, then raining them down */
#masthead {
    margin-top: 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(600px + calc(0.15 * calc(100dvw - 600px)));
    min-height: 600px;
    max-width: 100%;
    background: rgb(248,254,255);
    background: radial-gradient(circle, rgba(248,254,255,1) 2%, rgba(224,250,255,1) 33%, rgba(198,244,255,1) 68%, rgba(164,238,255,1) 94%, rgba(209,247,255,1) 100%);    
    overflow: hidden;
}

/* Absolute position for both the masthead logo and the beans I'm going to generate in JS */
#masthead img {
    position: absolute;
}

/* Falling beans. I'm doing as much to them as I can in CSS, including setting their size and initial position.
I also set their transition properties using cubic beziers to simulate the physics of them falling */
/* Note that the JS simply generates the beans, assigns them a "left" value, waits for them to be positioned by CSS behind the header,
And then changes their top value to something below the masthead. My tansition does the rest. */
.beanImg {
    width: 85px;
    top: -100px;
    /* Thanks, cubic-bezier.com ! */
    transition: top 2s cubic-bezier(.41,.19,1,.84), transform 2.5s cubic-bezier(.12,.45,.4,.85);
}

/* Logo gets a size, min and max size, gets raised above the beans falling behind it, and gets a tiny tweak to margin */
#mastheadLogo {
    width: 40%;
    height: auto;
    max-width: 375px;
    min-width: 150px;
    z-index: 2;
    margin-left: 1%;
}

/* This is where all the "Content" of the page goes, including call to action and text copy. Column flexbox, with a gradient background. */
main>section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    z-index: 2;
    background: rgb(75,148,234);
    background: linear-gradient(0deg, rgba(75,148,234,1) 20%, rgba(62,97,229,1) 65%, rgba(28,63,218,1) 97%);
    margin-bottom: 100px;
}

/* This is my call to action. A grid might have worked but I still prefer flexbox. It has a max width to avoid getting too distended on large screens. */
#buyNow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1080px;
}

/* Rows of my call to action. Note how it's justified. */
.buyNowRow {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

/* The middle row gets margin to let the whole thing breathe. It's also justified differently. The overall effect is kind of hexagonal */
#buyNow .buyNowRow:nth-of-type(2) {
    margin: 3% 0;
    justify-content: center;
}

/* Main heading. Custom font, large type, color and text shadow designed to mimic the jelly belly logo. It also gets a background vaguely reminiscent of a bean */
h1 {
    font-family: "Kool Beans", serif;
    font-size: 2.8rem;
    text-align: center;
    color: #fff200;
    text-shadow: 8px 6px 0px black, 2px -2px 0px black, -2px -2px black, -2px 2px black;
    background-color: #ed1c24;
    padding: 0.25em 1em;
    border-radius: 50%;
}

/* My h2's are section headers, more or less. Similar to the H1, but differently colored (closer to the logo). I'm giving them a shadow too to make them pop */
h2 {
    font-family: "Kool Beans", serif;
    font-size: 2.5rem;
    color: #ed1c24;
    text-shadow: 4px -3px 0px #fff200, 12px -7px 2px rgba(72, 72, 72, 0.477);
}

/* This specific H2 gets stuck in a block and resized to fit in my call to action */
#buyNow h2 {
    display: block;
    width: 50%;
    min-width: 200px;
    text-align: center;
    padding: 0px;
    margin: -50% 0;
    padding: 0px 2%;
}

/* The links in my call to action. They get a size that's responsive in a bounded way, gradient background, fixed aspect ratio, a border, border radius. They're flex boxes to center the content within them. */
#buyNow a {
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    width: 30%;
    min-width: 100px;
    max-width: 200px;
    background: radial-gradient(circle, rgba(248,254,255,1) 2%, rgba(224,250,255,1) 33%, rgba(198,244,255,1) 68%, rgba(164,238,255,1) 94%, rgba(209,247,255,1) 100%);    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
    border: 1px solid black;
    filter: drop-shadow(0 0 0.2rem rgb(66, 66, 66))
}

/* color change effect on hover. It's a bit loud actually, oh well */
#buyNow a:hover {
    background: #fff200;
    border: 3px solid #ed1c24;
}

/* The link images are resized to cover most, but not all of their containing link block. They have a background to cover the small alpha cutout in each. */
#buyNow a img {
    width: 90%;
    height: auto;
    border-radius: 10%;
    background-color: whitesmoke;
}

/* This section has all the text of my page. It has top and bottom margins to give it some space. With 90% is so the text isn't right up against the sides of the window. */
#textCopy {
    margin-top: 75px;
    width: 90%;
    text-align: center;
    margin-bottom: 150px;
}

/* Different custom font. A bit of spacing and line-height to let the letters breathe.*/
#textCopy p{
    color: whitesmoke;
    font-family: "Madimi One", sans-serif;
    letter-spacing: 0.04em;
    line-height: 1.5em;
}

/* Footer is an absolutely positioned vertical flexbox at the bottom of the page. It has a gradient that mirrors the header, inverted. */
/* Contact form in the footer kind of threw a wrench in my design, here's my attempt to work around it. I made this flexbox vertical,
and filled it with two horizontal rows, one of which is hidden unless the width gets small */
footer {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 100%;
    bottom: 0px;
    background: rgb(75,148,234);
    background: linear-gradient(0deg, rgba(75,148,234,1) 20%, rgba(62,97,229,1) 65%, rgba(28,63,218,1) 97%);
    z-index: 2;
    flex-wrap: wrap;
}
/* Teensy footer logo */
footer img {
    width: 50px;
    height: auto;
    margin: 0 20px 0 15px;
}

/* This structures the two rows of the footer */
footer>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* This second row is centered and invisible by default */
footer>div:nth-of-type(2) {
    justify-content: center;
    display: none;
}

/* These are my footer nav list, and my copyright info. They each max at 40% of the page to keep some space between them. */
footer ul, footer>div>div {
    display: flex;
    flex-direction: column;
    list-style: none;
    max-width: 40%;
}

/* Adjustment of the footer nav padding */
footer ul {
    padding-left: 15px;
}

/* Copyright info is center aligned */
footer>div>div {
    align-items: center;
}

/* Copyright info text is small and matches my paragraph text otherwise. */
footer small {
    margin-right: 10px;
    font-size: 0.7em;
    color: whitesmoke;
    font-family: "Madimi One", sans-serif;
    letter-spacing: 0.04em;
    line-height: 1.5em;
}

/* These will be the links in my footer nav. I'm giving them styling similar to my H2s but smaller */
footer a {
    font-family: "Kool Beans", serif;
    font-size: 1rem;
    color: #fff200;
    text-shadow: 4px -3px 0px #ed1c24;
    text-decoration: none;
}

/* Contact form for the bottom of the page. Remembered this at the last minute */
form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 10px;
}

/* Legend matches my paragraph and copyright text. Some positioning adjustments */
legend{
    font-size: 0.7em;
    color: whitesmoke;
    font-family: "Madimi One", sans-serif;
    letter-spacing: 0.04em;
    margin-bottom: -10px;
    padding-top: 10px;
}

/* Textarea for comment. It's a bit small so the text is small too */
textarea {
    height: 70px;
    width: 175px;
    font-size: 0.5em;
    color: black;
    font-family: "Madimi One", sans-serif;
    letter-spacing: 0.03em;
}

button {
    font-size: 0.5em;
    color: black;
    background-color: whitesmoke;
    border-radius: 8px;
    font-family: "Madimi One", sans-serif;
    letter-spacing: 0.03em;
    display: block;
    margin-top: 10px;
}

fieldset {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border: none;
    padding: 15px 0;
}


/* This is just where all my links redirect to. The margin-top prevents the header from covering the content */
main.underConstruction {
    margin-top: 70px;
}

/* This allows my sparse under-construction page to still fill its vertical flexbox */
main.underConstruction>section {
    flex-grow: 1;
}

/* Media queries. They primarily deal with the call to action, which doesn't fit well on small screens */

@media (max-width: 850px) {
    #buyNow h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 750px) {
    #buyNow h2 {
        font-size: 1.9rem;
    }
}

@media (max-width: 650px) {
    #buyNow h2 {
        width: 30%;
        padding: 0 2%
    }
    #buyNow .buyNowRow:nth-of-type(2) {
        margin: 10% 0;
    }
    .beanImg {
        width: 65px;
    }
}

@media (max-width: 550px) {
    #buyNow h2 {
        font-size: 1.4rem;
        min-width: 100px;
    }
}

/* At the smallest sizes, I remove the call-to-action header altogether and let the links speak for themselves. */

@media (max-width: 460px) {
    #buyNow h2 {
        display: none;
    }
    #buyNow .buyNowRow:nth-of-type(2) {
        justify-content: space-around;
    }
    .beanImg {
        width: 60px;
    }
    /* If the screen is this small, show the second row of the footer and move the copyright info there */
    footer>div>div {
        display: none;
    }
    footer>div:nth-of-type(2){
        display: flex;
    }
}

/* This one, though, deals with smaller screen heights. Basically just shrinking the header, then adjusting anything that needs to be adjusted to match */
@media (max-height: 450px) {
    header {
        height: 50px;
    }
    /* Nav menu container adjusted */
    header>#navMenuContainer {
        position: absolute;
        top: 5px;
        width: 40px;
        height: 40px;
    }
    /* Menu beans adjusted */
    header>#navMenuContainer:hover li {
        top: 50px;
    }
    header>#navMenuContainer:hover>menu>li:nth-of-type(2){
        top: 100px;
    }
    header>#navMenuContainer:hover>menu>li:nth-of-type(3){
        top: 150px;
    }
    header>#navMenuContainer:hover>menu>li:nth-of-type(4){
        top: 200px;
    }
    /* Adjust header logo */
    header>img {
        height:40px;
        width: auto;
        margin: 0 10px;
    }
    /* Shrink masthead */
    #masthead {
        margin-top: 50px;
        min-height: 450px;
        height: 450px;
    }
    /* Shrink falling beans */
    .beanImg {
        width: 60px;
    }
    /* Push masthead logo up to make it visible on page load */
    #mastheadLogo {
        margin-bottom: 75px;
    }

    main.underConstruction {
        margin-top: 50px;
    }
}