.card{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
    background-image: url("back.gif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-filter: grayscale(20%); /* Safari 6.0 - 9.0 */
    filter: grayscale(20%);
}
.dot{
	--background-color: #68b417;

	width: 50%;
	height: 50vh;
	display: flex;
	align-items: stretch;
	align-content: stretch;
	justify-content: space-around;
}
body{
	margin: 0px;
	padding: 0px;
}
.innerDot{
	margin: auto;
	padding: 0px;
	background-color: rgba(216, 202, 83, 0.47);
	--background-color:black;
	width: 80%;
	height: 80%;

	transition: .1s;
	cursor: pointer;
	
	--display: flex;
	--justify-content: center;
	--align-items: center;
	
	background-size: cover;
    background-repeat: no-repeat;
    --background-blend-mode: screen;
	    border-radius: 0px;
		box-shadow: 0px 0px 0px 0px black;
		text-shadow: 0px 0px rgby(0,0,0,0);
	-webkit-filter: grayscale(90%); /* Safari 6.0 - 9.0 */
    filter: grayscale(90%);
}
.textDot{
	font-size: 7vw;
	opacity:1;
	position: absolute;
}
.innerDot:hover {
	width: 90%;
	height: 90%;
	background-color: rgba(216, 202, 83, 0.8);
	    border-radius: 2px;
		box-shadow: 0px 0px 20px 0px rgby(0,0,0,22);
		text-shadow: 3px 2px #BBF056;
}
#projects{
	background-image: url("green.png");
	background-size: cover;
    background-repeat: no-repeat;
	background-position: 50%;
}
#music{
	background-image: url("green.png");
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 35%;
}
#imprint{
	background-image: url("green.png");
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 10%;
}
#contact{
	background-image: url("green.png");
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 40%;
}
span{
	font-family: 'Raleway', sans-serif;
}