:root{
	--accent: #FFC;
	--tekst: #A86045;
  }
  *{box-sizing:border-box}
  
  body{
	font-family:"Segoe UI",Arial,sans-serif;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	min-height:100vh;
	background:var(--accent);
  }
  h3{
	margin:1rem 0 0.4rem;
	font-size:clamp(1.4rem,4vw,2rem);
	text-align:center;
	color: var(--tekst);
  }

#collage,.collage {
  max-width: 520px;
  margin: 1.5rem auto 0 auto;
  width: 98vw;
  background: #EEE; /* Was FFF */
  box-shadow: 0 0 7px #aaa;
  border-radius: 12px;
  padding: 0.5rem;
}

#playPanel, .collage .playPanel {
  width: 100%;
  max-width: 450px;
  margin: .5rem auto 1.2rem auto;
  padding: 0.5em;
  border-radius: 9px;
  background: #FC9 ; /* Was er niet */

}

#sortable, .collage .sortable {
  display:flex;
  justify-content:center;
  align-items:center;

  flex-wrap: wrap;
  width: 100%;
  max-width: 400px;
  min-height: 100px;
  margin: 0.5em auto 1em auto;
  padding: 0;
  background: #6FF  ; /* Was er niet */ 
}

#sortable li, .collage .sortable li { /* Dit is 1 vierkant */ 
  background-size: 400px 400px;
  width: 24%;
  margin: .4%;
  aspect-ratio: 1 !important;
  min-width: 70px;
  min-height: 70px;
  max-width: 98px;
  max-height: 98px;
  border-radius: 4px;
  list-style-type: none; /*  GW bollekes weg bij LI  */
}

#actualImageBox, .collage .actualImageBox {
  width: 90%;
  max-width: 320px;
  margin: 0.5em auto 1em auto;
  background: #99F; /* Was er niet */
}

#actualImage {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 7px;
}

#stepBox{
display:inline-flex;
}

button, .btn, .btnAndere {
  display: block;
  font-size: 1.05em;
  border: none;
  border-radius: 10px;
  background: #144577;
  color: #fff;
  margin: .5em auto .6em auto;
  padding: 14px 18px;
  width: 96%;
  max-width: 270px;
  transition: background 0.2s;
}
button:active, button:focus, .btn:active, .btn:focus {
  outline: none;
  background: #0b2e50;
}

/******************		HTML button *****************/
.myButton {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background-color: #FEE3A0;
  color: #A86045;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 600;   
  margin: 4px 2px;
  cursor: pointer;
  border: 3px solid #7E9491; 
  padding: 0.5rem 1rem; 
  line-height: 1.5;
  border-radius: 0.3rem;
}
.myButton:hover {
	background-color: #FEE3A0;color: #093  ;
	text-decoration: none;
}   

@media (max-width: 600px) {
  #collage, .collage {
    max-width: 99vw;
    padding: .15rem;
  }
  
  #playPanel, .collage .playPanel {
    max-width: 99vw;
    padding: .15em;
  }
  
  #sortable li,.collage .sortable li {
    min-width: 44px;
    min-height: 44px;
    max-width: 100px;
    max-height: 100px;
    font-size: .9em;
  }  
  
  #actualImageBox, .collage .actualImageBox {
    max-width: 97vw;
  }
  
  button, .btn, .btnAndere {
    font-size: .97em;
    padding: 10px;
    width: 98%;
    max-width: 99vw;
  }