.column {

  float: left;
  width: 65%;
  margin-bottom: 4px;
  padding: 0 30px;  /* change column padding here */
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.75); /*the 0.75 makes the larger shadow */
  border-radius: 25px;
  margin: 8px;
  background-color: white;
  border-color: black ;
  border-style: solid;
  border-width: 2px;
}
.card2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.75); /*the 0.75 makes the larger shadow */
  border-color: black ;
  border-style: solid;
  border-width: 1px;
  margin: 2px;
  background-color: white;
}
.card3 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.8); /*the 0.75 makes the larger shadow */
  border-color: black ;
  border-style: solid;
  border-width: 1px;
  background-blend-mode:darken;
  background-color:rgba(0,0,0,0.8);

}

.about-section {
  width: 40%;
  padding: 2px;
  text-align: center;
  background-blend-mode:darken;
  background-color:rgba(53,56,57,0.8);
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.flip-box {
  background-color: transparent;
  width: 460px;
  height: auto;
  margin-bottom: 2px;
  padding: 0 10px;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  background-image: linear-gradient(black, gold, darkred);
}

.flip-box-front {
  /*background-color: #bbb;*/
  color: black;
}

.flip-box-back {
  /*background-color: #555;*/
  color: white;
  transform: rotateY(180deg);
}
flipfont {    
  font-size: 95%;
  line-height: 25%;
  color: black;
  font-variant: small-caps;
  font-weight: normal;
  font-family: sans-serif;
}
.photo-back {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.75); /*the 0.75 makes the larger shadow */
  border-color: black ;
  border-style: solid;
  border-width: 1px;
  margin: 2px;
  background-image: linear-gradient(black, gold, darkred);
}
unit {
    font-size: 105%;
    color: #ffd700;
    line-height: 105%;
    font-variant: small-caps;
    font-weight: normal; 
}
.tooltip {
    position: relative;
    display: inline-block;
    font-variant: small-caps;
    font-size: 14px;
    color: white;
    font-weight: bold;
}

.tooltip .tooltiptext {
        visibility: hidden;
        width: 400px;
        margin-left: -200px;
        background-image: linear-gradient(darkblue, #8B0000);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.75);
        color: #fff;
        text-align: justify;
        border-radius: 6px;
        padding: 10px 20px;
        position: absolute;
        z-index: 1;
        bottom: 50px;
        left: 50%;
        opacity: 0;
        line-height: 110%;
        font-size: 13px;
        transition: opacity 0.3s;
        font-weight: normal;
        font-variant: normal;
}

.tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
        text-decoration: none;
}

.tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
        text-decoration: none;
}