@font-face{
  font-family: u;
  src: url("uzura.min.woff");
}
body {
  margin: 0;
  font-family: u, sans-serif;
  color: #333;
}
header {
  display: flex;
  margin-bottom: 2em;
  padding: 2em 1em;
  padding: 2em max(1em, calc(50vw - 400px));
  flex-wrap: wrap;
  justify-content: space-between;
  background: url(header.png) center/cover;
}
header h1 {
  margin: 0;
}
#logo {
  max-width: 100%;
  width: 24rem;
}
header p {
  font-size: 1.2em;
  text-shadow:
    1px 2px 0 #FFF,
    -1px -2px 0 #FFF,
    -1px 2px 0 #FFF,
    1px -2px 0 #FFF,
    2px 1px 0 #FFF,
    -2px -1px 0 #FFF,
    -2px 1px 0 #FFF,
    2px -1px 0 #FFF,

    0px 2px 0 #FFF,
    0 -2px 0 #FFF,
    -2px 0 0 #FFF,
    2px 0 0 #FFF,
    1px 1px 0 #FFF,
    -1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
    1px -1px 0 #FFF,
    0px 1px 0 #FFF,
    0 -1px 0 #FFF,
    -1px 0 0 #FFF,
    1px 0 0 #FFF;
}
header nav {
  display: flex;
  margin: -1em 0 1em;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}
header nav a {
  display: block;
  width: 22%;
  margin-top: 2em;
  box-shadow: 12px 12px 0 0 rgba(96, 0, 0, 0.3);
  border-radius: 5%;
}
@media (max-width: 400px) {
  header nav a {
    width: 44%;
  }
}
header nav img {
  display: block;
  width: 100%;
}

h2 {
  text-align: center;
}

.main {
  padding: 1em;
  margin: 0 auto;
  max-width: 800px;
}

.gallery {
  margin: 2em max(1em, calc(50vw - 400px));
}

footer {
  margin: 2em 0 1em;
  border-top: dashed 1px #333;
  padding: 1em max(1em, 50vw - 400px) 0;
}

dt {
  margin-top: 1em;
}

.at::after {
  content: "@";
}