/* Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* tinkRworks orange: #f79520 */
/* drop shadow: filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.15)); */

/* to remove banner with logo: hide/remove .logobox, change --top-banner-height to 45px   */
/* to also remove blue banner: hide/remove .titlebox, change --top-banner-height to 0px */
:root {
	--top-banner-height: 125px;
  }

body{
	font-family:  "HelveticaNeue-Light", "Helvetica", sans-serif;
	color:rgb(51,85,138);
	background-color: #f3f0ea;
	margin: 0px;
	font-size: 18px;
	width: 100vw;
	min-width: 700px;
}


.logoBox{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 80px;
	background-color: white;
	text-align:left;
	filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.15));
}
.logoImage{
	width: 220px; /* 220x66 */
	margin-left:40px;
}


.titleBox{
	background-color: #3B5486;
	color: white;
	font-family: "Roboto", sans-serif;
	font-size: 24px;
	line-height: 2;
	text-align: center;
	width: 100vw;  
	height: 45px;
	border-radius: 0px 0px 12px 12px;
	position: absolute;
	top:80px;  /* logo is 80px high*/
	left: 0px;  
	min-width: 700px;
  }


#contentBox{
	margin: calc(var(--top-banner-height) + 75px) auto 0px;
	width: 800px;
	height: 610px;
	position: relative;
}
#yourColor{
	position: absolute;
	top: 0px;
	left: 0px;
	width:330px;
	height:600px;
	margin: 0;
}

#challengeColor{
	position: absolute;
	top: 0px;
	left: 430px;
	width:330px;
	height:600px;
}


/* circle to be colored; there are two with different ids: userCircle and challengeCircle
*/

.colorCircle{
	height: 150px;
	width: 150px;
	background-color: rgb(0,0,0);
	border-radius: 150px;
	margin: 0 auto;
	border: none;
	filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.15));
}

/* sliders and value boxes
*/

/* suggested colors for slider thumbs and boxes is:
red: #DF643B
green: #60B358
blue: #367AE4
*/

@property --redSliderColor {
	syntax: "<color>";
	inherits: false;
	initial-value: #DF643B;
  }
  
  @property --greenSliderColor {
	syntax: "<color>";
	inherits: false;
	initial-value: #60B358;
  }
  
  @property --blueSliderColor {
	syntax: "<color>";
	inherits: false;
	initial-value: #367AE4;
  }
  
  
  /*----style the sliders----*/
  input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	width: 256px;
	margin-top: 20px;
  }
  
  /* remove default focus */
  input[type="range"]:focus {
	outline: none;
  }
  
  /* slider track */
  input[type="range"]::-webkit-slider-runnable-track {
	background-color: #bbbbbb;
	border-radius: 10px;
	height: 16px;
  }
  
  input[type="range"]::-moz-range-track {
	background-color: #bbbbbb;
	border-radius: 10px;
	height: 16px;
  }
  
  /* slider thumb */
  input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	margin-top: -4px; /* Centers thumb on the track */
	background-color: #bbbbbb;
	border-radius: 50%;
	height: 26px;
	width: 26px;
  }
  
  input[type="range"]::-moz-range-thumb {
	background-color: #bbbbbb;
	border: none; /*Removes extra border that FF applies*/
	border-radius: 50%;
	height: 26px;
	width: 25px;
  }
  
  #red::-webkit-slider-thumb{
	background-color: var(--redSliderColor);
  }
  #red::-moz-range-thumb{
	background-color: var(--redSliderColor);
  }
  #green::-webkit-slider-thumb{
	background-color: var(--greenSliderColor);
  }
  #green::-moz-range-thumb{
	background-color: var(--greenSliderColor);
  }
  #blue::-webkit-slider-thumb{
	background-color: var(--blueSliderColor);
  }
  #blue::-moz-range-thumb{
	background-color: var(--blueSliderColor);
  }
  
  /* add focus for accessibility */
  #red:focus::-webkit-slider-thumb {
	outline: 3px solid var(--redSliderColor);
	outline-offset: 0.125rem;
  }
  
  #red:focus::-moz-range-thumb{
	outline: 3px solid var(--redSliderColor);
	outline-offset: 0.125rem;
  }
  
  #green:focus::-webkit-slider-thumb {
	outline: 3px solid var(--greenSliderColor);
	outline-offset: 0.125rem;
  }
  
  #green:focus::-moz-range-thumb{
	outline: 3px solid var(--greenSliderColor);
	outline-offset: 0.125rem;
  }
  
  #blue:focus::-webkit-slider-thumb {
	outline: 3px solid var(--blueSliderColor);
	outline-offset: 0.125rem;
  }
  
  #blue:focus::-moz-range-thumb{
	outline: 3px solid var(--blueSliderColor);
	outline-offset: 0.125rem;
  }

  /* divs that show slider values */
  .colorNumber{
	display: inline-block;
	font-family: inherit;
	width: 40px;
	text-align:center;
	background-color: white;
	border-radius: 10px;
	border: none;
	padding: 10px;
	cursor: pointer;
  }
  
  #redVal{
	background-color: var(--redSliderColor);
	color: white;
  }
  
  #greenVal{
	background-color: var(--greenSliderColor);
	color: white;
  }
  
  #blueVal{
	background-color: var(--blueSliderColor);
	color: white;
  }

.sliderDiv{
	margin-top: 30px;
}
  

/* buttons
*/
.btn{
	font-family:  inherit;
	font-size: inherit;
	background-color:#f79520;    /* change to  #E56700 when selected */
	border-radius: 15px;
	width: 200px;
	padding: 15px;
	display: inline-block;
	border: none;
	color: white;
	filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.15));
}

.btnSmallText{
	font-size: 12px;
}

.btn:focus{
	outline: none;
}

.buttons{
	text-align: center;
	margin-top: 35px;
}

/* feedback box
*/
#feedback{
	padding: 20px;
	text-align: center;
}

.helpBox{     
	position: absolute;  /* inside #contentBox */
	top: 10px;
	left: 360px;    /* pos of questionMark - width of helpBox */
	background-color:rgb(247,149,32);
	color: white;
	width: 400px;
	padding: 20px;
	border-radius: 20px;
	display: none;
  }
  .header{
	font-weight: 500;
	font-size: 24px;
	line-height: 2;
  }
  
  #questionMark{  
	position: absolute;  /* inside #contentBox */
	width: 30px;
	height: 30px;
	font-size: 30px;
	font-weight: normal;
	text-align: center;
	background-color: #60B358;
	color: white;
	padding: 5px 5px 5px 5px;
	border-radius: 50%;
	left: 760px;    /*pos based on width and pos of #yourColor and #challengeColor */
	top: 10px;
	cursor: pointer;
	display: block;
  }