body {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	margin: 0;
}

/* navbar */

.navbar {
	list-style-type: none;
	background-color: #02399e;
	color: white;
	margin: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	padding: 0.6em;
}

.navbar li {
	cursor: pointer;
	transition: transform 0.5s ease;
}

.icons:hover {
	transform: scale(1.02, 1.02);
}

.navbar > #menu {
	width: 10%;
}

.navbar > #name {
	flex: auto;
}

.icons img {
	width: 30px;
}

#name {
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
}

.icons {
	width: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* alert */

.alert h2 {
	margin: 0;
}

.alert {
	background-color: #9d010f;
	padding: 1em;
	text-align: center;
	color: white;
	font-weight: bold;
	overflow: hidden;
}

.alert h2 {
	animation: animate 14s linear infinite;
	font-size: 1.2em;
}

@keyframes animate {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}

/* page */

.page {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 50px 10% 50px 10%;
}

.article {
	width: 67%;
}

/* fake nav */

.fake-nav {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	color: #a7a7a7;
	margin: 0 0 20px 0;
	width: 25%;
}

.fake-nav img {
	width: 20px;
}

.fake-nav h4 {
	font-size: 1em;
	font-weight: bold;
	margin: 0;
}

.fake-nav h3 {
	font-size: 0.7em;
	margin: 0;
}

.fake-nav h3:hover,
.fake-nav img {
	opacity: 85%;
	cursor: pointer;
}

.img-world-cup {
	width: 100%;
	margin-bottom: 15px;
}

/* article */

.article h2 {
	font-weight: bold;
	font-size: 2.5em;
	margin: 0;
}

.article-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 228px;
	align-items: center;
	margin: 30px 0 30px 0;
}

.article-info p {
	margin: 0;
	font-weight: bold;
}

#journalist-name {
	font-size: 0.8em;
}

#date {
	color: #a7a7a7;
	font-size: 0.7em;
}

.text-article {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	margin: 0;
	font-size: 1.2em;
	height: 70vh;
}

.text-article span {
	font-weight: bold;
}

.text-article p,
.text-article span {
	margin: 0;
	width: 80%;
}

/* pub */

.pub {
	width: 27%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.pub li {
	height: 300px;
	width: 100%;
	border: 1px solid black;
	text-align: center;
	margin-bottom: 15px;
}

.pub img {
	height: 300px;
	width: 100%;
	object-fit: cover;
}

/* footer */

.footer {
	background-color: #001741;
	color: white;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.footer h2,
.footer p {
	margin: 0;
}

#slogant-end {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.footer h2 {
	margin: 30px 0 0 0;
}

.footer p {
	margin: 20px 0 0 0;
	padding: 2em;
	border-top: 1px solid #354f82;
	font-size: 0.8em;
	color: #354f82;
}