button {
    cursor: url(/images/pointer.png), pointer;
}

button.diri {
    color: var(--white);
    box-sizing: border-box;
    width: 100%;
    font-size: 18px;
    letter-spacing: 0;
    background-color: var(--yellow);
    border: none;
    padding: 8px;
    margin: 0 1%;
    font-family: 'GaeguLight';
}

.directory {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    height: fit-content;
}
.galleryitem img {margin:2px;max-width: 100%;height:auto;}
.galleryitem {text-align:center;padding:5px;}
gal {display: flex; flex-wrap: wrap;}


section {
    display: block!important;
}

section.art {
    background-color: var(--pink_dark);
  }
  

#artgal summary {
    background-color: var(--wrinklingoak);
    padding: 14px;
    margin: 6px;
    border-radius: 4px;
    font-size: 20px;
    min-width: 100px;
}
#artgal ul {
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}


@media screen and (max-width: 799px) {
    .gallery {
        column-count: 2;
        column-gap: 5px;
      }
    section.art {
        padding: 20px;
        margin: 5px 10px;
    }
    container {
        padding: 5px 0;
    }

}

@media screen and (min-width: 800px) {
    .gallery {
        column-count: 3;
        column-gap: 10px;
    }
    section.art {
        padding: 40px;
    }
}

@media (prefers-color-scheme: dark) {
    section.art {background-color: var(--cyan_dark);}
    button.diri {background-color: var(--yellow_dark);}
}