*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.header, .footer, .content1, .content2>div>div{
	flex:1;
	display: flex;
	justify-content: center;
    align-items: center;
	border: 1px;
}




.content2{
	flex: 1;
	display: flex;
	flex-direction: column;
    flex-wrap: wrap;
	gap: 10px;

}

.content2>div{
	flex: 1;
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
	gap: 10px;
	width:260px;
	
	height: 300px;
	
}
.content2>ol>li{

	width:300px;
	
}

@media screen and (max-width: 800px){
	.main-container>div{
		min-height: 400px;
	}
	
	.content1{
		flex: 100%;
	}
	
	.header{
	/*	min-height: 90px;
		background-color: blue;*/
	}
	
	.footer{
		
	}
}

@media screen and (max-width: 520px){
	
	.content2>div{
		flex-direction: column;
	}
	
	.content2>div>div{
		min-height: 100px;
	}
}

.wrapper-1,
.wrapper-2,
.wrapper-3 {
  /*position: absolute;*/
}
.cube {
  position: relative;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  animation: animate 20s linear infinite;
}
.cube div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.cube div span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#001600 0%, #cca300 50%, #cca300 100%);
  transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
}
@keyframes animate {
  0% {
    transform: rotateX(-30deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(-30deg) rotateY(360deg);
  }
}

.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: #444;
  transform: rotateX(90deg) translateZ(150px);
}
.top::before {
  content: '';
  top: 0;
  left: 0;
  position: absolute;
  width: 300px;
  height: 300px;
  background: #b1a448;
  transform: translateZ(-380px);
  filter: blur(4px);
  box-shadow: 0 0 120px rgb(119 52 181 / 20%), 0 0 200px rgb(138 64 185 / 40%),
    0 0 200px rgb(141 69 165 / 60%), 0 0 200px rgb(155 57 167 / 80%),
    0 0 200px #8f4db1;
}