body {
    font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
	background-color:hsla(41, 22%, 95%, 1);
	display:flex;
	flex-direction:column;

	/* color variables */
	/* --group-color: rgba(200, 200, 255, 0.6); */
	--group-color: rgba(24, 24, 24, 0.6);

	--outer-color: rgba(255, 255, 255, 0.2);
	--clear: rgba(0,0,0,0);
}

#outerContainer {
    margin:auto;
    padding:20px;
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
	background-color: var(--outer-color);
}



@media screen and (min-width: 800px) {
	/* For large screens */
	#outerContainer {
		width:700px;
	}
}


@media screen and (max-width: 800px) {
	/* For phones */
	#outerContainer {
		width:90%;
	}
}




.buttonCategory {
    background-color: var(--group-color);
    padding:20px;
	box-shadow: 1px 1px 5px 0px;
	margin:10px;
	text-align:center;
}

.buttonCategory > .buttons {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
	justify-content: center;
}



#moodLightDropDown, #moodLightDropDown > option {
    width: 100px;
    text-align: center;
    height: 60px;
    border-radius: 4px;
    box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
    padding: 10px 20px;
    transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    border: 0px;
    color: rgba(30, 22, 54, 0.6);
    background-color: white;
    cursor: url(remote.png) 20 20, pointer;
}


#moodLightDropDown:hover{
        color: rgba(255, 255, 255, 0.85);
        box-shadow: rgba(30, 22, 54, 0.7) 0 80px 0px 2px inset;
}

#moodLightDropDown > option{
        color: rgba(255, 255, 255, 0.85);
	background-color:rgba(30,22,54,0.7);
        box-shadow: rgba(30, 22, 54, 0.7) 0 80px 0px 2px inset;
}




.buttonCategory > .buttons > button {
	-webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	display: block;
	margin: 5px 5px;
	max-width: 10em;
	text-decoration: none;
    border-radius: 4px;
    border:0px;
    background-color:white;
	padding: 20px 30px;

	cursor: url(remote.png) 20 20, pointer;
	/* cursor: url(cursor2.png) 30 0, pointer; */

	color: rgba(30, 22, 54, 0.6);
	box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}

.buttonCategory > .buttons > button:hover {
	color: rgba(255, 255, 255, 0.85);
	box-shadow: rgba(30, 22, 54, 0.7) 0 80px 0px 2px inset;

}
/* colors = [85D6A0,EBF4DD,4D1947,C95EB9,6ECFAE,CDC2EB,2A2E7E,AFBEE4,246B53] */


hr {
    border: 0;
    height: 1px;
	background-image: linear-gradient(90deg,
									rgba(0,0,0,0),
									rgba(0,0,0,0.5),
									rgba(0,0,0,0));
}