@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');

:root {
	--black: #111111;
	--white: #ffffff;
	--grey: #757575;
	--yellow: #FFEE58;
	--placeholder: #FFF9C4;
	--blue: #1565C0;
}

* {
	margin: 0;
	padding: 0;

	font-family: 'Roboto', sans-serif;
	color: var(--black);
	box-sizing: border-box;
}

html {
	font-size: 16px;
}


.wrapper-body {
	max-width: 1360px;
	margin: 0 auto;
}

a {
	text-decoration: none;
}

b, b * {
	font-weight: 700 !important;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 1rem;
}

button.styled,
.welcome-screen #submit-an-article .arrow {
	cursor: pointer;

	padding: 0.75rem;
	background-color: var(--white);
	border: 1px solid var(--black);
}

button.styled {
	transition: 0.3s;
}

button.styled:hover {
	background-color: var(--black);
	color: var(--white);
}

.headline {
	margin: 4rem 1rem 2rem 1rem;
	text-align: center;
}

.headline ~ .sndline:first-of-type {
	margin-top: -1.5rem;
}

.sndline {
	margin: 0.5rem 0;
	text-align: center;
	font-weight: 300;
}

hr.styled {
	width: 16%;
	margin: 0.75rem 0;

	border: 2px var(--yellow) solid;
	border-radius: 5px;

	filter: blur(1px);
}

hr.headline {
	width: 8vw;
	margin: 0.75rem auto 2rem auto;

	border-top: 1px var(--black) solid;
}

header {
	z-index: 999;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	display: flex;
	justify-content: space-between;

	background-color: #fffc;
}

#menu-button,
#menu-button-label {
	position: fixed;
	display: none;
}

#cms-top ~ .placeholder {
	margin-top: 46px !important;
}

#cms-top ~ header {
	top: 46px !important;
}

header .logo {
	padding: 0.75rem;

	font-weight: 700;
	text-align: center;
}

header > div {
	display: flex;
	justify-content: center;
}

header ul {
	display: flex;
	align-items: center;
}

header ul li {
	position: relative;
	list-style: none;
}

header ul li a {
	display: block;
	cursor: pointer;

	height: 100%;
	padding: 0.75rem 1rem;

	font-weight: 700;
	line-height: 38px;

	transition: 0.3s;
}

header ul li a:hover {
	background-color: #0001;
}

header .langs {
	position: relative;
}

header .langs li.active {
	text-decoration: underline;
}

header .langs::after {
	content: '';

	position: absolute;
	top: 15%;
	left: 0;
	bottom: 15%;

	width: 1px;
	background-color: var(--grey);
}

header .lang a {
	font-weight: 300;
}

header ul.menu {
	--right-offset: 32px;

	position: relative;

	padding-right: var(--right-offset);
}

header ul.menu::after {
	--size: 8px;

	content: '';
	z-index: 1000;
	position: absolute;
	top: 31px;
	right: 0;

	width: var(--size);
	height: var(--size);
	border-top: 2px var(--black) solid;
	border-right: 2px var(--black) solid;

	transform: translate(-135%, -80%) rotate(135deg);
	transition: transform .3s;
}

header ul.menu:hover::after {
	transform: translate(-135%, -30%) rotate(-45deg);
}

header ul.menu li:nth-of-type(n + 5) {
	display: none;
}

header ul.menu:hover li:nth-of-type(n + 5) {
	position: absolute;
	top: 100%;
	right: var(--right-offset);

	display: list-item;

	width: calc(100% - var(--right-offset));
	background-color: #fffc;
}

header ul.menu:hover li:nth-of-type(6) {
	top: 200%;
}

header ul.menu:hover li:nth-of-type(7) {
	top: 300%;
}

header ul.menu:hover li:nth-of-type(8) {
	top: 400%;
}

header ul.menu:hover li:nth-of-type(9) {
	top: 500%;
}

header ul.menu:hover li:nth-of-type(10) {
	top: 600%;
}

header ul.menu:hover li:nth-of-type(n + 5) a {
	text-align: right;
}

.welcome-screen {
	--height: 600px;

	display: grid;
	grid-template-columns: 1fr 1fr;

	height: var(--height);
}

.welcome-screen .welcome-text {
	display: flex;
	justify-content: start;
	align-items: center;
}

.welcome-screen .welcome-text div {
	padding: 1.5rem 5%;
	margin: 0 auto;
}

.welcome-screen .welcome-text h1 {
	text-align: center;
	font-weight: 700;
}

.welcome-screen .welcome-text hr {
	margin: 0.75rem auto;
}

.welcome-screen .welcome-text p {
	max-width: 420px;
}

.welcome-screen .welcome-img {
	position: relative;
	max-height: 100%;
}

.welcome-screen .welcome-img-container {
	height: var(--height);
}

.welcome-screen .welcome-img-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.welcome-screen #submit-an-article {
	position: absolute;
	bottom: 10%;
	left: calc(-2.5rem - 2px);
}

.welcome-screen #submit-an-article .arrow {
	position: relative;

	display: block;
	float: left;

	width: calc(2.5rem + 1px);
	height: calc(2.5rem + 1px);
	background-color: var(--black);
}

.welcome-screen #submit-an-article .arrow::before,
.welcome-screen #submit-an-article .arrow::after {
	content: '';
	position: absolute;

	border: 1px var(--white) solid;
}

.welcome-screen #submit-an-article .arrow::before {
	top: 50%;
	left: 50%;

	width: 0.8rem;

	transform: translate(-50%, -50%);
}

.welcome-screen #submit-an-article .arrow::after {
	top: calc(50% - 4px);
	left: 50%;

	width: 0.4rem;
	height: 0.4rem;

	border-width: 2px;
	border-right: none;
	border-bottom: none;

	transform: rotate(135deg);
}

.libraries {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}

.libraries img {
	padding: 1rem;
}

.img-text-block {
	display: grid;
	grid-template-columns: 1fr 2fr;
	column-gap: 4rem;

	padding: 2rem 4rem;
}

.img-container {
	text-align: center;
}

.img-container button,
.img-container p {
	margin: 1rem 0;
}

.img-container img {
	width: 80%;
	height: auto;
	margin: 0 auto;
}

.text-container {
	line-height: 150%;
}

.text-container li::first-line {
	padding-left: 1rem;
}

.news-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1rem;

	padding: 1rem;
}

.news {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	max-width: 240px;
	margin: 0 auto;
	padding: 1rem;
	border: 1px var(--black) solid;

	text-align: center;
}

.news button {
	margin-bottom: 1rem;
}

.news p {
	margin: 0.5rem 0;
	text-align: justify;
}

.news .news-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.news .news-date {
	text-align: center;
	color: var(--grey);
	font-weight: 400;
	font-size: 0.8rem;
}

.news img {
	width: 80%;
	height: auto;
	object-fit: cover;
}

.news h4 {
	margin-bottom: 2rem;
}

footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;

	padding: 4rem;
	margin-top: 2rem;
	background-color: var(--black);

	line-height: 150%;
}

footer * {
	color: var(--white);
}

footer a {
	font-weight: 700;
}

.soon-articles {
	max-width: 670px;
	margin: 0 auto;
	padding: 1rem;
}

.article {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;

	margin: 1rem 0;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.flex-center > a {
	margin: 0 0.5rem;
}

.article-content {
	display: grid;
	grid-template-columns: 10fr minmax(45px, 1fr) minmax(45px, 1fr);
	gap: 1rem;

	width: 1000px;
	max-width: 100%;
	padding: 0.5rem 1rem;
}

.pdf-container {
	cursor: pointer;

	display: block;
	text-align: center;
}

.pdf-container i {
	font-size: 2rem;
}

.archive-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;

	width: 1000px;
	max-width: 100%;
	padding: 1rem;
	margin: 0 auto;
}

.archive_year {
	text-align: center;
}

.archive_year h3 {
	margin: 1rem 0;

	font-size: 2rem;
	font-weight: 300;
}

.issues-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

.issue {
	padding: 0.5rem;
}

.issue img {
	width: 100%;
}

.content-container {
	margin: 1rem 4rem;
	line-height: 150%;
}

.content-container a {
	color: var(--blue);
}

.content-container p {
	text-align: justify;
}

.auth-container {
	display: flex;
	align-items: center;

	padding: 0 1rem;
}

/*
 *
 *
 *
 *
 *
 * MEDIA
 *
 *
 *
 *
 *
 */

@media (max-width: 968px) {

	.wrapper-body {
		max-width: 640px;
	}

	header {
		bottom: 0;

		display: block;

		padding: 4rem 0;
		background-color: var(--white);

		transition: 0.3s;
	}

	header .logo {
		background-color: var(--placeholder);
	}

	header ul.menu {
		flex-direction: column;
		align-items: flex-start;

		padding-right: 0;
	}

	header ul.menu::after {
		display: none;
	}

	header ul.menu li {
		display: block;
		width: 100%;
	}

	header ul.menu li:nth-of-type(n + 5),
	header ul.menu:hover li:nth-of-type(n + 5),
	header ul.menu:hover li:nth-of-type(n + 5) {
		position: static;
		display: block;
		width: 100%;
	}

	header ul.menu:hover li:nth-of-type(n + 5) a,
	header ul.menu:hover li:nth-of-type(n + 5) a {
		text-align: left;
	}

	header > div {
		flex-direction: column;
	}

	.auth-container {
		justify-content: center;
	}

	#menu-button {
		opacity: 0;
	}

	#menu-button-label {
		z-index: 1000;
		top: 0.5rem;
		left: calc(100vw - 3rem);

		display: block;

		width: 2rem;
		height: 2rem;
		background-color: var(--white);
		border: 1px solid var(--black);

		transition: 0.3s;
	}

	#menu-button:checked ~ header {
		transform: translateX(-100%);
	}

	#menu-button:checked ~ #menu-button-label {
		left: 0.5rem;
	}

	#cms-top ~ #menu-button-label {
		top: calc(46px + 0.5rem);
	}

	#menu-button-label::before,
	#menu-button-label::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;

		width: 1rem;
		height: 1.5px;

		background-color: var(--black);

		transform: translate(-50%, -50%);
	}

	#menu-button-label::after {
		width: 1rem;
		height: 0.6rem;

		background-color: transparent;
		border-top: 2px solid var(--black);
		border-bottom: 2px solid var(--black);
	}

	header .langs {
		justify-content: center;
	}

	header .langs::after {
		display: none;
	}

	.welcome-screen {
		grid-template-columns: 1fr;
		grid-template-rows: 2fr minmax(2fr, 3fr);

		height: auto;
	}

	.welcome-text {
		grid-row: 1;
	}

	.welcome-screen #submit-an-article {
		left: 50%;
		transform: translateX(-50%);
	}

	.img-text-block {
		grid-template-columns: 1fr;

		padding: 2rem;
	}

	.archive-content {
		grid-template-columns: 1fr;
	}

	.img-container img {
		width: 100%;
	}

	.welcome-screen .welcome-img-container {
		height: auto;
	}

	.news-container {
		grid-template-columns: 1fr;
	}

	.news {
		max-width: none;
		width: 80%;
	}

	footer {
		grid-template-columns: 1fr;
	}

	.content-container {
		margin: 1rem 2rem;
	}
}