html { font-size: 100% }

body {
	font-family: verdana, arial,  sans-serif;
	font-size: 1em;
	color: white;
	background-color: #c6c6c6;
	line-height: 140%;
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
}

img
{
	border: 0;
	max-width: 100%;
}

img.icon {
	height: 1rem;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.small {
	font-size: 100%;
	margin: 2vh 0;
	line-height: 150%;
}

.small p {
	margin-bottom: 20px;
}

.smaller {
	font-size: 80%;
	margin: 2vh 0;
	line-height: 150%;
}

.big {
	font-size: 120%;
	margin: 2vh 0;
	line-height: 200%;
}

.bigger {
	font-size: 150%;
	margin: 2vh 0;
	line-height: 200%;
}

div.foto {
	display: inline-block;
	width: 24vw;
	height: 24vw;
	margin: 0 1vw 0 1vw;
	perspective: 600px;
}

.foto img {
	max-width: 100%;
}

/* Headings */
h1,h2,h3,h4,h5,h6
{
	font-family: verdana, arial, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	margin: 30px 0 15px 0;
}

/* Lists */
ul
{
	list-style: inside;
	font-size: 80%;
	margin: 2vh 3vh;
	line-height: 150%;
	padding: 0;
}

/* Links */
a:link, a:visited
{
	text-decoration: none;
	color: white;
	font-weight: bold;
}
a:hover, a:active
{
	text-decoration: none;
	color: white;
	font-weight: bold;
}

#main {
	font-size: calc((100vw + 100vh)/150);
	line-height: calc((100vw + 100vh)/100);
	margin: 5vh 9vw;
}

#logo {
	text-align: center;
	margin: 2vh 0;
}

#logo img {
	max-width: 50%;
}

#text {
	font-weight: bold;
	margin-bottom: 5vh;
}

#footer {
	text-align:right;
	margin: 3vh -10vw 0 -10vw;
	padding-right: 3vw;
	line-height: 0;
	font-weight: bold;
}

hr {
	border: 1px dashed black;
	margin: 0;
}

#footer img {
	max-width: 33%;
}

#footer p {
	margin-top: 1.5vh;
}

.flex-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.flex-item  {
   flex-shrink: 1;
   flex-grow: 1;
}

div.flex-container {
	justify-items: flex-start;
	gap: 1em;
}

.flipcard {
	width: 100%;
	height: 100%;
	position: relative;
	transition: transform 1s;
	transform-style: preserve-3d;
	cursor:pointer;
}

.flipcard__face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
	background-size: contain;
}

.flipcard-back {
  transform: rotateY( 180deg );
}

.foto:hover .flipcard, .foto.focus .flipcard, .foto.active .flipcard {
  transform: rotateY(180deg);
}