body {
    background: #077993;
    perspective: 1000px;
    font-family: 'Courier New', Courier, monospace;
  }
  
  .container {
    height: 98vh;
    width: 90%;
    margin: auto;
    border: black solid 1px;
    border-radius: 30px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
  }

  .container-home {
    height: 98vh;
    width: 90%;
    margin: auto;
    border: black solid 1px;
    border-radius: 30px;
    overflow: scroll;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }

  .game {
    background-color: aquamarine;
    border-radius: 20px;
    height: 50px;
    width: 240px;
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }

  .title {
    width: 500px;
    text-align: center;
    margin-bottom: 10px;
  }

  a:link {
    text-decoration: none;
    color: black;

  }

  a:visited {
    text-decoration: none;
    color: black;
  }
  
    .card {
      width: 135px; 
      height: 189px;
      transform-style: preserve-3d;
      transition: transform 0.6s;
      cursor: pointer;
      margin-left: 62.5px;
      margin-right: 62.5px;
      margin-bottom: 10px;
      margin-top: 10px;
      box-sizing: border-box;
    }
   
    .card-inner {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
    }
    
    .card-click {
      transform: rotateY(180deg);
    }
   
    .debut, .fearless, .speak-now, .red, .nine, .reputation,
    .card-front, 
    .black-cat, .calico-cat, .gray-cat, .orange-cat, .tabby-cat, .white-cat, 
    .golden, .german, .rott, .chi, .poodle, .lab, 
    .rock-1, .rock-2, .rock-3, .rock-4, .rock-5, .rock-6, 
    .alan-1, .alan-2, .alan-3, .alan-4, .alan-5, .alan-6 {
      width: 100%;
      height: 100%;
      position: absolute;
      backface-visibility: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .card-front {
      background-image: url('card-back.png');
      background-size: cover;
      border: black solid 1px;
    }
  
    .card-back {
      background-image: url('card-blank.png');
      background-size: cover;
      transform: rotateY(-180deg);
      border: black solid 1px;
    }

    .debut {
        background-image: url('debut.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .fearless {
        background-image: url('fearless.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .speak-now {
        background-image: url('speak-now.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .red {
        background-image: url('red.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .nine {
        background-image: url('1989.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(-180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .reputation {
        background-image: url('reputation.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .black-cat {
        background-image: url('black.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .calico-cat {
        background-image: url('calico.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .gray-cat {
        background-image: url('gray.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .orange-cat {
        background-image: url('orange.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .tabby-cat {
        background-image: url('tabby.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .white-cat {
        background-image: url('white.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .golden {
        background-image: url('golden.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .chi {
        background-image: url('chihuahua.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .german {
        background-image: url('german.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .lab {
        background-image: url('labrador.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .poodle {
        background-image: url('poodle.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .rott {
        background-image: url('rottweiler.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .rock-1 {
        background-image: url('rock-1.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .rock-2 {
        background-image: url('rock-2.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .rock-3 {
        background-image: url('rock-3.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .rock-4 {
        background-image: url('rock-4.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .rock-5 {
        background-image: url('rock-5.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .rock-6 {
        background-image: url('rock-6.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .alan-1 {
        background-image: url('alan-1.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .alan-2 {
        background-image: url('alan-2.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .alan-3 {
        background-image: url('alan-3.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .alan-4 {
        background-image: url('alan-4.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .alan-5 {
        background-image: url('alan-5.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .alan-6 {
        background-image: url('alan-6.png');
        background-size: cover;
        border: black solid 1px;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        cursor: no-drop;
    }

    .matched {
        border: rgb(26, 205, 26) solid 8px;
    }