body {
  font-family: 'Inter', sans-serif; !important
}

h1 {
  font-weight: 300;
  transition: all 1s ease;
  text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

h6 {
  font-weight: 300;
  line-height: 1.7em;
}

a {
  text-decoration: none; !important;
  transition: all 1s ease;
  color: inherit;
}

a:hover {
  text-decoration: none; !important;
  color: #FF6600;
  transition: all 1s ease;
}

.badge-container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 200px;
  justify-content: center;
  align-items: center;
}

.badge {
  width: 100%; 
  height: 100%;
  perspective: 30rem;
  vertical-align: middle;
  white-space: normal;
}

.front, .back {
  position: absolute;
  width: 100%; 
  height: 100%;
  transition: transform 1s;
  backface-visibility:hidden;
}

.badge-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.front {

}

.back {
  transform: rotateY(180deg);
}

.badge:hover .front{ transform: rotateY(180deg); }
.badge:hover .back { transform: rotateY(360deg); }

.is-clickable {
  cursor: pointer;
}

.lightbulb:hover {
  color: #FFD200;
  transition: all 0.2s ease;
}

.background-white {
  background-color: #000000;
  transition: all 0.3s ease;
  color: #FFFFFF;
}

.background-black {
  background-color: #FFFFFF;
  transition: all 0.3s ease;
  color: #000000;
}


.text-white {
  background-color: #000000;
  transition: all 0.3s ease;
}

.text-black {
  background-color: #FFFFFF;
  transition: all 0.3s ease;
}

.flag {
  -webkit-box-shadow: 0px 24px 50px -15px rgba(255, 255, 255, 0.7);
  -moz-box-shadow: 0px 24px 50px -15px rgba(255, 255, 255, 0.7);
  box-shadow: 0px 24px 50px -15px rgba(255, 255, 255, 0.7);
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.me-white {
  -webkit-box-shadow: 0px 24px 50px -15px rgba(255, 255, 255, 0.7);
  -moz-box-shadow: 0px 24px 50px -15px rgba(255, 255, 255, 0.7);
  box-shadow: 0px 24px 50px -15px rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  height: 200px;
  width: auto;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.me-white::after {
  content: "";
  border-radius: 5px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.me-white:hover {
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
}

.me-white:hover::after {
    opacity: 1;
}

.me-black {
  -webkit-box-shadow: 0px 24px 50px -15px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 24px 50px -15px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 24px 50px -15px rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  height: 200px;
  width: auto;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.me-black::after {
  content: "";
  border-radius: 5px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.me-black:hover {
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
}

.me-black:hover::after {
  opacity: 1;
}

.neon {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 2px rgba(255,255,255,1) , 0 0 2px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.neon:hover {
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
}

[v-cloak] {
  display: none;
}