@import url(base.css);

main { max-width: 1100px; }

#headerpic {
  position: relative;
  width: min-content;
  margin: auto;

  figcaption {
    position: absolute;
    bottom: 1.5em;
    right: 2.5em;
    font-style: italic;
  }

  img { filter: drop-shadow(0 0 30px var(--glow-col)); }
}

#contact {
  grid-template-columns: repeat(2, auto auto);
  row-gap: 0.5em;
  width: 85%;
  margin: auto;

  img {
    vertical-align: middle;
    height: 1.2em; width: 1.2em;
  }
}

.o {
  filter:
    drop-shadow(0.5px 0.5px black)
    drop-shadow(-0.5px 0.5px black)
    drop-shadow(-0.5px -0.5px black)
    drop-shadow(0.5px -0.5px black);
}

.other { padding-top: 0.5em; }
dt.other {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 5px;
}
dd.other {
  grid-area: auto / 2 / auto / 5;
}