body {
    font-size: 24px;
    background-color: #afcfff;
}
p {
    max-width: 72ch;
}
a {
    color: darkblue;
}
nav {
    //background-color: #afcfff;
    //background-image: url("/assets/img/ostraka.jpg");
    //background-repeat: no-repeat;
    // only b/w for legibility:
    //background-blend-mode: luminosity;
    //background-size: cover;
    //opacity: 0.6;
}
nav a, nav ul {
    color: white;
}
nav ul {
    list-style-type: disclosure-open;
}
.toptitle {
    background-image: url(/assets/img/ostraka.jpg);
    background-repeat: no-repeat;
    height: 200px;
    color: white;
    text-shadow: 5px 2px black;
    @media only screen and (max-width: 767px) {
        font-size: 10vw;
    }
    & {
        font-size: 2.8em;
    }
}
.gallery {
    max-width: content;
}
.larger {
    font-size: larger;
}
.xx-large {
    font-size: xx-large;
}
.wrap {
    display: flex;
    max-width: max-content;
}
.wrap1 {
    margin: 0px;
    width: 30%;
}
.wrap2 {
    margin: 0px; /* remove all margins to fit two divs in the container */
    width: 70%;
}
@media (max-width: 767px) {
  .wrap {
    flex-direction: column;
  }
  .wrap1,
  .wrap2 {
    width: auto;
  }
}