html {
  height: 100%;
}

body {
  width: 100%;
  height: 100lvh;
  background-color: #040411;
  text-align: center;
  font-family: "Zilla Slab", serif;
}

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #040411;
  background: url("background.jpg") no-repeat center center fixed;
  background-size: cover;
  z-index: -1;
}

body * {
  box-sizing: border-box;
}

body > img {
  display: inline-block;
  width: 10em;
  margin-top: 13vh;
}

body > p {
  color: #fff;
}

p {
  font-size: 135%;
  margin: 0 0 1em;
}

h1, h2 {
  font-family: "Lobster Two", sans-serif;
  color: #000;
  margin: 0;
}

h1 {
  font-size: 300%;
}

h2 {
  margin-bottom: 0.5em;
}


.bubble-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 0;
  margin-top: 0.5em;
  padding: 1em;
  width: 100%;
  justify-content: center;
  font-size: 150%;
  font-weight: 700;
}

.bubble-row a {
  text-decoration: none;
  color: inherit;
}

.bubble-container {
  max-width: 250px;
}

.bubble {
  padding: 0.7em 0.5em 0.5em;
  border-radius: 0.8em;
  color: #fff;
  text-shadow: 0px 0px 3px #000;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 2.85em,
    #fff 2.85em,
    #fff 3.15em,
    rgba(255,255,255,0) 3.15em,
    rgba(255,255,255,0) 100%
  );
}

.bubble-extend {
  margin: 0;
  background: #fff;
  padding: 0 0.5em;
  border-radius: 0.5em;
  font-size: 65%;
  font-weight: 400;
  transition: padding 0.2s 0.5s, height 0.2s 0.5s, margin 0.2s 0.6s;
  height: 0;
  overflow: hidden;
}

.bubble-container:hover .bubble-extend {
  padding: 0.3em 0.5em;
  height: 1.75em;
  margin: 0.5em 0;
  transition: padding 0.2s, height 0.2s, margin 0.2s;
}

/*
a .bubble {
  transition: all 0.2s;
}

a .bubble:hover, a .bubble-extend:hover {
  box-shadow: 0 0 4px 4px #39d;
}
  */

.bubble-row img {
  box-sizing: content-box;
  display: block;
  margin: 0 auto 0.5em;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  border: 0.3em solid white;
}