jokes_webpage_2/static/site.css

body {
	background-color: #b0b0b0;
}

.vertical-center {
	z-index:-1;
	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;
	/*background-color: rgba(0, 0, 0,0.5);*/
}

.gradient-fill {
	opacity: 50%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
}

.bg-fill-s1 {
	background: rgb(2,0,36);
	background: linear-gradient(30deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 33%, rgba(0,212,255,1) 100%);;
	opacity: 50%;
}

.bg-fill-s2 {
	background: rgb(131,58,180);
	background: linear-gradient(127deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 
	opacity: 50%;
}

.bg-fill-s3 {
	background: rgb(34,193,195);
	background: linear-gradient(320deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
	opacity: 50%;
}

.background {
	z-index:0;
	font-family: 'Bowlby One SC', cursive;
	display: flex;
	position: absolute;
	
	overflow: hidden;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	

}

.header-bar {
	display: flex;
	position : absolute;
	z-index:20;
	font-family: 'Bowlby One SC', cursive;
	top: 0px;
	width:100%;
	/*background-color: rgba(0, 0, 0,0.5);*/
	color: rgb(255,255,255);
	padding:1rem;
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0,0));
}

.score-bar {
	display: flex;
	position : absolute;
	z-index:19;
	font-family: 'Bowlby One SC', cursive;
	bottom: 0px;
	width:100%;
	/*background-color: rgba(0, 0, 0,0.5);*/
	color: rgb(255,255,255);
	padding:1rem;
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0,0.5));
}

#bg-content {
	
    position : absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -moz-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
	
	position: absolute;
	transform-origin: 50% 50%;

}

.scr {
	margin-right: 1rem;
}

.single-line {
	
	background: url("go-next-8.png") repeat-x;
	white-space: nowrap;
	overflow:hidden;
	color:rgb(153, 136, 136);
	padding-bottom:48px;
	width: 5000px;
	height: 32px;
	
	

	background-size: auto;
}


@keyframes slide {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -653px;
  }
}

@keyframes slide_out {
  from {
    position-x: 0;
  }
  to {
    position-x: -100%;
  }
}
@keyframes slide_in {
  from {
    position-x: 100%;
  }
  to {
    position-x: 0;
  }
}

.heart > path{
	fill: transparent;
}


.heart-en > svg > path {
	animation: heartClickEn 0.3s linear;
	color: red;
	fill: lightcoral;
}
.heart-en > svg {
	animation: heartPopIn 0.3s linear;
	color: red;
}


@keyframes dash {
	to {
	  stroke-dashoffset: 200;
	}
}

@keyframes heartClickEn {
	0%   {
		color: #007bff ;
		
	}
	50%  {
		fill: transparent;
		
	}
	100% {
		color: red ;
		fill: lightcoral;
	}
}

@keyframes heartPopIn {
	0%   {
		transform: scale(1.0);
		
	}
	50%  {
		transform: scale(2);
		
	}
	100% {
		transform: scale(1.0);
	}
}

@keyframes heartPopOut {
	0%   {
		transform: scale(1.0);
		
	}
	50%  {
		transform: scale(2);
		
	}
	100% {
		transform: scale(1.0);
	}
}

.heart-da > svg > path {
	animation: heartClickDa 0.3s linear;
	fill: transparent;
}
.heart-da > svg {
	animation: heartPopOut 0.3s linear;
	color: 007bff;
}

@keyframes heartClickDa {
	0%   {
		color: red ;
		fill: lightcoral;
		
	}
	50%  {
		fill: transparent;
		
	}
	100% {
		color: #007bff ;
		
	}
}

.bot-bar{
	position: absolute;
	bottom: 5rem;
	right: 1rem;
	overflow-wrap: break-word;
}

.bot-bar-item {
	fill: white;
	-webkit-filter: drop-shadow( 0px 0px 2px rgba(0, 0, 0, .7));
	filter: drop-shadow( 0px 0px 2px rgba(0, 0, 0, .7));
}

.bot-bar-item > svg > .fill {
	fill: transparent;
	transition: 0.2s linear;
	cursor: pointer;
}

.bot-bar-item:hover > svg > .fill {
	fill: white
}

.bot-bar-item > svg > .def {
	fill: white;
	transition: 0.2s linear;
	cursor: pointer;
}

.bot-bar-item:hover > svg > .def {
	fill: transparent
}
.popup-bg-likes-hide {
	visibility: hidden;
}

.popup-bg-likes {
	background-color:rgba(0,0,0,0.5);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	z-index: 20;
	display: flex;
	justify-content: center ;
	align-items: center;
	transition: 1s linear;
}



.cmd-close-likes {
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.liked-joke{
	background-color: #fff;
	background-clip: border-box;
	border: 1px solid rgba(0,0,0,.125);
	padding: 1rem 1.25rem 0 1.25rem;
	border-radius: .25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.liked-joke-like {
	padding-left: 1rem;
}
.unlike > svg {
	fill: red;
	color: red;
}
.template {
	display: none;
}

.popup-bg-likes-content {
	position: relative;
	background-color:rgba(0,0,0,0.5);
	color: black;
	border: solid 1px white;
	border-radius: .25rem;
	padding: 1.25rem;
	width: fit-content;
	max-height: 90%;
	max-width: 90%;
	width: 70%;
	display: flex;
	flex-direction: column;
}

.liked-joke-header{
	flex-basis: auto;
  	flex-grow: 0;
	flex-shrink: 0;
	color: white;
}
.liked-joke-list {
	min-height: 0px;
	min-width: 0px;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	overflow: auto;
}


.particles-js1{
	width: 100%;
	height: 100%;
	background-color: #6678ff;
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
  }

.particles-js2{
	width: 100%;
	height: 100%;
	background-color:  rgb(44, 46, 67);
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
  }

.particles-js3{
	width: 100%;
	height: 100%;
	background-color: rgb(44, 46, 67);
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
  }