@import url('https://fonts.googleapis.com/css?family=Scada');
@import url('https://fonts.googleapis.com/css?family=Russo+One');
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

body{
	background: linear-gradient(135deg, 
		#ff7eb3, /* Розовый */
		#ff758c, /* Более насыщенный розовый */
		#ff8e72, /* Оранжевый */
		#ffae53, /* Жёлто-оранжевый */
		#ffc238, /* Светло-жёлтый */
		#b5ff45, /* Зелёно-жёлтый */
		#45ffce, /* Бирюзовый */
		#45c9ff  /* Голубой */
	);

    display: flex;
    justify-content: center;
    align-items: top;
}

body > div {
    width: 1200px; /* задаем фиксированную ширину */
    font-family: 'Scada';
    font-size: 20px;
    display: grid;
    grid-template-columns: 900px 300px;
    grid-template-rows: 300px 1fr 300px;
    gap: 0px;
    grid-template-areas:
        "header header"
        "main aside"
        "footer footer";
	margin-top:20px;
}

body>div>header { grid-area: header; }
body>div>footer { grid-area: footer; }
body>div>main { grid-area: main; }
body>div>aside {grid-area: aside;}

body>div>header,body>div>footer{
	background: rgba(50, 20, 75, 0.5);
	color: #ffffff;
	text-align:center;
	padding: 20px;
	display:flex;
	align-items: center;
	justify-content: center;
}

body>div>header{
	flex-direction: column;
	border-radius:3px 3px 0px 0px;
}

body>div>footer{
	flex-wrap: wrap;
	border-radius:0px 0px 3px 3px;
}

body>div>footer>div{
	width:100%;
}

body>div>main,body>div>aside{
	background-color: rgba(255,255,255,0.4);
	line-height:1.5;
	text-align:center;
	padding:20px;
}

body>div>main{
	padding-top:0px;
	padding-right:0px;
}

body>div>header h1{
	font-family:'Russo One';
	font-weight:bold;
	letter-spacing:10px;
	color:#fff;
	font-size:75px;
}

body>div>header h1 span{
	color:#fe5;
}

body>div>main>article,body>div>main>div>article,div[x-show="complete"]{
	background:rgba(255,255,255,0.5);
	padding:20px;
	border-radius:3px;
	margin-top:20px;
}

body>div>main>article>img{
	display:block;
	margin:20px auto;
	width: auto;
	max-width: 100%;
	height: auto; /* Это полезно для сохранения пропорций изображения */
}

body>div>footer a{
	color:#fe5;
}

body>div>footer img{
	height:40px;
	margin:10px;
	filter: sepia(100%) drop-shadow(0px 0px 5px rgba(255,255,255,0.5));
}

body>div>footer img:hover{
	filter: sepia(70%) drop-shadow(0px 0px 10px rgba(255,255,255,1));
}