@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.mt-auto, .my-auto {
    margin-top: auto!important;
    display: none;
}

.ui-state-active, .ui-widget-content .ui-state-active {
    border: 1px solid yellow;
    background: yellow;
    font-weight: normal;
    color: #ffffff;
    border-radius: 50%;
}

.bonus-section {
  color: red;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 1.5em;
  animation-name: color-change;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes color-change {
  0% {
    color: red;
  }
  50% {
    color: yellow;
  }
  100% {
    color: red;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animated-text {
  display: inline-block;
  position: relative;
}

.animated-text:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  animation: fadeOut 0.5s ease-in-out forwards;
}

.animated-text:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: black;
  animation: fadeIn 0.5s ease-in-out forwards;
  animation-delay: 0.5s;
}

body {
	background: url('https://i.imgur.com/4c2qzg5.png');
    background-size: cover;
    background-attachment: fixed;
	font-family: 'Rubik', sans-serif;
}

.container {
    justify-content: center;
}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:black;}
::-webkit-scrollbar-thumb{background-color:yellow;}

.row {
    color:white;
}

.img-shop {
	width: 250px
}

.card-body.pt-2.pb-2 {
    text-align: left!important;
}

h1.czerwonyred {
	font-size: 19px;
}

.czerwonyred {
	color:red;
}

.text-muted {
	color:yellow!important;
}

footer a{
	transition: .3s ease-out;
	color:white;
}

footer a:hover {
	color:white;
	text-decoration:none;
	padding-bottom:0;
    transition: .3s ease-in;
    border-bottom: solid yellow 1px;
}

.container.mt-4 {
    min-height: 100%;
    min-height: 85vh;
    align-items: center;
}

.btn-outline-primary, .btn-primary {
    color: #5c5c5c;
    border-color: yellow;
    background: yellow;
    border-radius: 25px;
    transition: .3s ease-out;
}

.btn-outline-primary:focus, .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgb(255 255 0 / 50%)
}

.btn-outline-primary:hover, .btn-primary:hover {
    color: #000000;
    border-color: white;
    background: white;
    box-shadow: 0 0 10px white;
    border-radius: 25px;
    transition: .3s ease-in;
}

.btn-outline-primary:active, .btn-primary:active {
    color: #000000!important;
    border-color: white!important;
    background: white!important;
    box-shadow: 0 0 10px white;
    border-radius: 25px;
    transition: .3s ease-in;
}

.card {
    color:white;
	background: rgb(139 139 139 / 35%);
	backdrop-filter: blur(5px);
    border-radius: 0 0 15px 15px;
	border-bottom: solid yellow 2px;
}

.card-title {
	text-align: left;
}

.card-text {
	height:45%;
	text-align: left;
}


.navbar {
    color:white;
	background: rgb(139 139 139 / 35%);
	backdrop-filter: blur(5px);
    border-radius: 0 0 15px 15px;
	border-bottom: solid yellow 2px;
	height: 50px;
}

.navbar .container {
	margin-left: auto;
    margin-right: 0;
    padding: 0 1% 0 0;
    width: unset;
}

.nav-link {
	color:white!important;
    transition: .3s ease-out;
}

.nav-link:hover {
	color:white!important;
    padding-bottom:0;
    transition: .3s ease-in;
    border-bottom: solid yellow 1px;
}

footer {
	background: rgb(80 80 80 / 35%);
    backdrop-filter: blur(5px);
    padding: 0.4vh;
    color: #bfbfbf;
}

.navbar-brand {
    font-weight:400;
    font-size:15px;
	margin-left:1%;
}


.header-content-online {
	animation: animate 3s linear infinite;
	border-radius: 100%;
	margin-right: 8px;
	margin-bottom: 3px;
	margin-right: 14px;}
@keyframes animate {
	0% {
		box-shadow: 0 0 0 0 #67e872af, 0 0 0 0 #67e872af;
		transform: scale(0.50);
	}
	40% {
		box-shadow: 0 0 0 10px #ff6d4a00, 0 0 0 0 #67e872af;
		transform: scale(1.50);
	}
	80% {
		box-shadow: 0 0 0 10px #ff6d4a00, 0 0 0 10px #ff6d4a00;
		transform: scale(0.80);
	}
	100% {
		box-shadow: 0 0 0 0 #ff6d4a00, 0 0 0 10px #ff6d4a00;
		transform: scale(0.50);
	}
}



.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar .progress {
  height: 100%;
  background-color: #fff707;
  width: 0%;
  animation: progress-animation 2s ease-in-out;
}

@keyframes progress-animation {
  0% {
    width: 0%;
  }
  100% {
    width: 41.35%;
  }
}