@import url('https://fonts.googleapis.com/css?family=Rubik:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cabin:400,700&display=swap');

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Cabin', sans-serif;
	font-weight: 400;
	font-size: 1em;
}

#nav {
	position: fixed;
	transition: top 0.5s;
	background-color: white;
	width: 100%;
	padding: 5%;
	z-index: 2;
}

#nav ul {
	list-style-type: none;
	margin: 0;
  	padding: 0;
  	margin-left: 15%;
  	margin-top: 2%;
}

#nav li {
	display: inline;
	margin-left: 10%;
}

#nav a {
  	color: black;
  	text-decoration: none;
  	font-weight: 700;
  	transition: 0.2s ease;
}

h1 {
	font-family: 'Rubik', sans-serif;
	font-size: 2em;
}

#logo {
	width: 10%;
	position: absolute;
	left: 5%;
	top: 25%;
}

#me {
	margin-top: 15%;
}

#me, #whatiuse {
	width: 60%;
}

#whatido, #contact {
	width: 70%;
}

.grid-container {
	display: grid;
	grid-template-columns: auto;
}

.grid-item-a {
	text-align: center;
	margin-top: 15%;
	margin-bottom: 5%;
}

.grid-item {
	margin-bottom: 40%;
	padding: 0 15% 0 15%;
}

#resume, .look {
	text-decoration: none;
	background-color: #ff0055;
	border-radius: 1000px;
	color: white;
	font-weight: 700;
	padding: 10px 40px 10px 40px;
	box-shadow: 5px 5px 10px lightgrey;
	transition: 0.2s ease;
}

#first, #second {
	list-style-type: none;
	margin: 0;
  	padding: 0;
  	display: inline-block;
}

#second {
	margin-left: 20%;
}

#first li, #second li {
	margin-top: 40px;
}

#first a, #second a {
	color: lightgrey;
  	text-decoration: none;
  	font-weight: 700;
  	font-size: 1.2em;
  	transition: 0.2s ease;
}

#contactdiv {
	margin-bottom: 20%;
}


@media only screen and (min-width: 600px) {
	#nav a {font-size: 1.5em;}
	#logo {width: 8%;}
	#me, #whatiuse {width: 40%;}
	#whatido, #contact {width: 50%;}
	h1 {font-size: 3.5em;}
	body, #resume, .look {font-size: 1.5em;}
	#nav ul {margin-top: 1%;}
	#resume, .look {padding: 15px 60px 15px 60px;}
	#first a, #second a {font-size: 1.7em;}
	#second {margin-left: 30%;}
}

@media only screen and (min-width: 960px) {
	.grid-container {grid-template-columns: auto auto; padding: 0 10% 0 10%; margin-top: 250px; grid-gap: 10% 0;}
	.grid-item-a {margin-top: 0; margin-bottom: 0;}
	.grid-item {padding: 0 20% 0 20%; margin-bottom: 0}
	body {font-size: 1em;}
	h1 {font-size: 2em;}
	#logo {width: 3%;}
	#nav a {font-size: 1em;}
	#nav ul {margin-top: 0; margin-left: 5%;}
	#nav {padding: 3%;}
	#me, #whatiuse, #whatido, #contact {width: 60%; margin-top: 0;}
	#resume, .look {font-size: 1em; padding: 10px 45px 10px 45px;}
	#resume:hover, .look:hover {padding: 10px 55px 10px 55px; filter: brightness(80%); box-shadow: 1px 1px 5px;}
	#nav a:hover {color:#ff0055;}
	#first a, #second a {font-size: 1em;}
	#first a:hover, #second a:hover {color:#ff0055;}
	#one {order: 2;}
	#een {order: 1;}
	#two {order: 3;}
	#twee {order: 4;}
	#three {order: 5;}
	#drie {order: 6;}
	#four {order: 8;}
	#vier {order: 7;}
	#five {order: 10;}
	#vijf {order: 9;}
	#six {order: 12;}
	#zes {order: 11;}
	#seven {order: 14;}
	#zeven {order: 13;}
	#eight {order: 15;}
	#contactdiv {order: 16;}
}