html, body {
  margin:0;
}
.climastripe {
background-image:url(https://showyourstripes.info/stripes/EUROPE-Germany-%3CAll%20of%20Germany%3E-1881-2019-DW.png);  
}
.clear {
  clear:both;
}
.desktop {
  height:40px;
  width:100%;
  background-position:left top;
  background-size:cover;
  margin-top:60px;
  margin-bottom:20px;
}
#menu {
	 display: flex;
	 flex-wrap: wrap;
    justify-content: center;max-width:900px;
	margin:0 auto;
	margin-top:6vh;
}
.block a {
  color:white;
  text-decoration:none;
}
.block {
    position: relative;
    -webkit-perspective:500;
    -moz-perspective:500;
    -ms-perspective:500;
    -o-perspective:500;
    perspective:500;
	margin-right:45px; 
	margin-bottom:45px;
    width: 227px;
    height: 226px;
/*display:table;*/
border-radius:40px;
-moz-border-radius:40px;
overflow:hidden;
  box-shadow: 0 0px 0px white;
  transition: box-shadow 0.8s, transform 0.3s ease;
     transform: translateY(1);
}

.block:hover {  
    box-shadow: 0 0px 53px rgb(255 255 255 / 70%);
  transform: translateY(-0.5em);
}
.block:nth-of-type(3n) { 	margin-right:0px; }

.block img {
	width:100%;

}



.side {  
 -webkit-transition:-webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;
    position: absolute;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
	height: 100%;width: 100%; display:table;
	background-repeat:no-repeat;
	font-size:27px;
    text-shadow: 0 1px 3px #0001ad9c;
}

.side a {
	display: table-cell;vertical-align: middle;text-align: center;
	background: rgb(0 17 137 / 54%); background: linear-gradient(0deg, rgb(0 107 255 / 70%) 0%, rgb(0 4 142 / 38%) 100%); transform: scale(1);
}
.side a:hover {
}
.side.rotated {
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    -ms-transform:rotateY(360deg);
    -o-transform:rotateY(360deg);
    transform:rotateY(360deg);
}
.side2 {
    position: absolute;
    -webkit-transition:-webkit-transform 0.65s;
    -moz-transition: -moz-transform 0.65s;
    -o-transition: -o-transform 0.65s;
    transition: transform 0.65s;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
}
.side2.rotated {
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    -ms-transform:rotateY(360deg);
    -o-transform:rotateY(360deg);
    transform:rotateY(360deg);
}
.back {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform:rotateY(180deg);
}
#flip-button {
    color: #5b5b5b;
    margin-top: 1em;
}
#flip-button:active {
    color: #5b5b5b;
	border:0;
}