@charset "utf-8";
/* CSS Document */


/**alles**/
html { 


	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";

	
}

body { 
	color: black;
    padding-top: 0px;
	padding-right: 150px;
	padding-left: 150px;
	padding-bottom: 0px;

}


nav { 
display: inline;
font-size: 25px;
position: relative;
color: #FB93B6;

}


.navComp {
	text-align:center;
	
}




.homeActive {
	color:#A5818D;
		background-color: #FB93B6;
} 

.dropdown { 
    border: black none;
	padding: 13px 0px ;
	list-style: none;
	text-decoration: none;
	width: 203px;
	float: right;
	background-color: rgba(0,0,0,0.4);
	color:white;
	display: inline;
}

.navigation { 
    border: black none;
	padding: 13px 0px ;
	list-style: none;
	text-decoration: none;
	width: 203px;
	float: right;
	background-color: rgba(0,0,0,0.4);
	color:white;
	display: inline;
}

.dropdown:hover{ 
    background-color: #FB93B6;
	color:#A5818D;
	padding: 13px 0px;
	display: inline;	
}


.navigation:hover{ 
    background-color: #FB93B6;
	display: inline;
	color:#A5818D;
	padding: 13px 0px;
}



/**Homepagecss**/
.homepage{
	background-image: url("../images/041122_0004.JPG");
	background-size: cover;
		
}

.grid-container { 
display: grid;
border: red none 10px;
	grid-template-columns: repeat(2, 49%);
	grid-auto-rows: 150px;
grid-row-gap: 10px;
	grid-column-gap: 31px;
	height: 1000px;
	width: 1280;
	background-color: rgba(0);
		
}

/**grid cards**/
.cards { 
	padding: 10px;
	border-radius: 10%;
	border: none black;
	height: 300px
}


.header {      /**op elke pagina gebruik ik dezelfde header in op dezelfde plaats in het grid**/
	
	grid-column-start: 1;
	grid-column-end: 3;
	text-align: center;

}


.ster{                        /**maak hier een "return" button van**/
    float: left;
	margin-top: -100px;
	margin-left: -200px;

}
.card2 {
    grid-row: 2 / 4;
	grid-column: 1 / 2;
	background-color: white;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	padding: 10px 40px 10px 40px;
	font-size: 20px;
	
}


.button {
	background-color: #FB93B6;
	text-decoration: none;
	text-align: center;
	padding: 15px;
	color: black;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	border-radius:20%;
	float: right;
}

.button:hover {
	background-color:#A5818D;
}



.card3 { 
    background-image: url("../images/WhatsApp Image 2022-10-06 at 21.23.45.jpeg");
	background-size:cover;
	grid-row: 2 / 4;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	text-decoration: none;
}

.card3:hover {
	background-color: rgba(255,255,255,0.20);
	background-blend-mode: overlay;
	
}


.triplett { 
    padding: 10px;
	background-color: #FB93B6;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	border-radius: 10px;
	margin: 10px 10px 10px 10px;
	color: black;
	text-decoration: none;
}

.card4 {
	background-image: url("../images/Screenshot_20221114_133641.png");
	background-size: cover;
	grid-column: 3 / 2;
	grid-row: 5 / 5;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	text-decoration: none;
		
}

.card4:hover {
	background-color: rgba(255,255,255,0.20);
	background-blend-mode: overlay;
}

.han { 
    background-color: #FB93B6;
	border-radius: 15%;
	padding: 10px ;
	color: black;
	margin: 290px 20px 20px 20px;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
}

.card5 {
	grid-column: 1 / 2;
	grid-row: 5 / 5;
	background-image: url("../images/041122_0008.JPG");
	background-size: cover;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	text-decoration: none;
}

.card5:hover {
		background-color: rgba(255,255,255,0.20);
	background-blend-mode: overlay;
}
.zelf { 
background-color: #FB93B6;
	border-radius: 15%;
	padding: 10px;
		color: black;
	margin: 290px 20px 20px 20px;
		box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
}


/**portfoliopagina eigen werk**/
.portfolioZelf {
	background-color: black;
	color: white;
}



/**portfoliopagina HAN**/
.portfolioHan {
	background-image: url("../images/IMG_20191120_083947.jpg");
	background-size: cover;
	height: 1500px
}



.grid-containerHan { 
	display: grid;
background-color: rgba(255,255,255,0.0);
	grid-template-columns: repeat(2, 49%);
	grid-auto-rows: 150px;
grid-row-gap: 10px;
	grid-column-gap: 31px;
	height: 1400px;
	width: 1280;
	color:black;
}

.cardsHan { 
Border: none black;
	color: white;
	text-decoration: none;
}

.card3Han:hover {
		background-color: rgba(255,255,255,0.20);
	background-blend-mode: overlay;
}

.card4Han:hover {
		background-color: rgba(255,255,255,0.20);
	background-blend-mode: overlay;
}

.card5Han:hover {
		background-color: rgba(255,255,255,0.20);
	background-blend-mode: overlay;
}

.card6Han:hover {
		background-color: rgba(255,255,255,0.20);
	background-blend-mode: overlay;
}

.card7Han:hover {
		background-color: rgba(255,255,255,0.20);
	background-blend-mode: overlay;
}
.card2Han { 
	padding:0px 20px;
	background-color: rgba(0,0,0,0.4);
    grid-column:1 / 2 ;
	grid-row:2 / 2;
	border-radius: 15%;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	color: white;
}

.card3Han { 
padding:0px 20px;
grid-column:1 / 2 ;
	grid-row:3 / 5;
		border-radius: 15%;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.4);
	background-image: url("../images/Ster Open up Poster.png");
	background-size: cover;
		
}

.card4Han { 
	padding:0px 20px;
		border-radius: 15%;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.4);
grid-column:2 / 2 ;
	grid-row:2 / 4;
	background-size: cover;
	background-image: url("../images/Conceptmap.png");
	
}

.card5Han { 
	padding:0px 20px;
		border-radius: 15%;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.4);
grid-column:2 / 2 ;
	grid-row:4 / 6;
	background-size: cover;
	background-image: url("../images/IMG_20221107_143102.jpg");
	
}

.card6Han {
	padding:0px 20px;
		border-radius: 15%;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.4);
grid-column: 1 / 2 ;
	grid-row: 5 / 7;
	background-image: url("../images/Screenshot_20221204_193635.png");
	background-size: cover;
}

.card7Han {
	padding:0px 20px;
		border-radius: 15%;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.4);
grid-column: 2 / 2;
	grid-row: 6 / 8;
	background-size: cover;
}

/**Conceptmap uitvergroot**/
.conceptmap {
	background-color: black;
	color: white;
}

.conceptmapimg {
	margin-top: 50px
}

.cmtext { 
font-size: 25px
}


.poster {
	background-color: black;
	color: white;
}
.pijl {
	margin-left: -700px
}


/**portfolioproces**/


.codePage {
	background-image: url("../images/140621_0051.JPG");
	background-size: cover;
	
}

.grid-containerCode {
		display: grid;
background-color: rgba(255,255,255,0.0);
	grid-template-columns: repeat(2, 49%);
	grid-auto-rows: 150px;
grid-row-gap: 10px;
	grid-column-gap: 31px;
	height: 1500px;
	width: 1280;
	color:white;
}

.card2C {
		padding:0px 20px;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.4);
grid-column: 2 / 2;
	grid-row: 2 / 10;
}

.card3C { 
			padding:0px 20px;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.4);
grid-column: 1 / 2;
	grid-row: 2 / 10;
}

.eindSchets { 
margin-left: 170px;
}

/**Wicked assignments**/
.wickedProblems{
	background-image: url("../images/140621_0047.JPG");
	
		

}
.grid-containerWicked {
	
	display: grid;
background-color: rgba(255,255,255,0.0);
	grid-template-columns: repeat(2, 49%);
	grid-auto-rows: 150px;
grid-row-gap: 10px;
	grid-column-gap: 31px;
	height: 4000px;
	width: 1280;
	color:white;
}

.card2W {
	padding:0px 20px;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.4);
grid-column: 2 / 2;
	grid-row: 2 / 26;
}

.card3W { 
	padding:0px 20px;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.4);
grid-column: 1 / 2;
	grid-row: 2 / 26;
}

.abimg {
	padding-top: 80px;
}


.band {
	margin-top: 50px;
}

.dxtimg { 
 margin-top: 55px;
}

.avatar {
	margin-top: 50px;
}

.dwerg {
	margin-left: 235px
}

.avatarText { 
margin-top: 50px;
}

.voedingText {
	margin-top: 50px;
}


.mtimg {
	margin-top: 250px;
}

.mt1 {
	margin-left: 65px;
}

.mt2 {
	margin-left: 65px;
}

.ap{
	margin-top: 70px;
	
}

.aptext{
	margin-top: 120px;
	
}


/**About Pagina**/
.aboutPage {
	background-image: url("../images/140621_0052.JPG");
	background-size: cover;
	
}

.grid-containerAbout { 
	display: grid;
background-color: rgba(255,255,255,0.0);
	grid-template-columns: repeat(2, 49%);
	grid-auto-rows: 150px;
grid-row-gap: 10px;
	grid-column-gap: 31px;
	height: 800px;
	width: 1280;
}
.aboutText {
	color: white;
}
 
.cardsA {
	background-color: rgba(0,0,0,0.40);
	grid-row: 2 / 5;
	border-radius: 20%;
	padding: 25px 40px
}


.portret { 
margin: -300px 10px 10px 10px
}


.footer {  /**ik gebruik op elke pagina dezelfde footer deze laat ik buiten het grid zodat deze wat breder kan zijn**/
background-color: rgba(0,0,0,0.40);
	color: white;
	padding: 10px;
	margin: 50px -130px 0px 
	
}