@charset "UTF-8";
/* CSS Document */

body {
	background-color: hsl(185, 75%, 39%);
	background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
  	background-position: top -600px right 710px, bottom -730px right -300px;
 	background-repeat: no-repeat, no-repeat;
	font-family: 'Kumbh Sans', sans-serif;
	color: black;
	
}

.name {
	font-weight: 400px;
	font-family: 'Kumbh Sans', sans-serif;
}

.lightFont, .label, .age {
	font-size: 14px;
	color: #BFBFBF;
}


.label {
	padding-top: 4%;
}

.numbers {
	color: black;
	font-weight: 400px;
}

.container {
	position: absolute;
	width: 315px;
	box-shadow: 1px 20px 30px -10px hsl(229, 23%, 23%);
	border-radius: 20px;
	margin-left: 35%;
	margin-top: 3%;
	background-color: #ffffff;
}

.imageContainer img {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	width: 100%;
}

.profilePicture img {
	position: absolute;
	border-radius: 60px;
	border: 5px solid #ffffff;
	top: 18%;
	left: 4%;
	margin-left: 30%;
	margin-right: 30%;
	width: 30%;
}

.nameTag {
	padding-top: 20%;
	padding-bottom: 2%;
	text-align: center;
	
}

hr {
	border-color: #F1F1F1;
	opacity: 20%;
	border-width: 0.1px;
}

.stats {
	display: grid;
	grid-template-columns:  auto auto auto;
	text-align: center;
	padding-bottom: 10%;
	padding-top: 7%;
}

.attribution {
	postion: absolute;
	padding-top: 31%;
	margin-left: -60px;
	color: #ffffff;

}

.attribution a {
	color: #ffffff;
}


@media (min-width: 376px) and (max-width: 600px) { 

.container {
	position: absolute;
	width: 240px;
	margin-left: 26%;
	margin-top: 3%;
	}
.attribution {
	postion: absolute;
	padding-top: 65%;
	margin-left: -20px;
	color: #ffffff;

}
	
}


@media (min-width: 100px) and (max-width: 375px) { 

.container {
	position: absolute;
	width: 240px;
	margin-left: 15%;
	margin-top: 3%;
	}
.attribution {
	postion: absolute;
	padding-top: 100%;
	margin-left: -10px;
	color: #ffffff;

}
	
}



/*TESTING

/*DESKTOP*/
/*TESTING
@media (min-width: 856px) and (max-width: 1440px) { 

	.containerMobile {
		display: none !important; 
	}

}

/*TABLET*/

/*TESTING 
@media (min-width: 376px) and (max-width: 855px) { 

	.containerMobile {
		display: none !important; 
	}
	
	.containertablet {
		width: 50%;
		margin-left: 25%;
	}
	
	.profilePictureTablet img {
	position: absolute;
	border-radius: 60px;
	border: 5px solid #ffffff;
	top: 19%;
	left: 13.5%;
	width: 11%;
	margin-left: 30%;
	margin-right: 30%;		
	}

}


/*MOBILE*/

/*TESTING @media (min-width: 100px) and (max-width: 375px) { 

.container {
		display: none;		
	}
	
.containerMobile {
		background-color: #ffffff;
		border-radius: 7%;
		width: 95%;
	}
	
.imageContainerMobile img {
		border-top-left-radius: 8%;
		border-top-right-radius: 8%;
		width: 100%;
	}
	
.profilePictureMobile img {
	position: absolute;
	border-radius: 60px;
	border: 5px solid #ffffff;
	top: 20%;
	left: 35.5%;
	width: 20%;
	
}
	
.nameTagMobile {
	text-align: center;
	padding-top: 13%;
		
	}
	
.lightFont {
	padding-bottom: 7%;
	}
	}