@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

    body {

        background: url(https://openauth.gg/dashboard/new/assets/images/background/green-cyan.webp) no-repeat center center fixed;

        background-size: cover;

        font-family: 'Poppins', sans-serif;



    }

    .main-content {

      margin: 0;

      padding: 0;

      display: flex;

      justify-content: center;

      align-items: center;

      font-size: 14px;

   }

   

  .container{

      width: 1000px;

      position: relative;

      display: flex;

      justify-content: space-between;

  }

  

  .container .card{

      position: relative;

      cursor: pointer;

  }

  

  .container .card .face{

      width: 300px;

      height: 200px;

      transition: 0.5s;

  }

  

  .container .card .face.face1{

      border-radius: 18px 18px 0px 0px;

      position: relative;

      background: #333;

      display: flex;

      justify-content: center;

      align-items: center;

      z-index: 1;

      transform: translateY(100px);

  }

  

  .container .card:hover .face.face1{

        transform: translateY(0);

  }

  

  .container .card .face.face1 .content{

      opacity: 0.2;

      transition: 0.5s;

      border-radius: 0px 0px 18px 18px;

  }

  

  .container .card:hover .face.face1 .content{

      opacity: 1;

  }

  

  .container .card .face.face1 .content img{

      max-width: 100px;

  }

  

  .container .card .face.face1 .content h3{

      margin: 10px 0 0;

      padding: 0;

      color: #fff;

      text-align: center;

      font-size: 1.5em;

  }

  

  .container .card .face.face2{

      position: relative;

      background: #fff;

      display: flex;

      justify-content: center;

      align-items: center;

      padding: 20px;

      box-sizing: border-box;

      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);

          transform: translateY(80px);

      border-radius: 0px 0px 18px 18px;

  }

  

  .container .card:hover .face.face2{

      transform: translateY(0);

      border-radius: 0px 0px 18px 18px;

  }

  

  .container .card .face.face2 .content p{

      margin: 0;

      padding: 0;

  }

  

  .container .card .face.face2 .content a{

      margin: 15px 0 0;

      display:  inline-block;

      text-decoration: none;

      font-weight: 900;

      color: #333;

      padding: 5px;

      border: 1px solid #333;

  }

  

  .container .card .face.face2 .content a:hover{

      background: #333;

      color: #fff;

      border-radius: 3px 3px 3px 3px;

  }

  .Title { 

      text-align: center;

      color: #fff;

      margin-left: auto;

      margin-right: auto;

      font-size: 40px;

  }



  h4 {

    font-size: 12px;

  }