@font-face {
	font-family: BodyFont;
	src: url(Poppins-Regular.ttf)
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: BodyFont;
}

body {
	background-image: url('plaid.jpg');
    background-repeat: repeat;
    background-attachment: fixed;
	place-items: center;
}

p {
	font-family: BodyFont;
	font-size: 1.5em;
	color:#222222
}

h1 {
	font-family: BodyFont;/* Step 1: Apply a background gradient */
	background-image: linear-gradient(90deg, #e800aa, #ff75da);
	
	/* Step 2: Clip the background to the text characters */
	background-clip: text;
	-webkit-background-clip: text; /* Required for older WebKit browsers */
	
	/* Step 3: Make the original font color transparent to reveal the gradient */
	color: transparent;
}

sam {
	color: navy;
}

#header {
	display: flex;
}

.mainDiv {
	top: 0;
	left: 0;
	width: 100%;
	max-width: 900px;
	margin: 0;
	padding: 0;
	padding-top: 1em;
	padding-bottom: 5%;
	text-align: center;
	background-color: #fff3f8;
}

.navbar {
	container-type: inline-size;
	height: 60px;
	display: flex;
	gap: clamp(15px, -70px + 13.33vw, 40px);
	justify-content: center;

	/* navbar color */

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fd9ba6+0,fc8a95+50,fc7881+51,f9645f+100 */
	background: #fd9ba6; /* Old browsers */
	background: -moz-linear-gradient(top,  #fd9ba6 0%, #fc8a95 50%, #fc7881 51%, #f9645f 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #fd9ba6 0%,#fc8a95 50%,#fc7881 51%,#f9645f 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f7aed3 0%,#fb9ec8 50%,#fb8dbe 51%,#f570a8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	background-color: #ff9999;
	
	width: 100%;
}

.navtext {
	background-color: rgba(207, 207, 207, 0);
	border: none;
	color: #ffffff;
	font-size: 1.5em;
	line-height: 60px;
	white-space: nowrap;
	text-shadow: 
    -1px -1px 0 #87135a,  
     1px -1px 0 #87135a,
    -1px  2px 0 #87135a,
     1px  1px 0 #87135a;
}

.navbutton {
	background-color: rgba(207, 207, 207, 0);
	border: none;
	color: #ffffff;
	font-size: clamp(15px, -0.01px + 3.33vw, 30px);
	line-height: 60px;
	white-space: nowrap;
}

.navbar .navbutton {
	color: #ffffff;
}

.navbar .navbutton:visited {
	color: #ffffff;
}

.navbar .navbutton:hover {
	color: #ff17b2;
}

.navbar .navbutton:active {
	color: #ffd3e7;
}

/*
	Blinkies
*/

.blinkie-container {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:center;
	padding-left: 15px;
	padding-right: 15px;
}

.blinkie-container img {
	height:35px;
	width:auto;
	object-fit:contain;
}

/*
	Dividers
*/

.divider-container {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:center;
	padding-left: 15px;
	padding-right: 15px;
}

.divider-container img {
	height:auto;
	width: 400px;
	max-width: 90%;
	object-fit:contain;
}

/*
	Pixels
*/

.pixel-container {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:center;
	padding-left: 15px;
	padding-right: 15px;
}

.pixel-container img {
	height:auto;
	max-width: 150px;
	object-fit:contain;
}

.stamp-container {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:center;
}

.stamp-container img {
	height:auto;
	width: 130px;
	object-fit:contain;
}

/*
	Links
*/

a:link {
	color: mediumvioletred;
	background-color: transparent;
	text-decoration: none;
	transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
  
a:visited {
	color: mediumvioletred;
	background-color: transparent;
	text-decoration: none;
}
  
a:hover {
	color: palevioletred;
	background-color: transparent;
	text-decoration: underline;
}
  
a:active {
	color: pink;
	background-color: transparent;
	text-decoration: underline;
}

.gradient-text {
	/* Step 1: Apply a background gradient */
	background-image: linear-gradient(90deg, #e800aa, #ff75da);
	
	/* Step 2: Clip the background to the text characters */
	background-clip: text;
	-webkit-background-clip: text; /* Required for older WebKit browsers */
	
	/* Step 3: Make the original font color transparent to reveal the gradient */
	color: transparent;
}

/*					 */
/*  para flag colors */
/*					 */

.adultam {
	background-image: linear-gradient(to right, #e06697 40%, #2246d7 60%);
	
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;

	display: inline-block; 
}

.map {
	background-image: linear-gradient(to right, #9f3259, #e8a1af, #f7eeab, #4b99b0, #003d7c);
	
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;

	display: inline-block; 
}

.zoo {
	background-image: linear-gradient(to right, #70d1fc, #b16eb5);
	
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;

	display: inline-block; 
}

.necro {
	background-image: linear-gradient(to right, #acbe94, #b83640, #713d49);
	
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;

	display: inline-block; 
}

.consang {
	background-image: linear-gradient(to right, #818fc9, #b4dcff, #ffb4b4, #b97ba4);
	
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;

	display: inline-block; 
}

.obj {
	background-image: linear-gradient(to right, #6a9fb6, #d9d9d9, #fdff9b, #b499c2);
	
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;

	display: inline-block; 
}

/*					*/
/*  transid colors  */
/*					*/

.gender {
	background-image: linear-gradient(to right, #5bcefa, #f5a9b8, #5bcefa);
	
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;

	display: inline-block; 
}

.harmed {
	background-image: linear-gradient(to right, #a0eae9 10%, #000, #c2c2c2 90%);
	
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;

	display: inline-block; 
}

.harmful {
	background-image: linear-gradient(to right, #5a1314 10%, #e4d6d6, #222222 90%);
	
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;

	display: inline-block; 
}

.location {
	background-image: linear-gradient(to right, #483b8a 10%, #92dce2, #b23200 90%);
	
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;

	display: inline-block; 
}


/*
	User Cards
*/

.account-card {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-image: linear-gradient(to right, #ffdde4, #f9eaeb, #ffdde4);
}

#accounts-container {
	width: auto;
	max-width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5%;
	margin-right: 5%;
	padding-top: 10px;
	padding-bottom: 10px;
	justify-content: center;
}