@charset "UTF-8";

body {
	cursor: default;
	margin: auto;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}

:root {
	--hide-on: none;
}
.hide-on-all {
	display: var(--hide-on);
}
.hide-on-m {
	display: var(--hide-on);
}

h1, h2 {
    margin: 0;
}



:root {
	--page-space-width: calc(100vw - 20px);
}



:root {
	--nav-size: 60px;
	--nav-border-radius: calc(var(--nav-size) / 2);
	--nav-backdrop-filter: blur(10px);
    --nav-height-spacer: 15px;
}

nav {
	width: calc(var(--page-space-width) + 20px);
	position: fixed;
	bottom: 0px;
	z-index: 10;
	white-space: nowrap;
	background: var(--nav-background);
    backdrop-filter: var(--nav-backdrop-filter);
	-webkit-backdrop-filter: var(--nav-backdrop-filter);
	border-radius: var(--nav-border-radius) var(--nav-border-radius) 0px 0px;
    transform: translateY(calc(100% - var(--nav-size)));
    transition: transform 0.2s linear;
}

nav::scrollbar { 
	display: none;
}
nav::-webkit-scrollbar { 
	display: none;
}

nav.active {
    transform: translateY(0);
}

.nav-btts {
	display: flex;
    flex-wrap: wrap;
    padding: 0px var(--nav-height-spacer);
}

.nav-btt {
	height: var(--nav-size);
	display: flex;
	justify-content: center;
	align-items: center;
}

.nav-link {
	text-decoration: none;
    transition: 0.25s ease;
}

body.hasHover .nav-link:hover {
    opacity: 0.75;
}

.nav-section-logo {
	width: calc(var(--nav-size) - 20px);
	height: calc(var(--nav-size) - 20px);
	background: var(--nav-logo);
    margin: 0px var(--nav-height-spacer);
}

.nav-screen {
    flex: 1 0 100%;
}

.nav-screen-margin {
    margin: 0px auto var(--nav-size) auto;
}

.nav-btt-right {
    display: flex;
    position: absolute;
    top: 0;
    right: var(--nav-height-spacer);
}

.nav-section-name {
	font: 19px/1 "SF regular";
	color: var(--nav-section-name);
    letter-spacing: 0.3px;
    margin: calc(var(--nav-height-spacer) * 2) var(--nav-height-spacer);
    text-align: center;
}

.nav-lang-icon {
    background: var(--nav-lang-icon);
    width: calc(var(--nav-size) / 2.5);
    height: calc(var(--nav-size) / 2.5);
}

.nav-open-icon {
    background: var(--nav-open-icon);
    width: calc(var(--nav-size) / 2.5);
    height: calc(var(--nav-size) / 2.5);
}

.nav-close-icon {
    background: var(--nav-close-icon);
    width: calc(var(--nav-size) / 2.5);
    height: calc(var(--nav-size) / 2.5);
}



.footer-space {
    width: calc(var(--page-space-width) - 50px);
	max-width: var(--page-space-max-width);
    margin: 15px auto 0px auto;
    background: var(--footer-space-bg);
    border-radius: 25px;
    padding: 15px 25px 30px 25px;
    text-align: center;
}

.footer-column {
    width: calc(var(--page-space-width) - 50px));
}

.footer-title {
    margin-top: 25px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font: 14px/1 "SF bold";
    color: var(--footer-title-color);
}

.footer-title-a {
    color: var(--footer-title-color);
    text-decoration: none;
}

.footer-link {
    margin: 7.5px 0px;
    font: 14px/1 "SF regular";
    color: var(--footer-link-color);
}

.footer-link-a {
    color: var(--footer-link-color);
    text-decoration: none;
    transition: 0.2s ease;
}

body.hasHover .footer-link-a:hover {
    text-decoration: underline;
}



.page-space {
	width: 100%;
    padding: calc(var(--nav-size) / 4) 0px calc(var(--nav-size) * 1.25) 0px;
}



.content--container {
    width: var(--page-space-width);
}

.content--container-title {
    font: 20px/1.3 "SF bold";
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--content--container-title);
    text-align: center;
    padding: 20px 0px 15px 0px;
    position: sticky; position: -webkit-sticky;
    top: 0px;
    z-index: 1;
}

.content--container-group_spacer + .content--container-group_spacer {
    margin-top: 15px;
}

.content--type-label {
    width: max-content;
    border-radius: 6px;
    font: 12px/1 "SF medium";
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 6px 6px 8px;
}

.spacer-before-more_content {
    height: 40px;
}



.googleadsense-ad-link {
    margin-top: 10px;
    letter-spacing: 0.5px;
    font: 14px/1.75 "SF regular";
    text-align: center;
}

.googleadsense-ad-link-a {
    color: var(--googleadsense-ad-link);
    text-decoration: underline;
    transition: 0.2s ease;
}

body.hasHover .googleadsense-ad-link-a:hover {
    color: var(--regular-text-link-hover);
}