body {
 background-color: #f7f9f9
}
.main_div {
 color: black;
}
.title_img {
 display: block;
 margin-left: auto;
 margin-right: auto;
}
#loginbtn,#retake {
 padding: 10px 20px;
 font-size: 16px;
 color: white;
 background-color: #28a745;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 margin: 20px;
}

#loginbtn:hover, #retake:hover {
 background-color: #218838;
}

.parent-flex {
 display: flex;
 background-color: #bed8d4;
 color: black;
 border-radius: 10px;
 justify-content: space-around;
 flex-wrap: nowrap;
 width: 85%;
 height: 85%;
 align-items: center;
 margin-left: auto;
 margin-right: auto;
}
.input {
 margin: 20px; 
 padding-left: 10px;
 flex: 1; 
 border-radius: 10px;
}
 
#video {
 border-radius: 10px;           
}

#canvas {
 display: none;
}
.vertical-divider {
 width: 2px;
 background: #99c2bc;
 min-height: 100%;
 margin: 0 10px;
 border-radius: 2px;
 align-self: stretch;
}

.output {
 margin: 20px;
 padding-left: 10px;
 flex: 1;
 border-radius: 10px;
 height: 50%;
 align-content: space-around;
 margin-right: 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.div-result {
 background-color: #99c2bc;
 border-radius: 10px;
 padding: 15px;
 width: 60%;
 /* margin: 0 auto; */
}

.photocontainer {
 aspect-ratio: 4/5;
 border-radius: 10px;
 overflow: hidden;
 height: 16vw;
 margin: 0 auto;
}
.photocontainer img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.results {
 text-align: center;
}