* {
  font-family: 'Stardos Stencil', cursive;
    /*font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
*/
font-size: 2vmin;
    }

body {
  background-image: linear-gradient(to bottom right, #aa0000, #ff0000);
}

.red {
  color: #ff0000;
}

.gray {
  color: #eeeeee;
}
.grayA {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

}
.big {
  font-weight: bold;
  font-size: 3vmin;
}

@media only screen and (max-width: 500px) {

   * { 
      font-size: 2vmax; 
   }
    .big {
      font-size: 3vmax;
    }
}

.content {
  height: 100vh;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  perspective: 150rem;
  height: 90%;
  width: 90vw;
  position: relative;
  max-width: 1200px;
}
.card__side {
  height: 100%;
  transition: all 0.8s ease;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
}
.card__side--front {
  background-color: #000000;
}

.card__cont {

  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__cta {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  display: block;
}

.header {
  position: absolute;
  top: 3vh;
  height: 60px;
  justify-content: center;
  font-weight: bold;
  width: 90vw;
  max-width: 1200px;
}
.footer {
  position: absolute;
  height: 10vh;
  bottom: 15vh;
  width: 100%;
  justify-content: center;
}
.flag {
  position: absolute;
  bottom: -6px;
  right: 0;
}
.flag img {
    border-top-left-radius: 3px;
}

@keyframes wackler {
    0% { transform: rotate(0deg); }
   90% { transform: rotate(0deg); }
   92% { transform: rotate(1deg); }
   95% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

div.card {
  display: inline-block;
  animation: wackler 5s infinite;
}

div.card:hover {
  animation: none;
}