:root {
  --bg: #1c1c1c;
  --black-to-white: #fff;
  --slider-color: var(--main-purple);
  --main-purple: #EF2D7E;
  --main-blue: #00D3FF;
  --mode-color: #dbdbdb;
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  background-color: var(--bg);
  --main-red: #EE2B26;
  position: relative;
  --header-height: 56px;
  --letter-spacing-main: 0.02rem;
  --bg-form: #161616;
}

.notification-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 60%;
}

.message-wrapper {
  text-align: center;
  margin-bottom: 20px;
}

.promo-title {
  color: var(--main-red);
}

.upper {
  text-transform: uppercase;
}

.semi-bold {
  font-weight: 600;
}

.light {
  font-weight: 300;
}

.medium {
  font-weight: 500;
}

.number {
  font-size: 21px;
}

.active {
  border-color: red;
}

.bold {
  font-weight: 700;
}

.media-icon:hover {
  cursor: pointer;
  fill: var(--main-red);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}