div.namegenerator {
	text-align: center;
}

div#getname {
	margin: .5em 0; 
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: .5em;
	align-items: start;
}

div#getname input[type="button"] {
	transition: opacity .25s ease-in;
}

div#getname .btn {
	background: var(--ate-surface-3, #EFEFEF); 
	color: var(--ate-accent, #a25cff); 
	border: none;
	border-radius: var(--ate-radius, 0.25rem);
}

div#getname .btn.active, div#getname .btn:not(.active):hover {background: var(--ate-primary, #a25cff); color: #FFF;}

div.namebox {
	background: var(--ate-primary, #a25cff); 
	border-radius: var(--ate-radius, 0); 
	color: #FFF; 
	margin: .5em 0; 
	padding: 2em; 
	text-align:center; 
	line-height: 1;
}

div.show_name {
	color: #fff; 
	font-size: 2.4em;
	letter-spacing: 2px;
	font-weight: bolder; 
	text-transform: uppercase; 
	word-break: break-word; 
	hyphens: auto; 
	margin-bottom: 0; 
	padding: 0;
}

div.show_name p {
	padding: 0;
}


@media (max-width: 600px) {
	div#getname {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 480px) {
	div.show_name {
	  font-size: 1.8em;
	}
}

#name_options {
	margin: .5em 0 .5em 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: .5em;
}

#name_options .filter-container {
	width: 100%; 
	background: var(--ate-surface-2, #EFEFEF);
	border: 1px solid var(--ate-border, transparent);
	border-radius: var(--ate-radius, 0);
	padding: 15px;
	box-sizing: border-box;
}

#name_options .filter-container h3 {
	margin: 0 0 10px;
	color: var(--ate-text, #565454);
}

div.prefname {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
}

p.smallprint {
    font-size: .8em;
    line-height: 1.4;
    font-style: italic;
}

div.prefname input[type="text"] {
	background: none;
	color: var(--ate-text, #58595b);
	font-size: 1em;
	width: 100%;
	border: none;
	border-bottom: 2px solid var(--ate-border-strong, #ccc);
	padding: 5px;
	border-radius: 0;
	text-align: unset;
	display: grid;
	grid-template-columns: 1fr;
	box-shadow: none;
	-webkit-box-shadow: none;
	margin-bottom: 2em;
}

div.entry-content input.filter_input::placeholder {
	color: var(--ate-placeholder, #58595b);
}

/* Fancy Checkbox */
.prefname input[type=checkbox] {
	display: none;
}

.prefname input[type=checkbox] + label:before {
	font-family: FontAwesome; 
	display: inline-block;
}
.prefname input[type=checkbox] + label:before {
	content: "\f0c8";
	color: var(--ate-accent, #a25cff);
}
.prefname input[type=checkbox] + label:before {
	letter-spacing: 7px;
}
.prefname input[type=checkbox]:checked + label:before {
	content: "\f14a";
}
.prefname input[type=checkbox]:checked + label:before {
	letter-spacing: 7px;
}




/* Begin Genre Buttons Styling */

.entry ul.genre_select {
	line-height: 1; 
	padding: 0; 
	margin: 0; 
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: .5em;
	grid-auto-rows: auto;
}

ul.genre_select li { 
	list-style: none; 
	margin: 0;
}

.genre_select input[type="radio"] {display: none;}

.genre_select input[type="radio"] + label {
	text-align: center;
	background: var(--ate-surface, #FFF);
	color: var(--ate-text-2, inherit);
	border-radius: var(--ate-radius-sm, 0);
	padding: 10px;
	display: block;
	cursor: pointer;
}

.genre_select input[type="radio"]:checked + label {
	background: var(--ate-primary, #a25cff);
	color: #fff;
	cursor: pointer;
}

@media (max-width: 768px) {
	  #name_options {
	  display: block;
	}
	#name_options .filter-container {
	  margin-bottom: 15px;
	}
	#name_options ul.dropdown-filter {
	  box-shadow: 0 1px 3px rgba(0,0,0,.175);
	  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.175);
	}
}