*{
margin: 0;
}

img{
height: 50vh;
width: 100%;
object-fit: contain; 
}


html {
color: #bbb; 
background: #eee;
font-size: 10px;
font-family: "Lucida Console", Monaco, monospace;
}

a{
color: #ebb;
text-decoration: none;
}
.border-container {
    border: 20px solid #eee; /* Adjust the color and width as needed */
    display: inline-block; /* Or another display property that suits your layout */
}

.mcenter{
height: 100vh;
width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 
side by side: 8/3 - 16 / 6
on top: 4/6 - 
middle is 10 / 6  5 / 3
 */

.imgcont{
display: grid;
z-index: 1; 
position: relative;
}

@media (min-aspect-ratio: 8/3) {

img{
height: 100vh;
width: 133vh;
}

}


@media (min-aspect-ratio: 5/3) {

.imgcont{
	grid-template-columns: 1fr 1fr ;
	}
img{
	xwidth: 50vw;
	height: 100%;
	}

}

@media (max-aspect-ratio: 4/6) {

.mcenter{
height: 150vw;
}

.topi{
	height: 75vw;
	}
.topi img{
	}
.boti{
	height: 75vw;
	}
.boti img{
	}
}


.cright{
position: absolute; 
bottom: 10px; 
right: 10px; 
z-index: 0; 
}