body {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	background-color: #91729C;
	position: relative;
	min-height: 100vh;
	padding-bottom: 3em;
}

/* Header and navbar css :) :D */

header {
	background-color: #6E456C;
	position: relative;
	z-index: 1;
}

header img {
	position: absolute;
	border-radius: 10vw;
    left: 10%;
    top: 10%;
	width: 10vw;
	transition: width 1s;
	animation: lekkermannetje 15s infinite;
}

header img:hover {
	width: 13vw;
}

header nav ul {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
}

header nav ul li {
	list-style-type: none;
}

header nav ul li a {
	font-size: 15px;
	color: white;
	text-decoration: none;
	display: block;
	padding: 1em;
	transition: padding 0.7s;
	z-index: 1;
}

header nav ul li a:hover {
	padding: 1em 2em;
	background-color: #B49ECD;
	animation: rotate 2s infinite;
}

a:focus, button:focus, input[type="submit"]:focus {
	outline: 5px solid red;
}

/* Le epic banner */
.banner {
	background-image: url("images/banner2.jpg");
	background-repeat: no-repeat;
    background-position: 100% 31%;
    background-size: 135%;
	filter: sepia(30%);
}

.nuttelozediepte {
	animation: skew 10s infinite;
}

.banner h1, h2 {
	margin: 0;
	color: white;
	line-height:1em;
	font-size:7vw;
	text-align: center;
	text-shadow: 2px 2px #000;
}

.banner h2 {
	font-size:6vw;
}

.banner article {
	padding: 9vw;
	overflow: hidden;

}

.banner article img {
	width: 20vw;
	float: left;
	border-radius: 20px
}

/* main */
main {
	padding-bottom: 4vw;
}

/* homepage */
.homesec {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 2vw;
	grid-auto-rows: 49vw;
    width: initial;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vh;
}


.homesec article:last-child {
    grid-column-start: inherit;
    grid-column-end: inherit;
}

a:focus img {
	outline: 5px solid red;
	filter: blur(2px) contrast(110%);
}


.homesec article {
	background-color: white;
	overflow: hidden;
	position: relative;
}

.homesec article img {
	width: 100%;
	transition: filter 0.7s;
}

.homesec article:hover img {
	filter: blur(2px) contrast(50%);
}

.homesec article:hover {
	cursor: pointer;
}

.tag {
	position: absolute;
	margin: 0;
	padding-left: 5%;
    padding-right: 5%;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 5vw;
	color: white;
	transition: 1s left;
	background-color: #6e456c;
}

.overlay {
    position: absolute;
    margin: 0;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5vw;
    color: white;
	text-shadow: 2px 2px #000;
    font-weight: bold;
    transition: 0.6s top;
}

/* Detail pagina */
.detailsec {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 2vw;
    width: initial;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vh;
}


.detailsec article {
	background-color: #EAD8FF;
	/* overflow: hidden; */
	position: relative;
	padding: 1em 2em;
}

.detailsec article:last-child {
    grid-column-start: inherit;
    grid-column-end: inherit;
}

.detailsec article img {
	width: 100%;
}

.becomebigr {
	transform: scale(1);
	transition: 1s;
	z-index: 1;
	box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.0);
}

.becomebigr:hover {
	position: relative;
	transform: scale(1.8) translate(-30%, -22%);
	z-index: 3;
	box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.6);
}

.becomebigl {
	transform: scale(1);
	transition: 1s;
	z-index: 1;
	box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.0);
}

.becomebigl:hover {
	position: relative;
	transform: scale(1.8) translate(30%, -22%);
	z-index: 3;
	box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.6);
}

.wide {
	grid-column-start: 1;
	grid-column-end: 1;
}


/* Contact */

.contactsec {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 2vw;
	width: initial;
	width: initial;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vh;
}

.contactsec article {
	background-color: #EAD8FF;
	padding: 1em 2em;
}

iframe {
    height: 35em;
    width: 100%;
    border-style: none;
}

label {
	display:block;
	margin-top: 1em;
}

input[type='text'], input[type='email'] {
	background-color: #fff;
	width: 30em;
	height: 2em;
    border: 1px solid #91729c;
	padding-left: 0.5em;
	width: 100%;
	transition: border 0.5s;
}

input[type='text']:focus, input[type='email']:focus, textarea:focus {
	border: 3px solid #91729c;
	outline: none;
}

input[type='radio'] {
	display: none;
}

input[type="radio"]+label {
    background-color: #91729c;
    color: white;
    padding: 0.5em;
    cursor: pointer;
    transition: padding 0.5s;
}

input[type="radio"]:checked+label {
	background-color: #6e456c;
	padding:1em;
}


/* https://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label */

textarea {
	resize: none;
	width: 100%;
	border: 1px solid #91729c;
	transition: border 0.5s;
}

input[type="submit"], button {
	background-color: #6e456c;
	border-radius: 25px;
    color: white;
    border: none;
    padding: 0.7em 3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
	cursor: pointer;
	transition: padding 0.5s;
}

button:hover {
	padding: 1em 2em;
}


/* over mij */
.progress {
	width: 100%;
	background-color: grey;
}

.progress div {
	background-color: #6e456c;
	padding-left: 10px;
	color: white;
}

#middel {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

#headshot {
	width: 25%;
}

#htmlprogress {
	width: 90%;
}
#cssprogress {
	width: 90%;
}
#xdprogress {
	width: 90%;
}
#photoshopprogress {
	width: 85%;
}
#illustratorprogress {
	width: 75%;
}

#aeprogress {
	width: 65%;
}
#javascriptprogress{
	width: 40%;
}
#phpprogress {
	width: 30%;
}


/* footer */
footer {
	text-align: center;
	background-color: #6E456C;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	position: absolute;
    bottom: 0;
    width: 100%;
    color: white;
}


@media (MIN-width: 768px) { 
	/* header desktop */
	header nav ul li a {
		font-size: 20px;
	}
	
	header img {
		top: 0;
		width: 5vw;
	}
	
	header img:hover {
		width: 10vw;
	}

	/* banner desktop */
	.banner h1, h2 {
		font-size:5vw;
		text-shadow: 5px 5px #000;
	}

	.banner h2 {
		font-size: 2vw;
	}

	/* home desktop */
	.homesec {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 24vw;
		width: 80vw;
	}


	.overlay {
		top: -30%;
		font-size: 2vw;
		text-shadow: none;
	}

	.homesec article:hover .overlay {
		top: 30%;
	}

	.tag {
		left: -100%;
		font-size: 2vw;
	}

	.homesec article:hover .tag {
		left: 50%;
	}

	/* detailpagina desktop */
	.detailsec {
		grid-template-columns: repeat(2, 1fr);
	    width: 80vw;
	}
	.detailsec article:last-child {
		grid-column-start: 1;
		grid-column-end: 3;
	}



	.stoppen  article:last-child {
	grid-column-start: inherit;
    grid-column-end: inherit;
}

.wide {
	grid-column-start: 1;
	grid-column-end: 3;
}

	
	/* contactpagina desktop */
	.contactsec {
		width: 40vw;
	}
} 

/* Animaties */
/* 3d tekst animatie */
@keyframes skew {
	0%   { transform: rotateX(-5deg) rotateY(10deg); }
	50% { transform: rotateX(5deg) rotateY(-10deg); }
	100%   { transform: rotateX(-5deg) rotateY(10deg);; }
}

/* rotatie */
@keyframes rotate {
	0%   { transform: scale(1); box-shadow: 20px 20px 13px 0px rgba(0,0,0,0.4); }
	50%   { transform: scale(1.1); box-shadow: 30px 30px 13px 0px rgba(0,0,0,0.3); }
	100% { transform: scale(1); box-shadow: 20px 20px 13px 0px rgba(0,0,0,0.4); }
}

/* voor het lekkere mannetje */
@keyframes lekkermannetje {
	0%   { transform: rotate(10deg); }
	50%   { transform: rotate(-10deg); }
	100% { transform: rotate(10deg); }
}