* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}
  
  html,
  body {
      height: 100%;
  }

  body {
      background: url(../img/bg1.jpg);
      background-size: cover;
  }

  .cena {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 800px;
  }

  .card {
      width: 300px;
      height: 300px;
      position: relative;
      animation: flip 5s alternate infinite ease-in-out;
      transform-style: preserve-3d;
  }

  .frente,
  .verso {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: url('../img/bp.png') no-repeat center center;
      background-size: auto 100%;
  }

  .frente {
      z-index: 1;
      backface-visibility: hidden;
  }

  .verso {
      transform: translateX(-180deg);
  }

  @keyframes flip {
      0% {
          transform: rotateY(0)
      }

      100% {
          transform: rotateY(360deg)
      }
  }

  main {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  footer {
      position: absolute;
      width: 100%;
      bottom: 0px;
      text-align: center;
      padding-bottom: 15px;
  }

  a {
      font-family: verdana;
      color: white;
  }

  a:hover {
      color: yellow;
  }