.index {
	background-color: #14151c;
	color: white;
	font-family: "Comic Neue", cursive;
  	font-weight: 50;
 	font-style: normal;
}

.warning {
	position: absolute;
	top: 5px;
	left: 15px;
	z-index: 1;
	color: tomato;
}

.pijl {
	position: absolute;
	top: 65%;
	transform: translateY(-10%);
	left: 10px;
	height: 400px;
}

.h1index {
	position: absolute;
	top: 50px;
	left: 200px;
}

.introtextindex {
  	position: absolute; 
  	top: 10px;
	align-items: center;
	justify-content: center;
	text-align: center;
 	left: 50%;
	transform: translateX(-50%); /* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX bron */
	display: flex;
  	flex-direction: column;
  	gap: 3px;
	text-align: center;
	color: floralwhite;
}

.intro {
        position: relative;
        background-image: url("images/kassadin.png");
        background-size: cover;
        background-position: center;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
	color: floralwhite;
        background-attachment: fixed;
}

.introgrid {
	display: flex;
	gap: 50px;
	position: relative;
	top: 30vh;
}

.introblock {
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: rgba(56, 33, 74, 0.095);
	color: floralwhite;
	padding: 50px;
	border-radius: 10px;
	width: 250px;
	text-align: center;
}

.indexgrid {
	display: grid;
	grid-template-columns: 600px 600px;
	grid-auto-rows: 400px 400px;
	gap: 80px;
	justify-content: center;
	margin-top: 200px;
}

.indexblock1 {
	width: 600px;
	height: 400px;
	background-color: white;
	background-size: contain;
	background-image: url("images/bytes.jpg");
        background-position: center; 
        transition: transform 0.3s;
        border: 5px inset black;
	transition: transform 0.3s;
}

.indexblock2 {
	width: 600px;
	height: 400px;
	background-color: white;
	background-size: cover;
	background-image: url("images/kleur.png");
        background-position: center; 
        transition: transform 0.3s;
        border: 5px inset black;
	transition: transform 0.3s;
}

.indexblock3 {
	width: 600px;
	height: 400px;
	background-color: black;
	background-size: fill;
	background-image: url("images/data.png");
        background-position: center; 
        transition: transform 0.3s;
        border: 5px inset black;
	transition: transform 0.3s;
}

.indexblock4 {
	width: 600px;
	height: 400px;
	background-color: white;
	background-size: contain;
	background-image: url("images/beeld.png");
        background-position: center; 
        transition: transform 0.3s;
        border: 5px inset black;
	transition: transform 0.3s;
}

.indexblock1:hover, .indexblock2:hover, .indexblock3:hover, .indexblock4:hover {
  transform: scale(1.05);
}

.introblock:hover {
	transform: scale(1.1);
}

.alttext {
	color: black;
	opacity: 0.5;
}

.alttext2 {
	color: white;
	opacity: 0.5;
}

a {
	color: #55738a;
}