body{
	font-family: "Raleway", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}
.lazyload {
  filter: blur(20px);
  transition: filter 0.5s ease-out;
}
.lazyload.loaded {
  filter: blur(0);
}
#background_image{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire screen */
    z-index: -1; /* Places the image behind other content */
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
	background-color:#00000030;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
	border-radius: 10px;
}
button{
	background-color:#00000030;
	border:3px solid #00000060;
	display:inline-block;
	padding:8px 8px;
	text-align:center;
	font-size:16px;
	cursor: pointer;
	border-radius: 4px;
}
button:hover{
	background-color:#00000060;
	border:3px solid #00000080;
}
#skipToEndButton{
	display:none;
}
#superContainerDiv{
	overflow: visible;
	padding:0px;
	text-align:left;
	max-width:760px;
	margin-top:150px;
	position:relative;
	z-index:1;
}
#containerDiv{
		background-color: rgba(255,255,255,0.75);
	  border-radius: 4px;
	  box-shadow: 0 0 0px 15px rgba(160, 75, 60, 0.9);
	  overflow: visible;
		padding:20px;
		text-align:center;
		max-width:760px;
}
#statement{

}
#logoImg{
	max-width: 150px;
	max-height: 150px;
	position: absolute;
	margin: -100px;
}
.main-svg{
	border-radius: 10px;
	box-shadow: inset 0 0 10px 2px rgba(100, 100, 100, 0.3);
}
#submit{
	margin-top:20px;
}
.sliderLabels{
	border:none;
	width:100%;
}
#sliderLeftLabel{text-align:left;}
#sliderRightLabel{text-align:right;}
.scenarioName{
	color: black;
	-webkit-text-fill-color: white;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
	font-weight:bold;
	display:inline-block;
}
.scenarioStrapline{
	font-style:italic;
	margin-top:5px;
	margin-bottom:10px;
	display:inline-block;
}
.scenarioDescription{
	margin-bottom:25px;
	display:inline-block;
}
.mostCloselyAlignedTitle{
	font-size:34px;
	font-weight:900;
}
.otherScenarioTitle{
	font-size:20px;
	font-weight:600;
}
.emphasisedText{
	font-weight:900;
	font-size:23px;
	line-height:18px;
}
.introText{
	font-size:18px;
}
#quizSpan{
	display:none;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dashed #00000075;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #000000b0;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

a{
	cursor: pointer;
	background-color:#00000020;
	color:inherit;
	text-decoration:inherit;
}
a:hover{
	background-color:#00000040;
}
.tabTitle{
	cursor: pointer;
	background-color:#00000020;
	color:inherit;
	text-decoration:inherit;
	font-size:20px;
	font-weight:600;
}
.tabTitle:hover{
	background-color:#00000040;
}
.tabTitle.selectedTab{
	background-color:#00000050;
}
.otherlink, .otherlink:hover{
	background-color:unset;
}
.ratingLevelLabel{
	font-size: 90%;
	text-align: center;
	line-height: 0px;
	color: rgb(40,40,40);
}
.explanationTab{
	display:none;
}