/* Cantarell font! */
@import url('https://fonts.googleapis.com/css?family=Cantarell&display=swap');
body {
  font-family: 'Cantarell', sans-serif;
}

/* space between buttons */
.btn-space {
    margin-right: 5px;
}

/* purple button */
.btn-purple {
  color: #ffffff;
  background-color: #611BBD;
  border-color: #611BBD;
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open .dropdown-toggle.btn-purple {
  color: #ffffff;
  background-color: #49247A;
  border-color: #611BBD;
}

.btn-purple:active,
.btn-purple.active,
.open .dropdown-toggle.btn-purple {
  background-image: none;
}

.btn-purple.disabled,
.btn-purple[disabled],
fieldset[disabled] .btn-purple,
.btn-purple.disabled:hover,
.btn-purple[disabled]:hover,
fieldset[disabled] .btn-purple:hover,
.btn-purple.disabled:focus,
.btn-purple[disabled]:focus,
fieldset[disabled] .btn-purple:focus,
.btn-purple.disabled:active,
.btn-purple[disabled]:active,
fieldset[disabled] .btn-purple:active,
.btn-purple.disabled.active,
.btn-purple[disabled].active,
fieldset[disabled] .btn-purple.active {
  background-color: #611BBD;
  border-color: #611BBD;
}

.btn-purple .badge {
  color: #611BBD;
  background-color: #ffffff;
}
.btn-purple:not(:disabled):not(.disabled):focus,
.btn-purple:not(:disabled):not(.disabled):active:focus,
.show>.btn-purple.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #a06de4;
}
.btn-purple.focus, .btn-purple:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem #a06de4;
}
/* no padding for jumbotron (besides sides) */
.jumbotron-no-padding {
   padding: 0rem 1rem;
   margin-bottom: 0rem;
}
/* no padding for jumbotron (besides top/bottom) */
.jumbotron-little-padding {
   padding: 1rem 0rem;
   margin-bottom: 0rem;
}
.jumbotron-little-little-padding {
   padding: 1rem 1rem;
   margin-bottom: 0rem;
}
.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}
.modal {
  width: 80%;
  margin: auto;
}
.modal-dialog {
  height: 90%; /* = 90% of the .modal-backdrop block = %90 of the screen */
  max-width: 80%;
}
.modal-content {
  height: 100%; /* = 100% of the .modal-dialog block */
}
.carousel {
    border-radius: 10px 10px 10px 10px;
    overflow: hidden;
    ...
}
	img.emoji {
  display: inline !important;
  border: none !important;
  box-shadow: none !important;
  height: 1em !important;
  width: 1em !important;
  margin: 0 .07em !important;
  vertical-align: -0.1em !important;
  background: none !important;
  padding: 0 !important;
}

.emojis {
  margin-bottom: 20px;
  font-size: 32px;
}