/**************/
/* CSS REMEDY */
/**************/
*, *::after, *::before {
  box-sizing:border-box;  
  margin: 0;
  padding: 0;
}


@font-face {
	font-family: 'twix';
	src: url('../font/GoforGoldDisplayCompressed.woff') format('woff');
	src: url('../font/GoforGoldDisplayCondensed.woff') format('woff2');
	src: url('../font/GoForGoldText.woff') format('woff3');
	font-weight: normal;
	font-style: normal;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*MAIN*/
main{
	background-color: var(--background-main);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	align-content: center;
	color: var(--color-text-dark);
}


main h2{
	font-size: small;
}

main p{
	font-size: 3em;
}

main img{
	width: fit-content;
	height: auto;
}

main section{
	background-color: var(--background-section);
}

main :nth-child(3){
	display: flex;
	flex-direction: column;
	justify-content: left;
	padding: 2em;
	background-color: var(--background-main);
	color: var(--color-text-light);
}

main button{
	background-color: var(--button-color);
	border: solid;
	border-color: var(--button-color);
	padding: .5em 1.5em .5em 1.5em;
	position: center;
	border-radius: .5em;
}

/* carousel bron: carousel oefening les */

main section:nth-of-type(2) {
	display: flex;
	overflow: auto;
}

main section:nth-of-type(2) ul {
	display: flex;
	overflow: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: black;
	scrollbar-color:#f09 transparent;
}

main section:nth-of-type(2) ul li {
	flex-basis:100%;
  	flex-shrink: 0;
  	scroll-snap-align: center;
}