.bio-item-copy a {
	text-decoration: underline;
	color: #E60000;
}

.bios-thum-grid-container {
	display: flex;
	position: relative;
	width: 100%;
	max-width: 955px;
  	justify-content: space-around;
  	padding: 40px;
  	margin: 0 auto 50px;
  	flex-wrap: wrap;
}

.bios-thum-card {
	display: grid;
	margin: 0 10px 30px;
	text-align: center;

}

.bios-title-cell {
	grid-column: 1 / span 3;
	margin: 0 auto;
}

.bios-image-container {
	display: grid;
   align-items: center;
   justify-items: center;
   max-width: 130px;
}

.bios-thums-container {
	position:relative;
	transform: scale(1.0);
	transition: .3s;
	padding: 0 0 0px;
	/* width: 120px; */
}

.circular--square--grey { 
	outline: #b8b8b8 4px solid;
	border-radius: 50%;
}

.circular--square--blu { 
	outline: #273cff 4px solid;
	border-radius: 50%;

}

.circular--square--blk { 
	position: relative;
	outline: #000000 4px solid;
	border-radius: 50%;
}

.bios-thum {
	width: 70%;
	clip-path: circle(50% at 50% 50%);
	margin: 0 auto;
}

.bios-image-container img {
    width: 80%;
    height: 80%;
    transition: .3s;
}

.bios-thums-container:hover {
    transform: scale(1.1);
		filter: drop-shadow(1px 0px 6px #ff0000);
}

/* CARD EFFECT
From Uiverse.io by SelfMadeSystem  */

.uwu {
  filter: blur(8px);
  transition: filter 0.3s;
}

.bg-blu {
  position: absolute;
  z-index: -1;
  inset: -1px;
/*  border-radius: 16px;*/
/*  overflow: hidden;*/
}

.bg-blu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  box-shadow: rgba(0, 124, 255, 1) 0 0 8px 4px;
  animation: glowPulse .6s cubic-bezier(0.27, 0.53, 0.89, 0.57);
  opacity:0;
}



.bios-thums-container-ani{
	position:relative;
	transform: scale(1.0);
	transition: .3s;
	padding: 0 0 0px;
}

.bios-thums-container-ani img{
	width:100%;
	height: auto;
	transition: .3s;
}

.bios-thums-container-ani:hover .bg-ani:before {
		animation: rotate 5s ease-out infinite;
}

.bg-ani {
    display: block;
  position:  absolute;
  	top:0;
  	left:0;
  z-index: 20;
  background: conic-gradient(
    hsl(0, 100%,0%),
    hsl(0, 100%, 50%),
    hsl(180, 100%, 100%)
  );
  width: 100%;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fader {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.bg-ani::after {
	/*fader: Animation name 
	.5s: Duration 
	ease-in-out: Timing function
	.3s: Delay
	2: Iteration count
	forwards: Fill mode*/

	animation: fader .5s linear .3s 250 forwards, rotate .5s ease-in-out .3s 250 forwards;
	
/*	animation: myAnim 5s normal linear infinite;*/
  content: '';
  position: absolute;
  inset: -3px;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  border: 5px solid transparent;
  background: conic-gradient(
    hsl(0, 100%,0%),
    hsl(0, 100%, 50%),
    hsl(0, 100%,0%)
  ) border-box;
  -webkit-mask: conic-gradient(
    hsl(0, 100%,0%),
    hsl(0, 100%, 50%),
    hsl(0, 100%,0%)
  ) padding-box, conic-gradient(
    hsl(0, 100%,0%),
    hsl(0, 100%, 50%),
    hsl(0, 100%,0%)
  );
  mask: conic-gradient(
    hsl(0, 100%,0%),
    hsl(0, 100%, 50%),
    hsl(0, 100%,0%)
  ) padding-box, conic-gradient(
    hsl(0, 100%,0%),
    hsl(0, 100%, 50%),
    hsl(0, 100%,0%)
  );
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  filter: drop-shadow(1px 0px 6px #ff0000);
}
}

@keyframes myAnim {
  from {
			transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
			transform: rotate3d(0, 0, 1, 360deg);

  }
}

@keyframes glowPulse {
  0% {
    opacity:0;
  }
  
  50% {
    opacity:1;
  }

  100% {
     opacity:0;
  }
}



@keyframes speeen {
  from {
    transform: rotate(0deg) translate(-50%, -50%);
  }

  to {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}

.content {
  position: relative;
  padding: 14px 16px;
}

/*END CARD EFFECT*/

/*.bios-thums-container img:hover{
    transform: scale(1.1);
}*/

.bios-thums-title {
	font-size: .75rem;
	font-weight: bold;
  padding: 0;
  line-height: 1.1rem;
  margin: 5px auto;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  text-wrap-style: balance;
  text-align: center;
}

.bios-content-2 {
/*	max-width: 1100px;*/
	display: grid;
	grid-template-columns: 1fr 2fr;
	margin: 45px auto 45px;
/*	padding: 0 20px 0;
	grid-column-gap: 50px;*/
}

.bio-item-avatar {

}

.bio-item-copy {
	padding: 0 7vw 0 0;
}

.frenemies-bios-profile-2 {
	display: grid;
	padding: 20px;
}

.frenemies-bios-profile-pic-2 {
	width: fit-content;
	text-align: center;
	margin: 0 auto;
}

.frenemies-bios-profile-pic-2 img{
	width: clamp(11rem, 22vw, 15.2rem);
/*	width:100%;
	max-width: 372px;*/
}

.bios-profile-name-2 {
/*([value-min], [value-preferred], [value-max])*/

	font-size: clamp(1.4rem, 3.2svw, 2.1rem);
	padding: 0 0 0;
	margin: 20px 0 15px;
}

.frenemies-bios-profile-pic {
	margin: 0 auto;
}

.frenemies-bios-profile-pic img{
	width: 60%;
}

.bios-profile-name {
	font-size: 2.5rem;
	padding: 0 0 0;
	margin: 20px 0 15px;
}

.bios-zorgo-thum img {
	width: 120px;
	height:auto;
}

/* <<<<<<<<<<<< CONTAINER QUERY STUFF >>>>>>>>>>>> */

.frenemies-bios-profile-pic-2-container {
	container: team-thum / inline-size;
	text-align: center;
}

@container team-thum (max-width:640px){
		img {
			width:100%;
		}
}

/* <<<<<<<<<<<< CONTAINER QUERY END >>>>>>>>>>>> */


@media only screen and (max-width: 640px) {

.page-header-container{
	background-image: url('https://spyninjas.net/images/header-bg-tile-blue-sm.jpg');
	background-repeat: repeat;
	width: 100%;
}

.bios-profile-name-2 {
	font-size: 2.5rem;
	padding: 0 0 0;
	margin: 20px 0 15px;
}

.frenemies-bios-profile-pic-2 img{
	width: 80%;
/*	width:100%;
	max-width: 372px;*/
}

.bios-content-2 {
	max-width: 1100px;
	display: grid;
	grid-template-columns: 1fr;
	margin: 45px auto 45px;
	padding: 0 20px 0;
}

.bios-container {
	display: grid;
	grid-template-columns: 1fr;
	position: relative;
	width: 100%;
	max-width: 100%;
  justify-content: space-around;
  padding: 0;
  margin: 0 auto 50px;
}

.bios-image-container {
	display: grid;;
   align-items: center;
   justify-content: center;
   margin: 0 0 30px;
   max-width: 100%;
}

.bios-image-container img {
    width: 100%;;
    transition: .3s;
}


.bios-thum {
	width: 60%;
	clip-path: circle(50% at 50% 50%);
	margin: 0 auto;
}

.bio-item-copy {
	text-align: center;
	padding: 0 0 0 0;
}

.bios-thums-container {
	transform: scale(1.0);
	transition: .3s;
	padding: 0 0 7px;
	/* width: 120px; */
}

.bios-thums-title {
	font-size: 1.5rem;
	font-weight: bold;
  padding: 0;
  line-height: 2rem;
  margin: 5px auto;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  text-wrap-style: balance;
  text-align: center;
}


}