@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&family=Lato:wght@400&family=Lustria&family=Noto+Color+Emoji&family=Noto+Serif+Display&display=swap');
:root {
	--blue:  #d0f0ff;
	--white: #fff;
	--grey:  #e6e6e6
}
body {
	background: linear-gradient(to right, 
	var(--blue), var(--blue) 11.11%,
	var(--white) 11.11%, var(--white) 22.22%,
	var(--blue) 22.22%, var(--blue) 33.33%,
	var(--white) 33.33%, var(--white) 44.44%,
	var(--blue) 44.44%, var(--blue) 55.55%,
	var(--white) 55.55%, var(--white) 66.66%,
	var(--blue) 66.66%, var(--blue) 77.77%,
	var(--white) 77.77%, var(--white) 88.88%,
	var(--blue) 88.88%, var(--blue) 100%);
}
* {
	padding: 0;
	margin: 0;
}
header {
	height: 70px;
	background-color: var(--blue);
	display: flex;
	flex-direction: row;
	align-items: center;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
}
header::after {
	flex: 1;
	content: '';
}
#greekflag {
	display: inline;
	flex: 1;
}
h1 {
	font-size: 50px;
	font-family: 'Lustria', serif;
	display: inline;
	text-align: center;
}

article {
	margin: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	height: 422px;
	width: 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	outline: 1px solid black;
	padding: 5px;
	box-shadow: 0 0 5px black;
	background-color: var(--grey);
}
article:nth-child(4n+1) {
	transform: rotate(1deg);
}
article:nth-child(4n+2) {
	transform: rotate(-1deg);
}
article:nth-child(4n+3) {
	transform: rotate(0deg);
}
article:nth-child(4n+4) {
	transform: rotate(-2deg);
}

img {
	height: 330px;
	width: 330px;
	object-fit: contain;
	background-color: black;
}

p {
	font-family: 'Lato', sans-serif;
}

.title {
	font-size: 20px;
}
.date {
	font-size: 15px;
	color: var(--white);
}