.all {
	display: block;
	margin: auto;
	width: fit-content;
}

@media (min-width: 800px) {
	.all {
	display: flex;
	margin: auto;
	width: fit-content;
}
}

h1 {
	color: #54763f;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: 10px;
  text-align: center;
  font-family: arial;
}

img {
	width:100%;
}

.title {
  color: grey;
  font-size: 18px;
}

.klu button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #54763f;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.klu a {
  text-decoration: none;
  font-size: 22px;
  color: #54763f;
}

.klu button:hover, .klu a:hover {
  opacity: 0.7;
}

	.rafi a {
		text-decoration:none;
		front-size:22px;
		color:#43f00e
	}

	.rafi button {
		border:none;
		outline:0;
		display:inline-block;
		padding: 8px;
		color:white;
		background-color:#43f00e;
		cursor: pointer;
		width:100%;
		text-aling:center;
		front-size:18px;
	}

	.rafi button:hover, .rafi a:hover {
		opacity: 0.7;
	}

	.marko a {
		text-decoration:none;
		font-size:22px;
		color:#000000;
	}
	.marko button {
		border:none;
		outline:0;
		display:inline-block;
		padding: 8px;
		color:white;
		background-color:#000000;
		cursor: pointer;
		width:100%;
		text-align:center;
		font-size:18px;
	}
	.marko button:hover, .marko a:hover  {
		opacity: 0.7;
	}

	.philipp a {
		text-decoration:none;
		font-size:22px;
		color:grey;
}
	.philipp button {
		border:none;
		outline:0;
		display:inline-block;
		padding: 8px;
		color:white;
		background-color: #07e82c;
		cursor: pointer;
		width:100%;
		text-align:center;
		font-size:18px;
}
	
	.philipp button:hover, .philipp a:hover {
		color:#a90bde;
		opacity:0.7;
}

.daniel a {
		text-decoration:none;
		font-size:22px;
		color:#1f0833;
}
	.daniel button {
		border:none;
		outline:0;
		display:inline-block;
		padding: 8px;
		color:magenta;
		background-color:#1f0833;
		cursor: pointer;
		width:100%;
		text-align:center;
		font-size:18px;
}
	.daniel button:hover, .daniel a:hover{
		color:white;
		opacity: 0.7; 
}

      .angelina a {
             text-decoration:none;
             font-size:22px;
             color:#a60c37;
      }

      .angelina button {
              border:none;
              outline:0;
              display:inline-block;
              padding: 8px;
              color:white;
              background-color:#a60c37;
              cursor: pointer;
              width:100%;
              text-align:center;
              font-size:18px;
     }

     .angelina button:hover, .angelina a:hover {
              color:red;
              opacity: 0.7;
     }

	.hannah a  {
		text-decoration:none;
		front-size:22px;
		color:#ad42f5;
	}

	.hannah button {
		border:none;
		outline:0;
		display:inline-block;
		padding: 8px;
		color:white;
		background-color:#f54278;
		cursor: pointer;
		width:100%;
		text-allign:center;
		font-size:18px;
	}
	
	.hannah button:hover, .hannah a:hover {
		//color:red;
		opacity: 0,7;
	}

        .lisa a {
               text-decoration:none;
               font-size:22px;
               color:#D41E1B;
        }
 
        .lisa button {
               border:none;
               outline:0;
               display:inline-block;
               padding: 8px;
               color:white;
               background-color:#D41E1B;
               cursor: pointer;
               width:100%;
               text-aligh:center;
               font-size:18px;
        }

        .lisa button:hover, .lisa a:hover { 
               opacity: 0.7
}

       .david a {
                text-decoration:none;
                font-size:22px;
                color:#6734eb;

          }

          .david button {
                  border:none;
                  outline:0;
                  display:inline-block;
                  padding: 8px;
                  color:white;
                  background-color:#6734eb;
                  cursor: pointer;
                  width:100%;
                  text-align:center;
                  font-size:18px;
        }

        .david button:hover, .david a:hover {
                color:red;
                opacity: 0.7;
        }

.markus a {
		text-decoration:none;
		front-size:22px;
		color:#07f5d1;
	}

		.markus button {
			border:none;
			outline:0;
			display:inline-block;
			padding:8px;
			color:white;
			background-color:#6193b0;
			cursor: pointer;
			width:100%;
			text-align:center;
			font-size:18px;
	}

	.markus button:hover, .markus a:hover {
		color:grey;
		opacity: 0.7;
}