body {
    background-image: radial-gradient(beige, tan);
    font-family: "Fredoka", sans-serif;
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Bowlby One SC", sans-serif;
}

/* -------------------------------------- */

img {
  animation: banana-wiggle 5s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes banana-wiggle {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* -------------------------------------- */

#header {
    padding-bottom: 10px;
}

#nav-bar {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: linear-gradient(
        lightgreen,
        lightgreen,
        lightgreen,
        #F5F5DC00
    );
    justify-content: center;
    align-items: center;
}

/* Banana logo */
#link-main {
    flex: 0 0 100%;
    text-align: center;
    padding: 10px;
}

/* Each 1/3 section */
.nav-button {
    flex: 0 0 33.333%;
    display: flex;
    justify-content: center;
}

/* Buttons */
.nav-link:not(#link-main) {
    width: 140px;
    box-sizing: border-box;

    padding: 10px 15px;
    margin: 5px;

    text-align: center;

    color: #4b3b16;
    text-decoration: none;
    font-family: "Bowlby One SC", sans-serif;
    font-size: 14px;

    background-color: #f5c518;
    border: 3px solid #d4a900;
    border-radius: 25px;

    box-shadow: 0 4px 0 #a47d00;

    transition: all 0.15s ease;
}

.nav-link:not(#link-main):hover {
    background-color: #ffda33;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #a47d00;
}

.nav-link:not(#link-main):active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #a47d00;
}

/* -------------------------------------- */

#info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#info-text {
    padding: 0px 20px;
}

.info-card {
    width: 800px;
    max-width: 90%;
    box-sizing: border-box;
    margin: 10px 20px;
    padding: 15px 20px;

    background: linear-gradient(
        135deg,
        #fff3a3,
        #f5c518
    );

    border: 4px solid #8f9f22;
    border-radius: 18px;

    box-shadow: 0 6px 0 #6f7a19;

    color: #4b3b16;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-card:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 0 10px 0 #6f7a19;
}

.info-card h5 {
    margin: 0 0 8px 0;

    color: #4b3b16;
    font-size: 16px;
    text-align: center;

    border-bottom: 3px solid #8f9f22;
    padding-bottom: 8px;
}

.info-card p {
    margin: 5px 0;
    line-height: 1.5;
}

/* -------------------------------------- */

.film {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.motto {
    width: 100%;
    text-align: center;
}

.film iframe {
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

/* -------------------------------------- */

.signup {
    padding-bottom: 30px;
    text-align: center;
}

#email {
    width: 280px;
    padding: 12px 18px;
    box-sizing: border-box;

    background-color: #fff8d6;
    border: 3px solid #9acd32;
    border-radius: 25px;

    font-family: "Fredoka", sans-serif;
    font-size: 16px;
    color: #4b3b16;

    outline: none;
    box-shadow: 0 4px 0 #d6b84c;

    transition: all 0.2s ease;
}

#email::placeholder {
    color: #a89562;
}

#email:focus {
    border-color: #e6b800;
    background-color: #fffbe8;
    box-shadow: 0 4px 0 #e6b800;
    transform: translateY(-2px);
}

#submit {
    margin-top: 12px;
    padding: 10px 30px;

    background-color: #f5c518;
    border: 3px solid #d4a900;
    border-radius: 25px;

    font-family: "Fredoka", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #4b3b16;

    cursor: pointer;
    box-shadow: 0 4px 0 #a47d00;
    transition: all 0.15s ease;
}

#submit:hover {
    background-color: #ffda33;
    transform: translateY(-2px);
}

#submit:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #a47d00;
}

/* Receives the real form POST so the page never navigates away */
.submit-frame {
    width: 0;
    height: 0;
    border: 0;
    position: absolute;
}

/* -------------------------------------- */

.banana-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    text-decoration: none;
    cursor: pointer;
}

.banana-overlay-img {
    width: 60px;
    height: 60px;
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
    animation: none;
}

#submit:focus ~ .banana-overlay {
    pointer-events: auto;
    animation: banana-overlay-flash 3s ease-in-out forwards;
}

#submit:focus ~ .banana-overlay .banana-overlay-img {
    animation:
        banana-overlay-drop 3s ease-in forwards,
        banana-overlay-spin 2.25s linear 0.75s forwards,
        banana-overlay-grow 3s ease-in-out forwards;
}

/* Falls in from above the viewport before settling in the center */
@keyframes banana-overlay-drop {
    0%   { translate: 0 -120vh; }
    25%  { translate: 0 0; }
    100% { translate: 0 0; }
}

@keyframes banana-overlay-flash {
    0%   { opacity: 0; background-color: transparent; }
    5%   { opacity: 1; background-color: transparent; }
    50%  { opacity: 1; background-color: transparent; }
    65%  { opacity: 1; background-color: #f5c518; }
    88%  { opacity: 1; background-color: #f5c518; }
    100% { opacity: 0; background-color: transparent; }
}

/* Rotation is its own linear animation so the spin never eases to a stop mid-turn */
@keyframes banana-overlay-spin {
    from { rotate: 0deg; }
    to   { rotate: 1440deg; }
}

@keyframes banana-overlay-grow {
    0%   { scale: 1; }
    60%  { scale: 40; }
    88%  { scale: 60; }
    100% { scale: 1; }
}

/* -------------------------------------- */

@media (max-width: 600px) {
    .nav-button {
        flex: 0 0 100%;
        justify-content: center;
    }

    .nav-link:not(#link-main) {
        width: 180px;
    }
}