*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-color: rgb(250, 238, 238);
}
.title-box {
  align-items: center;
  box-shadow: 0px 0px 0px 10px rgb(125, 32, 32);
  justify-content: space-between;
  margin-bottom: 30px;
}

.title-box,
.content {
  background-color: brown;
  padding: 20px;
}

.title-box,
.content-preserve-3d {
  display: flex;
}

a {
  color: white;
  text-decoration: none;
}

div:empty {
  background-color: black;
  border-radius: 50%;
  box-shadow: inset 0 3px 4px 0.5px gray;
  height: 20px;
  width: 20px;
}

.profile-container {
  cursor: pointer;
  margin: 0 auto 30px;
  position: relative;
}

.profile-container,
.profile img {
  width: 200px;
  height: 200px;
}

.profile {
  height: 100%;
  transition: transform 1s ease-in-out;
  width: 100%;
  transform-style: preserve-3d;
  box-shadow: 0px 0px 10px 5px rgb(155, 147, 147);
}

.profile,
.profile img {
  border-radius: 50%;
}

.profile,
.profile .side {
  position: absolute;
}

.profile .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.profile:hover {
  transform: rotateY(180deg);
  box-shadow: 0 0 10px 10px rgb(155, 147, 147);
}

.profile img {
  -o-object-fit: cover;
  object-fit: cover;
}

.content-container {
  width: 800px;
  margin: 0 auto 30px;
}

.content-preserve-3d {
  transform-style: preserve-3d;
  justify-content: space-between;
}

.content {
  display: inline-block;
  width: 250px;
  box-shadow:
    5px 4.5px 0 4px rgb(125, 32, 32),
    9px 9px 5px 5px rgba(90, 65, 65, 0.702);
  outline: dashed white;
  outline-offset: -10px;
}

.content,
.content img {
  border-radius: 10px;
  text-align: center;
}

.content h2 {
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content:active {
  transform: translate(3px, 5px);
  box-shadow:
    2px 2px 0 0px rgb(125, 32, 32),
    2px 2px 5px 1px rgba(90, 65, 65, 0.702);
}