#orderlogs {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  height: 100vh;
  width: 100vw;
  filter: contrast(1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.directory-image-container {
  background-image: url("https://fusegames.s3.amazonaws.com/company_heist/images/oldcomputernew.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  min-width: 1300px;
  max-width: 1400px;
  max-height: 700px;
  margin-right: 0;
}

.directory-container {
  position: relative;
  height: 50%;
  max-height: 59%;
  width: 42.3%;
  top: 12.5%;
  left: 23.4%;
  border-radius: 24px;
  display: flex;
  font-family: "Overpass Mono", monospace;
  /* background-color: yellow; */
}

.twitter {
  width: 60%;
}

.personal-photo {
  height: 100%;
  width: 50%;
  /* background-color: grey;
    opacity: 0.7; */
  display: flex;
  flex-direction: column;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.personal-details {
  height: 100%;
  width: 50%;
  /* background-color: blue;
    opacity: 0.7; */
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  border-left: 2px solid black;
  padding-left: 20px;
}

.photo {
  height: 50%;
  width: 100%;
  background-color: black;
  border-top-left-radius: 24px;
  border-bottom: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photo > img {
  height: 100%;
  width: auto;
}

.facts {
  height: 50%;
  width: 100%;
  /* background-color: black; */
  border-bottom-left-radius: 24px;
}

.left-arrow {
  /* float: left; */
  height: 10%;
  width: 5%;
  border-radius: 50%;
  background-color: #c6c6c6;
  border: 2px solid black;
  position: absolute;
  top: 105%;
  left: 84%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right-arrow {
  /* float: right; */
  height: 10%;
  width: 5%;
  border-radius: 50%;
  background-color: #c6c6c6;
  border: 2px solid black;
  position: absolute;
  top: 105%;
  left: 90%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.facts * {
  margin: 5px;
}

@media only screen and (min-width: 1400px) {
  .directory-container {
    height: 60%;
    width: 42.3%;
    font-size: 15px;
  }

  .left-arrow,
  .right-arrow {
    top: 90%;
    height: 10%;
    width: 5%;
  }
}