/* General Styles */
body {
    margin: .5rem;
     font-size:1rem;
  font-family: Work Sans, Lato, Arial, Helvetica, sans-serif;
 color:#222;
}

p { 
    font-size: 1.1rem;
    font-weight:400;
}

dd {margin-top:1rem;}
dt {background-color:beige;margin-top:1rem;}

h1 { padding-top:2rem;
    font-weight: 350;
font-size: 3rem;
font-family: "Alex Brush";
text-align:center;
color: #006400;
margin-top:0rem;
line-height:70%;
position:relative;
}

 

h2  {font-size:1rem;  
text-align:center; 
color: green;   
margin-top:0;
 margin-bottom:.5rem;
 font-weight:normal;
}


h3 {font-size:1rem;
font-weight:bold;
margin-top:1.1rem;}
  


/* Header Section */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1.25rem;
    background-color: #fff;
    border-bottom: 0.0625rem solid #ccc;
    position: relative;
}

.header a {
  color: blue;
  text-align: center;
  padding: .5rem;
  text-decoration: none;
  font-size: 1.2rem;
}

.menu a:hover {
  background: #f1f1f1;
  color: green;
} 

.here { 
    background-color:lightblue; 
 
}



/* cross-top Menu */


.menu {
    list-style-type: none;
    float: right;
    white-space:nowrap;
    margin: 0;
    padding: 0;
  gap: 1.25rem;
    align-items: center;
}

.menu li {
    display: inline-block;
    margin-bottom:2rem;
}

.menu a {
    text-decoration: none;
    font-size: 1rem;
    color: blue;
    transition: color 0.3s;
}

.menu a:hover {
    color: green;
}

.cart img {
      width: 6.25rem;
    height: auto;
    vertical-align: text-bottom;
}

/* Hamburger Menu */
.menu-btn {
    display: none;
}

.menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 0.3125rem;
    position: absolute;
    top: 0.625rem;
    right: 1.25rem;
}

.menu-icon span {
    display: block;
    width: 1.5625rem;
    height: 0.1875rem;
    background-color: #000;
}


.bigwrapper 
{max-width:1040px; 
width:100%;
margin-left:auto; 
margin-right:auto;}




.cent {
   text-align:center;
    clear:both;
}
/* other stuff  */
 .distinctive {font-style:italic;}

.caption {font-size:1rem; text-align:center;margin-bottom:1.5rem;margin-top:.3rem;}

.ball2 li {margin-top:.5rem;}
/* =================================*/

@media (min-width: 841px) {
    .narrow {display:none;
    }
    
   p {font-size:1.2rem;
    }
    
.logo img {
    width: 30%; /* Increase logo width for wide screens */
     height: auto;  }

h2 { font-size:1rem; margin-top:0;}
.x { font-size:4vw;   font-family:"Alex Brush", cursive;   margin-bottom:2rem;line-height:65%;   }
.y {font-size:3vw; color:#006400;margin-top:.5rem;}
.z {font-size:.7rem;}
.caption {font-size:.8rem; text-align:center; margin-bottom: 1.5rem; margin-top:.3rem;}
}

/* ------------------------------Responsive Styles -- less than 840------------------- */
 
@media (max-width: 840px) {
    
      .wide {display:none;
    }
    
.logo img {
    width: 40%;  
     height: auto;
}
 
    .menu a {
        font-size: 1.125rem; /* Make text larger */
    }

    .cart img {
        width: 7rem; /* Increase the cart image size */
    }

    .header {
        justify-content: space-between;
    }

    .menu {
        display: none;
        flex-direction: column;
        background-color: #fff;
        position: absolute;
        top: 3.75rem;
        right: 1.25rem;
        width: 12.5rem;
        border: 0.0625rem solid #ccc;
        box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    }

    .menu-btn:checked + .menu-icon + nav .menu {
        display: flex;
    }

    .menu-icon {
        display: flex;
    }

    

    .cart img {
        width: 8rem;
    }
    
li {font-size:.8rem;}

h3 {font-size:.8rem;
font-weight:bold;
margin-top:1.1rem;}
  

h2 {font-size:1rem;}
.x { font-size:7.5vw;   font-family:"Alex Brush", cursive; font-weight:400;  margin-bottom:2rem;line-height:65%;   }
.y {font-size:3vw; color:#006400;margin-top:.5rem;}
.z {font-size:.7rem;}

.caption {font-size:.8rem; text-align:center;margin-bottom:1.5rem;margin-top:.3rem;}
 


 p {font-weight:400;
 font-size:.9rem;}
  
}