/*Overall Rules*/
    :root {
        /* color palette */
        --color-primary: rgb(38, 82, 20);
        --color-secondary:#f1c232ff;
        --color-accent1: #000000ff;
        --color-accent2: #ff9900ff;
        --color-accent3: rgb(255, 213, 0);
        --color-accent4: #ffffffff;
        --color-accent5: rgb(143, 143, 143);
        --color-accent6: rgb(76, 116, 60);

        --postit-color1: #ffb6b9; /* pastel pink */
        --postit-color2: #ffa07a; /* pastel salmon */
        --postit-color3: #ffd700; /* pastel gold */
        --postit-color4: #98fb98; /* pastel green */
        --postit-color5: #add8e6; /* pastel blue */
        --postit-color6: #d8bfd8; /* pastel purple */

        --color-gradient: linear-gradient(to right, var(--color-accent2), var(--color-accent2), var(--color-accent3));

        --border-color-gradient: linear-gradient(to right, var(--color-accent2), var(--color-accent2), var(--color-accent3)) 1;

        /*shadows*/
        --box-shadow: 0 3px 6px rgba(0,0,0,0.4), 0 3px 6px rgba(0,0,0,0.5);
        --text-shadow: 0 3px 6px rgba(0,0,0,0.4), 0 3px 6px rgba(0,0,0,0.5);
        --box-shadow-inverted: inset 0 3px 6px rgba(0, 0, 0, 0.56), inset 0 3px 6px rgba(0, 0, 0, 0.73);

        /*fonts*/
        --font-heading: 'Syncopate', sans-serif;
        --font-subheading: 'Roboto', sans-serif;
        --font-paragraph: 'Roboto', sans-serif;
        --font-card-heading: 'Fredericka the Great', cursive;
        --font-card-paragraph: 'Walter Turncoat', cursive;
        --font-postit-paragraph: 'Reenie Beanie', cursive;
    }
/*body*/
    body {
        position: relative;
        text-shadow: var(--text-shadow);
        font-family: var(--font-paragraph);
        font-size: 2rem;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        width: 100%;
        margin: 0;
        background-color: var(--color-accent5);
        color: var(--color-accent2);
    }
    a {
        color: var(--color-accent2);
        text-decoration: none;
    }
    h1 {
        font-size: 1rem;
        font-family: var(--font-heading);
        color: var(--color-accent3);
    }
    hr {
        width: 100%;
        height: 6px;
        margin-bottom: 0;
        margin-top: 0;
        background: var(--color-gradient);
        border-image: var(--color-gradient);
        box-shadow: var(--box-shadow);
      }
    h2 {
        font-size: 2rem;
        color: var(--color-accent2);
    }
    h3 {
        font-size: 1rem;
        font-family: var(--font-paragraph);
    }
    h4 {
        font-size: 1rem;
        font-family: var(--font-paragraph);
        color: var(--color-secondary);
        font-weight: lighter;
        font-style: italic;
        margin-top: auto;
    }
    ul {
        margin-top: 15px;
        margin-bottom: 15px;
        text-align: left;
        list-style: none;
    }
    li {
        margin-top: 25px;
        margin-bottom: 25px;
    }
    li .active {
        text-decoration: underline;
    }
    li a:hover {
        color: var(--color-accent3);
    }
    .horizontal-display {
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items: center;
        justify-content: center;
    }
    .virtical-display {
        display: flex;
        flex-direction: column;
    }
    .footer-contact-info img {
        height: 15px;
    }
    button:focus,
    a:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
    }
    img {
        width: 100%;
        display: block;
        object-position: center;
        object-fit: cover;
    }
    .blur-load::before {
        content: "";
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        filter: blur(5px);
        animation: pulse 2s infinite;
    }
    .blur-load.loaded::before {
        content: none;
    }
    
    @keyframes pulse {
        0% {
            background-color: rgba(255, 255, 255, 0);
        }
        50% {
            background-color: rgba(255, 255, 255, 0.1);
        }
        100% {
            background-color: rgba(255, 255, 255, 0);
        }
    }
    .blur-load {
        position: relative;
        background-size: cover;
        background-position: center;
    }
    img.loaded, .blur-load.loaded img{
        opacity: 1;
    }
    .blur-load img {
        opacity: 0;
        transition: opacity 200ms ease-in-out;
    }
/* Header/Footer Design*/
    header, footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .title-block {
        background-color: var(--color-accent1);
        width: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    footer {
        background-color: var(--color-primary);
        font-size: 1rem;
    }
    footer img {
        margin-top: 25px;
        margin-left: -20px;
    }
    footer .last-modified {
        color: var(--color-accent3);
    }
    footer p {
        color: var(--color-accent3);
        font-weight: bold;
    }
    footer {
        margin-top: -250px;
    }
    .footer-up {
        margin-top: 0px;
    }
    .footer-display a img {
        width: 100px;
        margin-left: 50px;
    }
    /*Scroll Up Button*/
    #scrollToTopBtn {
        position: fixed;
        bottom: 10px;
        right: -10px;
        background-color: rgba(0,0,0,0.0);
        border: none;
        border-radius: 50px;
        cursor: pointer;
        line-height: 48px;
        padding: 10px;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
      }
      #scrollToTopBtn.show {
        opacity: 1;
      }

      #scrollToTopBtn img {
        width: 70px;
        height: auto;
      }
      #scrollToTopBtn:hover {
        transform: scale(1.2);
      }
    /*Navigation*/
    /*Nav Background*/
    nav {
        display: flex;
        flex-direction: column;
        justify-content: left;
        text-align: left;
        width: 100%;
      }
    .button-bar {
        background-color: var(--color-primary);
        box-shadow: var(--box-shadow-inverted);
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .button-bar-title {
        width: 100%;
    }
    /*hamburger*/
    .hamburger {
        margin: 25px;
        width: 55px;
        height: 25px;
        position: relative;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    .hamburger:hover {
        transform: scale(1.2);
    }
    .line {
        display: block;
        width: 100%;
        height: 5px;
        background-color: var(--color-accent2);
        box-shadow: var(--box-shadow);
        position: absolute;
        transition: transform 0.7s ease;
    }
    .hamburger.arrive .line:first-child {
        transform: rotate(45deg);
        top: 43%;
    }
    .hamburger.arrive .line:last-child {
        transform: rotate(-45deg);
        bottom: 43%;
    }
    .hamburger .line:first-child {
        top: 0;
    }
    .hamburger .line:last-child {
        bottom: 0;
    }
    .hamburger.active .line:first-child {
        transform: rotate(45deg);
        top: 43%;
    }
    .hamburger.active .line:last-child {
        transform: rotate(-45deg);
        bottom: 43%;
    }
    .nav-closed {
        z-index: 1;
        display: none;
        margin-top: -6px;
        margin-bottom: -6px;
        width: 97%;
        background-color: var(--color-primary);
        border-width: 6px;
        border-style: solid;
        border-image: var(--border-color-gradient);
        display: flex;
        transform: translateX(-101%);
        transition: transform 0.7s ease;
        box-shadow: var(--box-shadow-inverted), var(--box-shadow);
    }
    .nav-open {
        display: flex;
        transform: translateX(0%);
        
    }
     /*Social media div*/
     .social-icons ul {
        display: flex;
        margin-left: -20px;
    }
    .social-icons ul li a img{
        margin-top: 10px;
        margin-right: 10px;
        cursor: pointer;
        transition: transform 0.4s ease;
    }
    .social-icons ul li a img:hover{
        transform: scale(1.1);
    }
    /*Shoping Cart*/
    .shoping-cart {
        width: 55px;
        margin-left: 25px;
        margin-top: 10px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    .shoping-cart:hover {
        transform: scale(1.2);
    }
/*Main Section*/
    main {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 25px;
        margin-bottom: 25px;
        transform: translateY(-250px);
        transition: transform 0.7s ease;
    }
    .main-up {
        transform: translateY(0%);
    }
/*Cards*/    
    .card {
        position: relative;
        text-align: center;
        margin-bottom: 20px;
        background-color: var(--color-primary);
        background-image: url('../images/chalkboard.png');
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: center;
        border-width: 6px;
        border-style: solid;
        border-image: var(--border-color-gradient);
        box-shadow: var(--box-shadow-inverted), var(--box-shadow);
        width: 85%;
        padding-left: 25px;
        padding-right: 20px;
    }
    .card h1 {
        font-family: var(--font-card-heading);
        color: var(--color-accent4);
        font-weight: 400;
        font-size: 3.2rem;
        text-shadow: none;
    }
    .card h2 {
        font-family: var(--font-card-heading);
        color: var(--color-accent4);
        font-weight: 400;
        font-size: 3rem;
        text-align: left;
        text-shadow: none;
    }
    .card h3 {
        font-family: var(--font-card-heading);
        color: var(--color-accent4);
        font-weight: 400;
        font-size: 2rem;
        text-align: left;
        text-shadow: none;
    }
    .card p {
        color: var(--color-accent4);
        text-shadow: none;
        font-size: 1.5rem;
        font-family: var(--font-card-paragraph);
        text-align: left;
    }
/*Postits*/ 
    .postit1, .postit2, .postit3, .postit4, .postit5, .postit6 {
        margin: 15px;
        text-shadow: none;
        font-family: var(--font-postit-paragraph);
        color: var(--color-accent1);
        width: 140px;
        height: 140px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        box-shadow: 3px 10px 5px rgba(0, 0, 0, 0.6);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    .postit1 p, .postit2 p, .postit3 p, .postit4 p, .postit5 p, .postit6 p {
        font-family: var(--font-postit-paragraph);
        color: var(--color-accent1);
        margin: 0 auto;
        font-weight: bold;
    }
    .postit1 a, .postit2 a, .postit3 a, .postit4 a, .postit5 a, .postit6 a {
        color: var(--color-accent1);
        font-family: var(--font-postit-paragraph);
        margin: 0 auto;
        font-size: 1.5rem;
        font-weight: bold;
    }
    .postit1 label, .postit2 label, .postit3 label, .postit4 label, .postit5 label, .postit6 label {
        color: var(--color-accent1);
        font-family: var(--font-postit-paragraph);
        margin: 0px;
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: underline;
    }
    .postit1 h1, .postit2 h1, .postit3 h1, .postit4 h1, .postit5 h1, .postit6 h1 {
        position: relative;
        color: var(--color-accent1);
        font-family: var(--font-postit-paragraph);
        margin: 0px;
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: underline;
    }
    .postit1 h2, .postit2 h2, .postit3 h2, .postit4 h2, .postit5 h2, .postit6 h2 {
        position: relative;
        color: var(--color-accent1);
        font-family: var(--font-postit-paragraph);
        margin: 0px;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 1.1rem;
        font-weight: bold;
    }
    .postit1 h3, .postit2 h3, .postit3 h3, .postit4 h3, .postit5 h3, .postit6 h3 {
        position: relative;
        color: var(--color-accent1);
        font-family: var(--font-postit-paragraph);
        margin: 0px;
        font-size: 1rem;
        font-weight: bold;
    }
    .postit1 a:hover, .postit2 a:hover, .postit3 a:hover, .postit4 a:hover, .postit5 a:hover, .postit6 a:hover {
        color: blue;
    }
      .postit1:hover, .postit2:hover, .postit3:hover, .postit4:hover, .postit5:hover, .postit6:hover {
        transform: scale(1.05) rotate(0deg);
        box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.3);
    }
      .postit1 {
        margin-left: 45px;
        background-color: var(--postit-color5);
        transform: rotate(-3deg);
    }
      .postit2 {
        margin-left: 65px;
        background-color: var(--postit-color1);
        transform: rotate(5deg);
    }
      .postit3 {
        margin-left: 15px;
        background-color: var(--postit-color3);
        transform: rotate(-2deg);
    }
      .postit4 {
        margin-left: 95px;
        background-color: var(--postit-color6);
        transform: rotate(2deg);
    }
      .postit5 {
        margin-left: 75px;
        background-color: var(--postit-color2);
        transform: rotate(-4deg);
    }
      .postit6 {
        margin-left: 25px;
        background-color: var(--postit-color4);
        transform: rotate(3deg);
    }
    .postit1 input,
    .postit2 input,
    .postit3 input,
    .postit4 input,
    .postit5 input,
    .postit6 input,
    .postit1 textarea,
    .postit2 textarea,
    .postit3 textarea,
    .postit4 textarea,
    .postit5 textarea,
    .postit6 textarea {
      font-family: var(--font-postit-paragraph);
      font-size: 1.5rem;
      color: var(--color-accent1);
      background-color: transparent;
      margin: 0 auto;
      width: 100%;
      max-width: 130px;
      height: 130px;
      outline: none;
      border: 1px dashed;
      margin-bottom: 5px;
      margin-top: 20px;
    }
    .postit1 input::placeholder,
    .postit2 input::placeholder,
    .postit3 input::placeholder,
    .postit4 input::placeholder,
    .postit5 input::placeholder,
    .postit6 input::placeholder,
    .postit1 textarea::placeholder,
    .postit2 textarea::placeholder,
    .postit3 textarea::placeholder,
    .postit4 textarea::placeholder,
    .postit5 textarea::placeholder,
    .postit6 textarea::placeholder {
      color: var(--color-accent1);
      opacity: 0.5;
    }

    .stacked {
        margin-bottom: -130px;
        margin-left: 60px;
        transition: .4s all ease-in-out;
    }
    .unstacked {
        margin-bottom: 0px;
        margin-left: 50px;
        transition: .4s all ease-in-out;
        z-index: 2;
    }
    .mixes-container .unstacked:hover {
        transform: scale(1.5);
        transition: transform 1s, box-shadow 0.1s;
    }
    #mixes {
        padding-bottom: 150px;
    }
    .postit-top {
        display: flex;
    }
    .add {
        float: right;
        height: 5px;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid;
        border-left: 1px solid;
        border-color: var(--color-accent1);
        color: var(--color-accent1);
        padding-bottom: 35px;
        font-size: 15px;
        transition: .4s all ease-in-out;
        cursor: pointer;
        margin-left: 20px;
    }
    .add:hover {
        transform: scale(1.2);
    }
/*Polaroids*/ 
      .polaroid1, .polaroid2, .polaroid3 {
        margin: 25px;
        text-shadow: none;
        font-family: var(--font-postit-paragraph);
        color: var(--color-accent1);
        width: 220px;
        height: auto;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        box-shadow: 3px 10px 5px rgba(0, 0, 0, 0.6);
        transition: transform 0.7s, box-shadow 0.7s;
    }
    .polaroid1 .blur-load, .polaroid2 .blur-load, .polaroid3 .blur-load {
        width:98%;
        margin-bottom: 30px;
      }
      .polaroid1 img, .polaroid2 img, .polaroid3 img {
        width: 100%;
        display: block;
        object-position: center;
        object-fit: cover;
    }
      .polaroid1:hover, .polaroid2:hover, .polaroid3:hover {
        transform: scale(1.3) rotate(0deg);
        box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.3);
    }
      .polaroid1 {
        margin-left: 45px;
        background-color: var(--color-accent4);
        transform: rotate(3deg);
    }
      .polaroid2 {
        margin-left: 20px;
        background-color: var(--color-accent4);
        transform: rotate(1deg);
    }
      .polaroid3 {
        margin-left: -10px;
        background-color: var(--color-accent4);
        transform: rotate(-3deg);
    }
    /*Picture Frame*/
    .picture-frame{
        width: 70%;
        height: auto;
        margin: 20px;
        margin-top: 10px;
        background-color: rgb(203, 200, 187);
        border: 35px solid transparent;
        border-image-source: url(../images/picture-frame.jpg);
        border-image-slice: 46 49;
        border-image-repeat: round;
        transition: .4s all ease-in-out;
        box-shadow: var(--box-shadow-inverted), var(--box-shadow);
    }
    .picture-frame img{
        margin-bottom: -7px;
        width: 100%;
    }
    .picture-frame h1 {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.331);
        padding: 2px;
        border-radius: 4px;
        font-size: 1.2rem;
        margin-top: 5px;
        margin-left: 5px;
        z-index: 2;
    }
    .picture-frame:hover {
        transform: rotate(-2deg);
    }

    /*old-map*/
    .old-map{
        width: 65%;
        height: 200px;
        margin: 20px;
        margin-top: 10px;

        border: 35px solid transparent;
        border-image-source: url(../images/old-map-frame.jpg);
        border-image-slice: 46 49;
        border-image-repeat: round;
        transition: transform 0.8s, box-shadow 0.8s;
        box-shadow: var(--box-shadow-inverted), var(--box-shadow);
        box-shadow: 3px 10px 5px rgba(0, 0, 0, 0.6);
    }
    .old-map iframe{
        margin-bottom: -7px;
        width: 100%;
    }
    .old-map h1 {
        position: absolute;
        font-size: 1.2rem;
        margin-top: 5px;
        margin-left: 5px;
    }
    .old-map:hover {
        transform: scale(1.05);
        box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.4);
    }

    /*Chalkboard Button*/
    .chalkboard-button {
        padding-left: 25px;
        text-align: left;
        margin: 20px;
        margin-top: 150px;
        border: none;
        width: 200px;
        height: 120px;
        background-color: transparent;
        background-image: url(../images/chalkboard-button.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: .4s all ease-in-out;
        cursor: pointer;
      }
    
      .chalkboard-button:hover {
        transform: scale(1.1);
      }
      .chalkboard-button:focus {
        transform: translateX(300%) rotate(-30deg);
        transition: 4s;
      }
      .chalkboard-button .upper {
        display: block;
        font-family: var(--font-card-heading);
        color: var(--color-accent4);
        font-size: 1rem;
      }
      .chalkboard-button .lower {
        display: block;
        margin-left: 15px;
        margin-top: 10px;
        margin-bottom: 10px;
        font-family: var(--font-card-heading);
        color: var(--color-accent4);
        font-size: 1rem;
        transform: rotate(-15deg);
      }
    /*Shake Button*/
    .shake-button {
        padding-left: 25px;
        text-align: left;
        margin: 20px;
        border: none;
        width: 100px;
        height: 150px;
        background-color: transparent;
        background-image: url(../images/shake-button.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: .4s all ease-in-out;
        cursor: pointer;
      }
    
      .shake-button:hover {
        transform: scale(1.1);
      }
      .shake-button.animated {
        animation: shake 2s 1;
      }
      .shake-button span {
        display: inline-block;
        margin-top: 80px;
        margin-left: 0px;
        font-family: var(--font-card-paragraph);
        color: var(--color-accent4);
        font-size: 1.1rem;
      }

      /* keyframes for the shaking animation */
    @keyframes shake {
        0% { transform: translateX(0); }
        5% { transform: translateX(-5px) rotate(-30deg); }
        10% { transform: translateX(5px) rotate(30deg); }
        15% { transform: translateX(-5px) rotate(-30deg); }
        20% { transform: translateX(-5px) rotate(-30deg); }
        25% { transform: translateX(5px) rotate(30deg); }
        30% { transform: translateX(-5px) rotate(-30deg); }
        50% { transform: rotate(60deg); }
        70% { transform: translateX(100%) rotate(130deg); }
        90% { transform: translateX(100%) rotate(160deg); }
        100% { transform: translateX(200%) translatey(-200%) rotate(160deg); }
    }

/*fruit mix form*/
.fruit-option, .fruit-item {
    background-color: var(--color-accent6);
    border-color: var(--color-accent4);
    font-family: var(--font-card-heading);
    color: var(--color-accent4);
    width: 90%;
    padding: 10px;
    margin-top: 20px;
  }
  .mix-item, .mix-custom-item {
    background-color: var(--color-accent6);
    border-color: var(--color-accent4);
    font-family: var(--font-card-heading);
    font-size: 25px;
    color: var(--color-accent4);
    width: 90%;
    padding: 10px;
    margin-top: 20px;
  }
  .quantity-input {
    background-color: var(--color-accent6);
    width: 50px;
    border: 1px solid;
    border-color: var(--color-accent4);
    color: var(--color-accent4);
    padding: 5px;
    font-family: var(--font-card-heading);
    justify-content: center;
    text-align: center;
  }
  .order-button {
    margin-right: 50px;
    background-color: transparent;
    width: 100px;
    height: 75px;
    border: none;
    color: var(--color-accent4);
    padding: 15px;
    padding-bottom: 35px;
    font-family: var(--font-card-heading);
    font-size: 25px;
    background-image: url(../images/add-to-cart-button.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: .4s all ease-in-out;
    cursor: pointer;
}
.order-button:hover {
transform: scale(1.2);
}
  /*Fruit Select*/
  .fruit-select {
    margin-top: 150px;
  }
  .fruit-select label, .frozen-mixes label, .individual-fruits label {
    font-family: var(--font-card-paragraph);
    color: var(--color-accent4);
    font-size: 1.5rem;
    text-shadow: none;
  }
  .fruit-select select, .frozen-mixes select, .individual-fruits select {
    margin-top: -0px;
  }
      
/*home page weather*/   
.icon-temp img {
    width: 6rem;
    float: left;
    margin-right: 40px;
}   
.forecast-day img {
    width: 6rem;
    float: left;
    margin-right: 40px;
}