/* (A) WHOLE PAGE */
html{ 
font-family: arial, sans-serif; 
/* font-family: 'Old English Five', sans-serif!important; */
}

body {
/* background-image: url("https://kevler.de/hochzeit/img/brat2.jpg"); */
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}

.img-wrapper{
text-align: center;
}
.content {
    z-index:2;
}
.content-form {
    position:fixed;
    top: 50%;
    left: 50%;
    width:25%; 
    height:auto;
    transform: translate(-50%, -50%);
}

@media (max-width:320px)  {
    .content-form { width:70%; height:50%;} 
    .logo { width:20%!important; } 
}
@media (max-width:480px)  {
    .content-form { width:70%; height:50%;}
    .logo { width:20%!important; }     
} 
@media (max-width:600px)  { 
    .content-form { width:70%; height:50%;}
    .logo { width:20%!important; }     
}
@media (max-width:801px)  { 
    .content-form { width:50%; height:50%;}  
}
/* @media (min-width:1025px) { .content { width:70%; height:50%;} } */

.logo {
  width: 10%;
  height: auto;
  display: inline-block;
}

.logo:hover {
	-webkit-animation: vibrate-1 0.3s linear infinite both;
	        animation: vibrate-1 0.3s linear infinite both;
}

/* (B) LOGIN FORM */
#login-form {
  padding: 20px;
  background: #f2f2f2;
  /* max-width: 320px; */
  max-width: 100%;
  margin: 0 auto;
}
#login-form h1 {
  font-size: 1.5em;
  margin: 0;
  color: #000000;
}
#login-form label, #login-form input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-top: 10px;
}
#login-form input { padding: 10px; }
#login-form input[type=submit] {
  background: #000000;
  color: #fff;
  border: 0;
  cursor: pointer;
}

/* (C) INVALID LOGIN */
#bad-login {
  padding : 10px;
  margin-bottom: 10px;
  background: #ffe7e7;
  border: 1px solid #ff3e3e;
  color: #c10000;
  font-weight: bold;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-9-16 0:8:52
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-1 {
  0% { 
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-8px, 8px);
            transform: translate(-8px, 8px);
  }
  40% {
    -webkit-transform: translate(-8px, -8px);
            transform: translate(-8px, -8px);
  }
  60% {
    -webkit-transform: translate(8px, 8px);
            transform: translate(8px, 8px);
  }
  80% {
    -webkit-transform: translate(8px, -8px);
            transform: translate(8px, -8px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-8px, 8px);
            transform: translate(-8px, 8px);
  }
  40% {
    -webkit-transform: translate(-8px, -8px);
            transform: translate(-8px, -8px);
  }
  60% {
    -webkit-transform: translate(8px, 8px);
            transform: translate(8px, 8px);
  }
  80% {
    -webkit-transform: translate(8px, -8px);
            transform: translate(8px, -8px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}


.bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  /* background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0; */
  /* background: transparent url('https://kevler.de/hochzeit/img/noise.png') repeat 0 0; */
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: 0.9;
  visibility: visible;
  z-index:-1;
}

@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}