html {
    display: flex;
     justify-content: center;
     align-items: center;
     align-content: center;
     height: 100%;
     background-color: rgb(19, 34, 29);
     color: white;
     overflow-y: hidden;
   }

   img {
       height: 155px;
       border-radius: 15px;
   }
   
   /* Styles for the tilt block */
   #tilt {
    border-radius: 15px;
     display: block;
     height: 155px;
     width: 200px;
     margin: 0 auto;
     transition: box-shadow 0.1s, transform 0.1s;
     background-size: 100%;
     background-repeat: no-repeat;
     margin: 100px;
   }
   
   #tilt:hover {
     box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
     cursor: pointer;
   }
   
.column#caption {
	position: relative;
}
.column#caption .text {
		position: absolute;		
    top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
    opacity: 0;
    transition: all 0.8s ease;			
}
.column#caption .text h1 {		
		margin: 0;		
		color: white;
}
.column#caption:hover .text {
	opacity: 1;
	
}
.column#caption:hover img {
	-webkit-filter: sepia(90%);
}

.frame {
	text-align: center;	
	position: relative;
	cursor: pointer;	
	perspective: 500px; 
}
.frame .details {
	width: 80%;
	height: 70%;	
	padding: 15% 15%;
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotateY(90deg);
	transform-origin: 50%;
	background: rgba(0, 0, 0, 0.671);	
	opacity: 0;
	transition: all 0.4s ease-in;
    color: white;
    border-radius: 15px;
	
}
.frame:hover .details {
	transform: translate(-50%, -50%) rotateY(0deg);
	opacity: 1;
}

.flex-container {
    display: flex;
    flex-direction: row;
}

@media (max-width: 580px) {
  .flex-container {
    margin-top: 90px;
    flex-direction: column;
  }
}

.flex-child {
    flex: 1;
    margin: 50px;
    box-shadow: 0px 0px 15px rgb(0, 255, 42);
    border-radius: 15px;
}