main {
    padding: 14px;
    font-family: "Lucida Console", "Courier New", monospace;
    margin: auto;
    text-align: center;
}

p {
    font-size: 14px;
}

.topnav {
  font-family: "Lucida Console", "Courier New", monospace;
}

img {
 
  margin-left: auto;
  margin-right: auto;

}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: 8px;
  }
  
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  /* Add some padding inside the card container */
  .container {
    padding: 15px 16px;
  }

.column {
    float: left;
    width: 33.33%;
  }

  .footer {
    position: static;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    text-align: center;
 }
  
  /* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
  }

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }
  }

  .icons {
    margin: 10px;
  }

/* Create a top navigation bar with a black background color  */
.topnav {
    background-color: #333;
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Create a right-aligned (split) link inside the navigation bar */
  .topnav a.split {
    float: right;
    background-color: #04AA6D;
    color: white;
  }

  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* 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;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.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; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #333;
  color: white;
  transform: rotateY(180deg);
}

.project-links {
  margin-bottom: 20px;
}

table, th, td {
  border:1px solid black;
}