#content {display:flex; flex-wrap:nowrap; width:95%; max-width:1400px; margin:0 auto; background:#fff;}

#columns {margin-bottom: 200px;	padding:40px 10px;}
#columns h4 {font:25px/35px 'Roboto', sans-serif; color:#000;}
#columns p {font:18px/22px 'Roboto', sans-serif; color:#000;}
#columns .listBox p {font: 14px / 22px 'Roboto', sans-serif; color:#000;}

img.now {display:block; max-width:100%; height:auto;}

.listBox {margin-bottom:80px;}
.listBox dl {
    width: 100%;
    margin: 5px auto;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.listBox dd {font:15px/20px 'Roboto', sans-serif; color:#000;
    margin: 0;
    padding: 0 0 0 5px;
    animation-timeline: view();
    animation-name: fadein;
    animation-fill-mode: both;
    animation-duration: 1ms;
    animation-timing-function: linear;
	
    margin-top: 10px;
    border: 1px solid #9c0;
    border-radius: 10px;
    box-shadow: 0 15px 10px -15px rgba(0, 0, 0, 0.4);
    padding: 10px 10px 0 10px;
	background:#f8f8f8;
	transition:0.5s;
}
.listBox dd a {font:18px/24px 'Roboto', sans-serif; color:#080; transition:0.5s; text-decoration:none; padding-left:45px; background-image:url('../images/pickle-icon.png'); background-size: 40px 20px; background-repeat:no-repeat;}
.listBox dd a:hover {color:#000; font-weight:600;}
.listBox dd:has(a:hover) {background:#fff;}

@keyframes fadein {
  0% {opacity:0; transform:translateY(100px);}
  20% {opacity:0.5; transform:translateX(0);}
  75% {opacity:1; transform:translateX(0);}
  100% {opacity:1; transform:translateX(0);}
}


@media only screen and (max-width: 600px) {

#content {flex-wrap:wrap;}
#menu {flex:0 1 100%; padding-bottom:30px;}
#menu a {display:inline-block;margin:0 10px;}
#menu h4 {margin:10px;}

}