@charset "UTF-8";

/* KarenBermanMulligan.com */

:root {
  --site-text-color: #446;
  --site-bg-color: white;
  --site-link-hover-bg-color: lightgrey;
  --dropdown-text-color: var(--site-text-color);
  --dropdown-bg-color: #eee;
  --dropdown-border-color: darkgrey;
  --scroll-button-text-color: white;
  --scroll-button-bg-color: darkgrey;
  --scroll-button-hover-bg-color: grey;
  --image-drop-shadow: drop-shadow(grey 0.25em 0.25em 0.75em);
}

* {
box-sizing: border-box;
}

/* All pages */
body {
  display: flex;
  flex-direction: column;
  align-content: center;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--site-text-color);
  background-color: var(--site-bg-color);
}

a:link {
  color: var(--site-text-color);
  text-decoration: underline;
}
a:visited {
  text-decoration: underline;
  color: var(--site-text-color);
}
a:hover {
  text-decoration: none;
  font-weight: bold;
  background-color: var(--site-link-hover-bg-color);
}
a:active {
  text-decoration: underline;
  color: var(--site-text-color);
}

.contact-header {
  display: none;
}

.rule1 {
  width: 75%;
}

.page-header {
  font-size: 26px;
  letter-spacing: 0.2em;
  padding-top: 1.0em;
  text-align: center;
}

.nav-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  padding-left: 2%;
  padding-right: 2%;
}

.nav-item {
  width: 12em;
  padding: 0.3em 2%;
  text-align: center;
}

.nav-dropdown {
  position: relative;
}

.works-button {
  font: inherit;
  color: var(--dropdown-text-color);
  background-color: var(--dropdown-bg-color);
  padding: 0 1em; /* Wider button */
  cursor: pointer;
  border: solid thin var(--dropdown-border-color);
  border-radius: 3px;
}

.works-content {
  display: none;
  position: absolute;
  z-index: 1000; /* 'Display: none' gives(?) low z-index -- keep on top! */
  color: var(--site-text-color);
  background-color: var(--site-bg-color);
  border: solid thin var(--dropdown-border-color);
  border-radius: 5px;
  padding-left: 1em;
  padding-right: 1em;
}

.works-content a {
  display: block;
}

.works-content a:hover {
  background-color: var(--site-link-hover-bg-color);
}

.nav-dropdown:hover .works-content {
  display: block;
}

.nav-dropdown-item {
  padding: 0.5em 1.0em;
}

.current-nav {
  font-weight: bold;
}

@media screen and (width < 600px) {
  /* Narrow screen (i.e. smart phone) does not get the dropdown "work" button. */
  .nav-bar {
    display: flex;
    flex-direction: column;
    justify-content: left;
  }

  .nav-item {
    padding: 0.2em 0;
    margin-left: 12%;
    text-align: left;
  }

  .nav-dropdown {
    position: revert;
  }

  .nav-dropdown-item {
    padding: 0.2em 0; /* See nav-item, above */
  }

  .works-button {
    display: none;
  }

  .works-content {
    display: block;
    position: revert;
    padding-left: initial;
    padding-right: initial;
    border-style: none;
  }
}

.home-image {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  filter: var(--image-drop-shadow)
}

/* For use with margin-left value in .statement etc below */
outdent-header {
  text-align: left;
  text-indent: -2%;
}

.statement, .biography, .exhibitions, .education {
  text-align: left;
  margin-left: 15%;
  margin-right: 15%;
}

.contact {
  text-align: center;
  margin-left: 15%;
  margin-right: 15%;
  margin-bottom: 1rem;
}

.bio-list-item {
  padding-inline-start: 1rem;
  list-style-type: square;
}

.responsive-column {
  column-count: 2;
  column-gap: 3rem;
}

.first-paragraph {
  margin-top: initial;
}

.first-paragraph::first-letter {
  font-size: 120%;
  font-weight: bold;
}

@media screen and (min-width: 120rem) {
  .responsive-column {
    column-count: 3;
  }
}

@media screen and (max-width: 60rem) {
  .responsive-column {
    column-count: 1;
  }
}

.social {
    background-repeat: no-repeat;
    background-position: 0 3.25px;
    background-size: auto 18px;
    padding-left: 22px;
    padding-top: 5px; /* Fix(?) clipping of Instagram glyph */
    position: relative;
}

.social--instagram {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='1057 788 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1072.884 793.195c0-.596-.483-1.08-1.08-1.08-.595 0-1.08.484-1.08 1.08 0 .596.485 1.08 1.08 1.08.597 0 1.08-.484 1.08-1.08M1067 801c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3m0-7.622c-2.553 0-4.622 2.07-4.622 4.622 0 2.553 2.07 4.622 4.622 4.622 2.553 0 4.622-2.07 4.622-4.622 0-2.553-2.07-4.622-4.622-4.622m0-4.378c-2.444 0-2.75.01-3.71.053-.96.044-1.612.196-2.186.42-.59.23-1.094.537-1.593 1.038-.5.5-.8 1.01-1.03 1.6-.22.58-.37 1.23-.42 2.19-.04.96-.05 1.27-.05 3.71 0 2.45.01 2.75.06 3.71s.2 1.62.42 2.19c.23.59.54 1.1 1.04 1.6s1.01.81 1.6 1.04c.58.22 1.23.38 2.19.42.96.05 1.27.06 3.71.06 2.45 0 2.75-.01 3.71-.054.96-.042 1.62-.194 2.19-.42.59-.23 1.1-.54 1.59-1.04.5-.5.81-1 1.04-1.59.23-.573.38-1.227.42-2.185.05-.96.06-1.264.06-3.71 0-2.444-.01-2.75-.05-3.71s-.2-1.612-.42-2.185c-.23-.59-.54-1.095-1.04-1.594-.5-.5-1-.81-1.59-1.04-.576-.223-1.23-.375-2.19-.42-.96-.042-1.263-.052-3.71-.052m0 1.62c2.405 0 2.69.01 3.64.06.877.04 1.35.187 1.67.31.42.164.72.36 1.035.674.314.31.51.61.674 1.03.122.32.27.797.31 1.67.042.95.05 1.238.05 3.64s-.01 2.688-.054 3.638c-.04.876-.186 1.352-.31 1.67-.163.42-.36.72-.673 1.034-.314.31-.614.51-1.034.67-.315.12-.79.27-1.67.31-.95.04-1.23.05-3.636.05-2.4 0-2.686-.01-3.634-.053-.88-.04-1.36-.19-1.677-.31-.42-.167-.72-.36-1.03-.677-.32-.316-.51-.616-.68-1.036-.12-.32-.27-.798-.31-1.67-.047-.95-.05-1.24-.05-3.64 0-2.4.003-2.69.05-3.64.04-.877.19-1.353.31-1.67.16-.42.36-.72.67-1.034.314-.317.61-.51 1.03-.676.32-.12.797-.27 1.675-.31.95-.04 1.235-.05 3.64-.05' fill='%23222' fill-rule='evenodd'/%3E%3C/svg%3E");
}

#sttButton {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 999;
    font-size: 16px;
    border: none;
    outline: none;
    color: var(--scroll-button-text-color);
    background-color: var(--scroll-button-bg-color);
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
    opacity: 0.85;
}

#sttButton:hover {
    background-color: var(--scroll-button-hover-bg-color);
    font-weight: bold;
}

.footer {
  font-size: 0.9em;
  text-style: italic;
  margin-top: 0.5em;
  text-align: center;
}