/* Navigation Bar */
.topnav {
    background-color: #333;
    overflow: hidden;
  }
  
  /* Style of the inside navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* color on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* color of the active tab */
  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }

/* Card */
.flip-card {
    background-color: transparent;
    width: 183px;
    height: 275px;
    perspective: 1000px;
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* horizontal flip when you move the mouse over  */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Style of the front side*/
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  /* style of the back side */
  .flip-card-back {
    background-color: #04AA6D;
    color: white;
    transform: rotateY(180deg);
  }

  /* image center */
  .container {
    position: relative;
    text-align: center;
    color: white;
    font-family: 'Indie Flower', cursive;
  }

  .top-centered {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

/* hr */
.hr {
    position: relative;
    margin-left: 7%;
    margin-right: 7%;
    border-radius: 1%;
}

/* Search Bar Style */
* {
    box-sizing: border-box;
  }
  
  form.example input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 1px solid grey;
    float: left;
    width: 80%;
    background: #f1f1f1;
  }
  
  form.example button {
    float: left;
    width: 20%;
    padding: 10px;
    background: #2196F3;
    color: white;
    font-size: 17px;
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
  }
  
  form.example button:hover {
    background: #0b7dda;
  }
  
  form.example::after {
    content: "";
    clear: both;
    display: table;
  }