.row {
  justify-content: space-evenly;
}

.center {
  margin: 0 auto;
}


body {
  height: 97vh;
  background-image: url(assets/images/lfz-background.jpg)
}

header {
  text-align: center;
  font-size: 2rem;
}

.ui-card {
  background-color: #79B1BE;
  display: flex;
  align-items: center;
  justify-content: center;;
  margin: .5rem;
  height: 80px;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.card {
  position: relative;
  background-image: url(assets/images/lfz-card.jpg);
  background-size: 100% 100%;
  margin: .25rem;
  height: 192px;
}

.card-front, .card-back {
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.card-back {
  background-image: url(./assets/images/lfz-card.jpg);
}
.css-logo {
  background-image: url(./assets/images/css-logo.png);
}
.docker-logo {
  background-image: url(./assets/images/docker-logo.jpg);
}
.gitHub-logo {
  background-image: url(./assets/images/gitHub-logo.png);
}
.html-logo {
  background-image: url(./assets/images/html-logo.png);
}
.js-logo {
  background-image: url(./assets/images/js-logo.png);
}
.mysql-logo {
  background-image: url(./assets/images/mysql-logo.jpg);
}
.node-logo {
  background-image: url(./assets/images/node-logo.png);
}
.php-logo {
  background-image: url(./assets/images/php-logo.jpeg);
}
.react-logo {
  background-image: url(./assets/images/react-logo.png);
}

.hidden {
  display: none;
}

.modal-overlay {
  z-index: 2;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.modal-content {
  font-size: 56pt;
  text-align: center;
  background-color: skyblue;
  width: 30%;
}

.cool-button {
  border-radius: 15px;
  border: none;
  background-color: green;
  font-size: 24pt;
}