html{scroll-behavior:smooth}
html, body{width:100%;height:auto;overflow-x:hidden}
/* Designing for scroll-bar */::-webkit-scrollbar{width:5px}
/* Track */::-webkit-scrollbar-track{background:gainsboro;border-radius:5px}
/* Handle */::-webkit-scrollbar-thumb{background:black;border-radius:5px}
/* Handle on hover */::-webkit-scrollbar-thumb:hover{background:black}
#puzzel{display:block;position:absolute;left:0;top;0;right:0;bottom:0;width:100%;height:100%}
#T{
	position:fixed;
	top:0%;
	left:0px;
 	width:100%;
	height:50%;
	text-align:center;
	z-index:3;
	background-color:#444;
    border-bottom:solid 5px #333;
	-webkit-transition: top 1.5s ease-in-out;
	transition: top 1.5s ease-in-out;
	transition-duration: 400ms;
}
.key-T{
	display:flex;
	flex-wrap:wrap;	
	gap: 10px 10px;	
	position:absolute;
	z-index:4;
	left:calc(50% - 8vmax - 50px);
	bottom:-8px;
	opacity:1;
	width:calc(16vmax + 30px);
	padding:15px;
    pointer-events: all;
	background-color:#555;
    border-top:double 10px #333;
	border-left:double 10px #333;
	border-right:double 10px #333;
	border-bottom:none;
}
.raadsel{position:relative;visibility:visible;float:left;height:4vmax;width:4vmax;opacity:0.75;
background-color:LightGoldenRodYellow;border-radius:25%;font-size:2vmax}
.raadsel:hover{background-color:CadetBlue}
#lightbar-display-v-lijn{z-index:1;border-right:solid 3px #333;border-top:solid 3px #333;display:block;position:absolute;width:520px;height:20.3vh;left:calc(24% + 8vmax + 50px);bottom:16%}
#tip{z-index:5;cursor:pointer;border:solid 3px #333;background-color:white;display:block;position:absolute;width:2vw;height:3vh;font-size:1vmax;left:calc(53.4% + 8vmax + 50px);bottom:75%;padding:2px}
#sequence-tip-lijn{z-index:4;background:#333;display:block;position:absolute;width:3px;height:19.5vh;left:calc(54.5% + 8vmax + 50px);bottom:40%}
#sequence{z-index:10;border:solid 3px #333;background-color:white;display:block;position:absolute;width:2vw;height:4vh;font-size:1.5vmax;left:calc(53.5% + 8vmax + 50px);bottom:30%}
#sequence-correct-lijn{background:#333;display:block;position:absolute;width:3px;height:7vh;left:calc(54.5% + 8vmax + 50px);bottom:16%}
#emoticon{border:solid 3px #333;position:absolute;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:flex-start;
left:calc(50% + 8vmax + 50px);bottom:5%;width:5.75vw;height:5vh;z-index:10000;background-color:#555}
#reset{cursor:pointer;top:3vmax;left:calc(50% + 8vmax + 75px);position:absolute;display:flex;
background-color:none;border-radius:0%;font-size:1vmax}
#display{display:flex;position:relative;width:2.5vw;font-size:2vmax}
#correct{display:flex;position:relative;width:2.5vw;font-size:2vmax;margin-left:0.5vmax}
#opgelost{position:fixed;height:4.5vmax;width:4.5vmax;opacity:0.75;background-color:red;border-radius:50%;position;absolute;left:calc(50% - 2.25vmax);top:calc(80% - 2.25vmax);z-index:15;-webkit-transform:scale(0.5);transition-duration:100ms;opacity:1;display:block;font-size:1vmax}
#ingedrukt{display:none;position:absolute;top:5%;left;50%;width:12vw;height;10vh}
#B{
	position: fixed;
	bottom:0%; 
	left:0px;
	width:100%;
	height:50%;
	text-align:center;	
	z-index:2;
	background-color:#444;
    border-top:solid 5px #333;
	-webkit-transition: bottom 1.5s ease-in-out;
	transition: bottom 1.5s ease-in-out;
	transition-duration: 400ms;
}
.key-B{
	display:flex;
	flex-wrap:wrap;	
	gap: 10px 10px;	
	position:absolute;
	z-index:4;
	left:calc(50% - 8vmax - 50px);
	top:-8px;
	opacity:1;
	width:calc(16vmax + 30px);
	padding:15px;
    pointer-events: all;
	background-color:#555;
    border-top:none;
	border-left:double 10px #333;
	border-right:double 10px #333;
	border-bottom:double 10px #333;
}
#layout{position:absolute;width:100%;height:auto;display:flex;justify-content:center;align-items:center;background-color:white}
#layout-content{width:70%}
#layout-content header{position:relative;width:90%;display:block;margin-left:3.75%}
#layout-content header h1{line-height:150%}
#layout-content header p{line-height:150%}
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 90%;
  margin-left:3.75%;
  margin-top:50px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-radius:0%;
  position:relative;
  display:block;
}

.act, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.act:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  width:100%;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
#layout-content pre{position:relative;width:100%;background-color:black;overflow-x:scroll}
#layout-content code p{color:white;width:100%;padding:0px 20px 0px 20px}
#include_comments{position:relative;display:block;margin-top:50px}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {  
  /* CSS */
.key-T{
	left:calc(50% - 9vmax - 45px);
	bottom:-9px;
	width:calc(20vmax + 30px);
	padding:10px;
	z-index:10;
}
.key-B{
	left:calc(50% - 9vmax - 45px);
	top:0px;
	width:calc(20vmax + 30px);
	padding:10px;
	z-index:10;
}
.raadsel{position:relative;visibility:visible;float:left;height:5vmax;width:5vmax;opacity:0.75;padding:0px;background-color:LightGoldenRodYellow;border-radius:25%;font-size:3vmax}
.raadsel:hover{background-color:CadetBlue}
#lightbar-display-v-lijn{z-index:1;border-right:solid 2px #333;border-top:solid 2px #333;display:block;position:absolute;width:295px;height:13.7vh;left:calc(-25.5% + 8vmax + 50px);bottom:16%}
#tip{border:solid 2px #333;width:5vw;height:2vh;font-size:1.5vmax;left:calc(58% + 8vmax + 50px);bottom:73.5%}
#sequence-tip-lijn{width:2px;height:21.5vh;left:calc(61.5% + 8vmax + 50px);bottom:35%}
#sequence{z-index:10;border:solid 3px #333;background-color:white;display:block;position:absolute;width:4vw;height:2vh;font-size:1.5vmax;left:calc(59% + 8vmax + 50px);bottom:30%;padding-top:3px}
#sequence-correct-lijn{background:#333;display:block;position:absolute;width:2px;height:6.5vh;left:calc(61.5% + 8vmax + 50px);bottom:16%}
#emoticon{border:solid 2px #333;left:calc(50% + 8vmax + 60px);width:12vw}
#display{width:3.5vw;font-size:2vmax;margin-left:0.25vmax}
#correct{width:2vw;font-size:2vmax;margin-left:0.75vmax}
#reset{left:calc(50% + 8vmax + 62.5px);font-size:1.5vmax}
#opgelost{position:fixed;height:6vmax;width:6vmax;background-color:red;border-radius:50%;position;absolute;left:calc(50% - 4vmax);top:calc(75% - 4vmax);z-index:15;-webkit-transform:scale(1);transition-duration:100ms;opacity:1;display:block;font-size:1vmax}
.collapsible{width:80%!important}
.content{width:80%!important;overflow-x:scroll}
	}