/**
 * This is our main variables file. It in turn imports the `variables` file from
 * Twitter Bootstrap. We must include it last so we can overwrite any variable
 * definitions in our imported stylesheets.
 */

/* ----------------------------------
            Font definitions
   ---------------------------------- */
@font-face {
  font-family: 'pebble';
  font-weight: bold;
  src: url('fonts/Pebble-CAPS-subset.otf') format('opentype');
}

html,
body {
  height: 100%;
  width: 100%;
}
body {
  overflow: hidden;
  background-color: var(--plain-black, #000);
  font-size: 16px;
  margin: 0;
}
#app {
  height: 100%;
}

img {
  vertical-align: top;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}
.fade-enter {
  opacity: 0;
}
.fade-leave-to {
  opacity: 0;
}

p {
  margin: 0;
}
icon {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 100%;

  & > svg {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;

    & > use {
      display: block;
      position: relative;
      margin: 0;
      padding: 0;
    }
  }
}