@media (max-width:			480px)
{
    .button, select, input, textarea
{
		width:				100%;
        max-width:			95%;
        margin:				0 auto;
}
	
}

/* RESET *****************************************************************************************/
*
{
	padding:				0;
	margin:					0;
}

input:hover, select:hover, textarea:hover, button:hover,
input[type="checkbox"]:hover, input[type="radio"]:hover,

input:focus, select:focus, textarea:focus, button:focus,
input[type="checkbox"]:focus, input[type="radio"]:focus
{
	outline:				2px solid var(--white);
}

.dynamic .section:hover,
#sentence:hover,
#descriptionsContainer:hover,
#top-10:hover
{
	outline: none !important;
}
/* COLOURS ***************************************************************************************/
:root 
{
	--red:					#DC143C;
	--orange:				#FFA500;
	--yellow:				#FFD700;
	--lime:					#7FFF00;
	--green:				#228B22;
	--aqua:					#1E90FF;
	--blue:					#00008B;
	--purple:				#9400D3;
	--violet:				#8A2BE2;
	--fushia:				#FF00FF;
	--black:				#000000;
	--grey:					#808080;
	--silver:				#DCDCDC;
	--white:				#F8F8FF;

	--theme-box-size: 10px;
	--border-radius-size: 5px;
}

/* FRAMEWORK *************************************************************************************/
html,
body
{
	margin:					0;
	padding:				0;
	height:					100%;
	min-height:				100vh;
	font-family:			sans-serif;
	font-size:				1em;
	text-align:				center;
	box-sizing:				border-box;
}

body
{
	background:				url("./png/50dr.png");
	display:				flex;
	flex-direction:			column;
	justify-content:		flex-start;
	align-items:			center;
	font-size:				90%;
}

#wrapper
{
	box-sizing:				border-box;
	flex-direction:			column;
	flex-grow:				1;
	justify-content:		space-between;
	position: absolute;
	margin:					0 auto;
	max-width:				600px;
	min-height:				100vh;
	padding:				20px var(--theme-box-size);
	width:					100%;
}

#footer
{
	margin-top:				auto;
	text-align:				center;
	width:					100%;
}

/*FORMATTING *************************************************************************************/
h1, h2, h3, h4
{
	/*text-transform:			uppercase;*/
	display:				block;
	width:					100%;
}

h1{font-size:				2.5em;
}

h2{font-size:				2em;
}

h3{font-size:				1.5em;
}

h4{font-size:				1em;
}

p{font-size:				1em;
}

/* DYNAMIC CONTENT *******************************************************************************/
.dynamic 
{
    align-items:			center;
    background-color:		rgba(0, 0, 0, 0.5);
    box-sizing:				border-box;
    display:				flex;
    height:					100vh;
    justify-content:		center;
    left:					0;
    padding:				20px;
    position:				fixed;
    top:					0;
    width:					100vw;
    z-index:				1000;
}

.dynamic .section 
{
    background:				white;
    border-radius:			var(--border-radius-size);
    box-shadow:				0 0 var(--theme-box-size) rgba(0,0,0,0.3);
    max-height:				90vh;
    max-width:				600px;
    overflow-y:				auto;
    padding:				20px;
    position:				relative;
    width:					100%;
}

.hidden
{
	display:				none;
}

/* HEADER BUTTONS ********************************************************************************/
.section-header
{
	display:				flex;
	gap:					var(--theme-box-size);
	position:				absolute;
	right:					1rem;
	top:					1rem;
	z-index:				10;
}

.close-button 
{
    cursor:					pointer;
    font-size:				24px;
    line-height:			1;
    position:				absolute;
    right:					var(--theme-box-size);
    top:					var(--theme-box-size);
    z-index:				1;
}

.section-header .close-button,
.section-header .votes
{
	align-items:			center;
	border-radius:			3px;
	cursor:					pointer;
	display:				flex;
	float:					right;
	font-size:				1rem;
	height:					30px;
	justify-content:		center;
	line-height:			30px;
	margin-left:			var(--theme-box-size);
	margin:					0;
	padding:				0;  
	position:				static;
	right:					1rem;
	top:					1rem;
	width:					30px;
}

.section-header .close-button:hover,
.section-header .votes:hover,
.border:hover
{
	outline:				2px solid var(--white);
}

/* CONTAINER *************************************************************************************/
.container
{
	margin:					var(--theme-box-size) 0;
}

.container h3
{
	margin:					40px 0 0px 0;
}

.textbox
{
	border-radius:			var(--border-radius-size);
}

#sentence
{
	font-size:				150%;
	min-height: 75px;
	display:flex;
	justify-content:center;
	align-items:center;
}

#sentence,
#descriptionsContainer
{
	padding:				var(--theme-box-size);
}

/* BUTTONS ***************************************************************************************/
.buttons
{
	display:				flex;
	gap:					var(--theme-box-size);
	justify-content:		space-between;
}

.buttons .button
{
	border-radius:			var(--border-radius-size);
	flex:					1;
	padding:				var(--theme-box-size);
	text-align:				center;
	box-shadow: inset 0px 1px 3px rgba(0,0,0,0.1);
}

/* VARIABLES **************************************************************************************/
.border,
#sentence,
#descriptionsContainer
{
	border:					1px solid var(--black);
}

/* SENTENCE **************************************************************************************/

div#sentenceContainer p
{
	font-size:				150%;
}

/* DESCRIPTION ***********************************************************************************/
div#descriptionsContainer > div:first-child h4
{
	padding-top:			0;
}

div#descriptionsContainer h4
{
	font-size:				1.25em;
	padding-top:			20px;
	text-transform:			capitalize;
}

/* ROWS ******************************************************************************************/
.row
{
    display:				flex;
    flex-wrap:				wrap;
    gap:					var(--theme-box-size);
    margin-bottom:			1rem;
	justify-content:		space-between;
}

.save .group
{	
	display: flex;
	height: 40px;
}

.save .group input
{

	padding: 0 10px;
}

.row .group 
{
	flex: 1;
}

.row .group select,
.row .group input,
.row .group button 
{
	width: 100%;
}

.row .group div
{
	border-radius:			var(--border-radius-size);
	height:					40px;
}

/* POPUPS ****************************************************************************************/
.popup
{
	border-radius:			var(--border-radius-size);
	box-shadow:				0 4px 8px rgba(0,0,0,0.2);
	color:					#fff;
	font-weight:			bold;
	opacity:				0.95;
	padding:				15px;
	position:				fixed;
	right:					20px;
	top:					20px;
	z-index:				9999;
}

.popup.success
{
	background-color:		var(--green);
}

.popup.error
{
	background-color:		var(--red);
}

/* FORMS ******************************************************************************************/
select,
button
{
    border-radius:			var(--border-radius-size);
    flex-shrink:			0;
    flex:					1;
    min-width:				0;
    padding:				var(--theme-box-size);
}

form textarea
{
	min-height:				70px;
	resize:					vertical;
}
/*
form select,
form input,
form textarea,
form button,
label
{
	display:				block;
	width:					100%;
}
*/

form select,
form input,
form textarea,
form button,
label
{
	display:				block;
	width:					100%;
}
	
label
{
	margin-bottom: 10px;
}

/* CHECK BOXES & RADIO BUTTONS *******************************************************************/
form .form-option
{
display: inline-block;
}

.form-option
{
	align-items:			center;
	display:				flex;
	gap:					var(--theme-box-size);
	margin:					5px 20px;
}

.form-option input
{
	width:					10px !important;
	height:					10px !important;
}

.form-option label
{
	cursor:					pointer;
}

input[type="checkbox"],
input[type="radio"]
{
	-moz-appearance:		none;
	-webkit-appearance:		none;
	appearance:				none;
	background-color:		var(--white);
	border-radius:			3px;
	border:					1px solid var(--black);
	cursor:					pointer;
	display:				inline-block;
	padding:				var(--theme-box-size);
	position:				relative;
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before
{
	background-color:		var(--checkbox-checked-background, #ff0);
	border-radius:			2px;
	color:					var(--red);
	content:				'';
	cursor:					pointer;
	font-size:				var(--theme-box-size);
	height:					12px;
	left:					4px;
	position:				absolute;
	text-align:				center;
	top:					4px;
	width:					12px !important;
}

input[type="radio"],
input[type="radio"]:checked::before
{
	border-radius:			50%;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover,
input[type="checkbox"]:focus,
input[type="radio"]:focus
{
	height:					12px;
	width:					12px;
}

/* SAVE THEME ************************************************************************************/
.theme-gallery 
{
	display:				inline-block;
	flex-wrap:				wrap;
	gap:					var(--theme-box-size);
	justify-content:		center;
}

.theme-box
{
	border:					1px solid var(--black);
	cursor:					pointer;
	display:				grid;
	grid-template-columns:	repeat(3, var(--theme-box-size));
	grid-template-rows:		repeat(3, var(--theme-box-size));
	position:				relative;
}

.theme-box div
{
	height:					var(--theme-box-size);
	width:					var(--theme-box-size);
}

.theme-delete
{
	border-radius:			0;
	border:					none;
	color:					white;
	cursor:					pointer;
	display:				block;
	line-height:			14px;
	min-width:				30px !important;
	text-align:				center;
	width:					30px !important;
}

.theme-box:hover
{
	border-color:			var(--outline-color);
	outline:				2px solid var(--outline-color);
}

/* VOTES *****************************************************************************************/
.theme-container
{
	display:				inline-block;
	margin:					5px;
}

.theme-votes
{
    text-align:				center;
}

#themeInfo
{
	display:				block;
	margin-bottom: 			var(--theme-box-size);
	width:					100%;
}

#top-10
{
	border-radius:			var(--border-radius-size);
	border:					1px solid black;
	display:				block;
	padding:				var(--theme-box-size);
}

.button .tip 
{
  visibility: hidden;
  width: 120px;
  text-align: center;
  border-radius: var(--border-radius-size);
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  font-size: 80%;
}

.button:hover .tip  
{
  visibility: visible;
  margin-top: 80px;
  z-index: 100;
}

/* CONTACT ***************************************************************************************/
#contact label
{
	text-align:				left;
}

#contribute input,
#contact input
{
	height: 40px;
}

#contribute input,
#contribute textarea,
#contact input,
#contact textarea
{
text-indent: 10px;
}


#contribute textarea,
#contact textarea
{
	padding-top: 10px;
	font-size: 95%;
}