@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

:root
{
    --color: #56AF75;
    --color-main:#FDFFFC;
    --color-secondary:#161925;
    --color0: #aeb0ad;
    --color1:#5D9BD5;
    --color2:#DB575B;
    --color3:#EEC643;
	--link: #0a6ede;
	--link-visit: #a90ade;
}

@media (prefers-color-scheme: dark)
{
    :root {
        --color-main:#161925;
        --color-secondary:#FDFFFC;
        --color0: #444450;
        --color1:#235789;
        --color2: #9f2226;
        --color3:#BB9311;
		--link: #3d85e7;
		--link-visit: #a33de7;
    }
}

body {
	margin : 0;
	background-color: var(--color-main);
}

body {
	--page-color: var(--color0);
}

:link  {
	color: var(--link);
}

:visited {
	color: var(--link-visit);
}

header {
	height: 80px;
	padding: 10px;

	display: flex;
	justify-content: space-between;
      background-color: var(--color-secondary);
      color: var(--color-main);
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	z-index: 10;
}

header::after {
    display: block;
    content: "";
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%);
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    height: 20px;
	z-index: 6;
}
header > * {
	flex: 1;
}

#header-left a {
	height: 80px;
	display: flex;
	flex-direction: row;
}

#header-left a {
	text-decoration: none;
}

header .icon {
	width: 80px;
    fill:var(--color-main);
}

header .licon {
	fill:var(--color-main);
	width: 20px;
	height: 20px;
	margin: 30px 0 0 0;

}

a, a span, a svg, a h1, a div, #menu {
	transition-property: fill, color;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
a:hover, a:hover span, a:hover svg, a:hover h1, a:hover div, #menu:hover {
	fill: var(--color) !important;
	color: var(--color) !important;
}

#header-left h1 {
	margin-left: 20px;
	align-self: center;
	color: var(--color-main);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 1.1em;
}


#header-middle {
	align-self: center;
	width: 350px;
}

#header-middle nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

#header-middle nav ul li {
	display: flex;
	list-style: none;
	height: 100%;
	padding: 10px;
}

#header-middle nav ul li a {
    width: 100%;
}

header .active {
    text-decoration: underline;
}

#header-middle nav ul a {
	text-decoration: none;
	display: block;
	font-family: 'Roboto Mono', sans-serif;
}


#header-middle nav ul li{
	text-align: center;
	width: 100%;
}

#header-middle nav ul a:hover {
	color: var(--color) !important;

}

#header-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#header-right a {
	margin: 0 10px;
}

#header-lang {
	position: absolute;
	top: 100px;
	right: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: var(--color-secondary);
	z-index: 8;
	padding: 5px 10px;
	border-bottom-left-radius: 5px;
	gap: 5px;
}

#header-lang a {
	width: 20px;
	height: 16px;
}

#menu {
	display: none;
	position: absolute;
	top: 30px;
	right: 30px;
	height: 40px;
	width: 40px;
	fill: var(--color-main);
      cursor: pointer;
}


@media (max-width: 800px) {
	header {
		flex-direction: column;
	}

	#header-left h1 {
		position: absolute;
		top: 30px;
		left: 0;
		right: 0;
		font-size: 1.5em;
		margin: 0;
		text-align: center;
	}

	#header-middle {
		display: none;
	}

	.mobile-menu #header-middle {
		display: flex;
		width: 100%;
		justify-content: center;
	}

	#header-middle nav ul {
		flex-direction: column;
		font-size: 2em;
		align-items: center;
	}

	#header-right {
		justify-content: space-evenly;
	}

	#header-right a {
		display: none;
		margin: auto;
	}

	#header-right a img {
		margin: 0;
	}
	header .licon {
		width: 40px;
	}

	.mobile-menu #header-right a {
		display: block;
	}

	#menu {
		display: block;
	}

	header {
		transition: height .6s;
	}
	header.mobile-menu {
		height: 100vh;
		transition: height .6s;
	}

	header::after {
		transition-property: height;
		transition-delay: .6s;
		transition-duration: .2s;
	}

	header.mobile-menu::after {
		height: 0;
		transition-delay: 0s;
		transition-duration: 0s;
	}

      h1 {
		font-size: 1.6em;
      }

	.contain {
		font-size: .8em;
	}
}


#page {
	display: flex;
	flex-direction: column;
	color: var(--color-secondary);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 1.1em;
	margin-top: 80px;
}

.video {
	margin: 0 auto;
	width: min(100%, 960px);
	height: min(100vh, 540px);
	align-items: center;
}

p {
	margin: 1em 20px;
}
.part {
	padding: 40px 0;
}

.part:nth-child(even) {
    background-color: var(--page-color);
}

.part:nth-child(even)::before {
    display: block;
    content: "";
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%);
    position: relative;
    top: -40px;
    left: 0;
    right: 0;
    height: 20px;
}


.part:nth-child(even)::after {
    display: block;
    content: "";
    background: linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%);
    position: relative;
    bottom: -40px;
    left: 0;
    right: 0;
    height: 20px;
}

.w960 {
	margin: 0 auto;
	max-width: 960px;
	display: flex;
	align-items: center;
}

.w960 div.contain {
	order: 1;
	text-align: justify;
	width: 100%;
}

.w960 div.contain .title {
	font-size: 1.4em;
	text-align: center;
}

.w960 div.contain .subtitle {
	font-size: 1em;
	text-align: center;
	font-style: italic;
	margin: 0;
}

.w960 div.contain img {
	max-width: 960px;
	height: auto;
	display: block;
	margin: auto;
}

.w960 .tags {
	order: 2;
	margin-top: 15px;
	display: flex;
	flex-wrap: wrap
}

.w960 .tag {
    padding: 8px 16px;
    margin: 5px 20px;
    order: 2;
    display: flex;
    background: var(--color-secondary);
    color: var(--color-main);
    border-radius: 23px;
    text-decoration: none;
    font-size: .8em;
}

.a-button {
	text-decoration: none;
}

.button {
	padding: 20px;
	background-color: var(--color-secondary);
	border-radius: 5px;
	width: -moz-fit-content;
	width: fit-content;
	margin:auto;
	color: var(--color-main);
}