body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

h1 {
  margin-bottom: 20px;
}

video, canvas {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

.face-expression-label {
  font-size: 40px; /* Adjust this value as needed */
  font-weight: bold;
}

.content-wrapper {
  display: flex;
  align-items: flex-start;  /* Aligns the items to the top of the flex container */
}

#video, #expressionContainer {
  margin-left: 20px; /* Spacing between the video and the container */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 560px;  /* Assuming the video height is 560px; adjust if different */
}

#expressionContainer {
  margin-left: 100px;  /* Spacing between the video and the container */
}

#expressionText {
  font-size: 32px;  /* Adjust as needed */
  text-align: center;  /* Centers the text content */
  margin-top: 10px;   /* Add space between the two text elements */
}

#expressionText.neutral {
  color: blue
}

#expressionText.happy {
  color: green;
}

#expressionText.surprised {
  color: orange;
}

#expressionText.disgusted {
  color: brown;
}

#expressionText.sad {
  color: gray
}

#expressionText.angry {
  color: red;
}

.expressions-info {
  margin-top: 30px;
  width: 80%; /* adjust as needed */
  text-align: center;
}

.expressions-info p {
  font-weight: bold;
  margin-bottom: 20px;
}

.expressions-info ul {
  list-style: none;
  padding: 0;
}

.expressions-info li {
  display: inline-block;
  margin: 10px;
  vertical-align: top;
  text-align: center; /* Center-aligns the expression name below the image */
}

.expressions-info img {
  display: block;
  margin: 0 auto;  /* Centers the image horizontally */
  width: 120px; /* adjust as needed */
  height: 120px; /* adjust as needed */
  border-radius: 50%; /* circular crop */
  margin-bottom: 10px;
  object-fit: cover; /* ensures images cover the set dimensions without distortion */
}