body{
	color: orange;
	text-align: center;
	margin: auto;
	line-height: 0.7;
}
a{
	color: orange;
	text-decoration: none;
}
a:hover{
	color: lightblue;
}
ul{
	line-height: 2;
	list-style-type: none;
}
.grid{
	grid-template-columns: 0.3fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 300px 1fr;
	display: grid;
}
.topbar{
	grid-template-rows: 1fr;
	position: fixed;
	justify-content: space-between;
	align-items: center;
	display: grid;
	width: 90%;
}
.logo{
	grid-column: 1/2;
	grid-row: 1/2;
}
.formules{
	grid-column: 2/3;
	grid-row: 1/2;
	text-decoration: none;
	color: black;
}
.veelgesteldevragen{
	grid-column: 3/4;
	grid-row: 1/2;
}
.overons{
	grid-column: 4/5;
	grid-row: 1/2;
}
.contact{
	grid-column: 5/6;
	grid-row: 1/2;
}
.title{
	grid-column: 1/6;
	line-height: 1.5;
	font-size: 30pt;
	grid-row: 2/3;
}
.abcformule{
	grid-column: 1/6;
	grid-row:3/4;
	line-height: 1;
	padding-top: 300px;
	padding-bottom: 300px;
}
.procentueleverandering{
	grid-column: 1/6;
	grid-row:4/5;
	line-height: 1.5;
	padding-top: 300px;
	padding-bottom: 300px;
}
.richting{
	grid-column: 1/6;
	grid-row:5/6;
	line-height: 1.5;
	padding-top: 300px;
	padding-bottom: 300px;
}
.driehoek{
	grid-column: 1/6;
	grid-row:6/7;
	line-height: 1.5;
	padding-top: 300px;
	padding-bottom: 300px;
}
.driehoek2{
	grid-column: 1/6;
	grid-row:7/8;
	line-height: 1.5;
	padding-top: 300px;
	padding-bottom: 300px;
}
#functies{
	color: red;
	text-decoration: underline;
}
#functies:hover{
	color: pink;
}
#a{
	width: 35px;
}
#b{
	width: 35px;
}
#c{
	width: 35px;
}
#y1{
	width: 35px;
}
#y2{
	width: 35px;
}
#x1{
	width: 35px;
}
#x2{
	width: 35px;
}
@keyframes rotation{
	from{rotate: 0deg}
	to{rotate: 360deg}
}
.maan{
	animation: rotation 300s linear infinite;
}
.aarde{
	animation: rotation 240s linear infinite;
}
.mars{
	animation: rotation 245s linear infinite;
}
.neptunus{
	animation: rotation 160s linear infinite;
}