body {
	color: white;
	font-family: "Special Elite";
	background:url("https://files.catbox.moe/l5w1ku.jpg") no-repeat; 
	background-size: cover;
	background-color: black;
	width: 95%;
	max-width: 1300px;
	margin: 0 auto;
	font-size: 100%;
}

main {
	display: flex;
	flex-direction: column;
	padding: 2em;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: .5em; 
}

header {
	margin: 2em 0 2em;
	border: 1px solid gray;
	background: black;
	padding: 0 1em;
}

div #container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: .5em;
	flex-basis: 17%;
}

aside {
	background-color: black;
	display: flex;
	flex-direction: column;
	border: 1px solid gray;
	padding: 1em;

}

section {
	background-color: black;
	box-sizing: border-box;
	border: 1px solid gray;
	padding: 1em;
	flex-basis: 82%;
}

footer {
	text-align: center;
	margin-top: 2.1em;
	padding: 2em .5em;
	border: 1px solid gray;
	background-color: black;
}

ul {
	list-style-type: none;
	padding: 0;
}

li {
	text-align: center;
}

section img {
	padding: 1em;
	height: auto;
	max-width: 45%;
}

#right {
	width: 100%;
	float: right;
}

#left {
	width: 100%;
	float: left;
}

#stamps {
	max-height: 35em;
	text-align: center;
	height: 100%;
	overflow-y: hidden;
}

#stamps img {
	margin: auto;
	height: auto;
	width: 70%;
	padding: .1em 0;
}

h1 {
	text-align: center;
}

h2 {
	text-align: center;
	margin: 0;  
}

a:link, a:visited {
	color: #b00b1e;
}

.cradle {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.floating {  
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.group {
    /* ... */
    will-change: transform; /* We should be nice to the browser - let it know what we're going to animate. */
    animation: scrolling 40s linear infinite;
  }

@keyframes scrolling {
	0% {
	transform: translateY(0);
	}
	100% {
	transform: translateY(-100%);
	}
}

@keyframes floating {
	0% { transform: translate(0,  0px); }
	50%  { transform: translate(0, 6px); }
	100%   { transform: translate(0, -0px); }    
}

@media only screen and (max-width: 900px) {
	.cradle {
		width: 100%;
		flex-direction: column;
		justify-content: center;
	}
	
	aside {
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		text-align: center;
		width: 100%;
		margin: .5em 0;
		flex-direction: row;
		flex-wrap: wrap; 
	}
	
	section{
		box-sizing: border-box;
		width: 100%;
		display: block;
		margin: .5em 0;
		
	}
	section img {
		max-width: 50%;
	}
	
	#stamps {
		display: flex;
		flex-direction: row;
		height: 8em;
		overflow-x: hidden;
		flex-wrap: nowrap;
	}
	
	#stamps .group {
		display: flex;
		flex-direction: row;
	}
	
	#stamps img {
		margin: 0;
		padding: 0 .1em;
		height: 100%;
		width: auto;
	}
	
	@keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
}
  
  /*scrolling code link https://blog.logto.io/css-only-infinite-scroll*/