/*DESKTOP*/

/* global variables */
:root {
	/* margins and paddings*/
	--bodyMargin: 1.25rem;
	--topMargin: 0;
	--rowMargin: calc(1.25rem * 1.2);
	--bottomMargin: 9rem;
	--paddingX: 0.5rem;
	--paddingY: 0.5rem;
	/* color */
	--backColor: #D0CBDA;
	--bodyColor: #111111;
	--blockColor: #FFFFFF;
	--extlinkColor: #0000FF;
	--hoverColor: #52ff7b;
	/* deco */
	--linkDeco: underline;
	/* text formats */
	--letterSpacing: .02em;
	--wordSpacing: .02em;
	--lineHeight: 1.2;
	/*font sizes*/
	--smallFont: 1rem;
	--mediumFont: 1.25rem;
	--textFont: 1.25rem;
	--largeFont: 1.5rem;
  	/* grid */
  	--gridSetUp: repeat(10, 1fr);
	--gridMenuSetUp: repeat(5, 1fr);
  	--gridMargin: calc(var(--bodyMargin)*0.66); 
	/* border*/
	--borderWidth: 0.1rem;
	--borderSetup: var(--borderWidth) solid var(--bodyColor);
	--borderRadius: 0.15rem;
	/* transitions */
	--transitionTime: 0.15s;
	/* opacity */
	--imageOpacity: 0;
	/* blur */
	--srcBlur: blur(calc(var(--bodyMargin)*1.5));
	--txtBlur: blur(1.5rem);
	/* shadow */
 	--boxShadow: 0vw 0.15vw 1vw rgba(0,0,0,0.3);
	--textShadow: 0vw 0.15vw 0.15vw rgba(0,0,0,0.25);
}

/*setup*/
::-webkit-scrollbar {
	display: none;
}

::selection {
	color: white;
	background-color: transparent;
}

::-moz-selection {
	color: white;
	background-color: transparent;
}

html {
	scroll-behavior: smooth !important;
}

/* fonts */
@font-face {
	font-family: Favorit Mono Light;
	src: url("fonts/Favorit-Mono-Light.woff");
}

@font-face {
	font-family: Favorit Light;
	src: url("fonts/Favorit-Light.woff");
}

@font-face {
	font-family: Favorit Light Italic;
	src: url("fonts/Favorit-Light-Italic.woff");
}

@font-face {
	font-family: Favorit Mono Regular;
	src: url("fonts/Favorit-Mono-Regular.woff");
}

@font-face {
	font-family: Favorit Regular;
	src: url("fonts/Favorit-Regular.woff");
}

@font-face {
	font-family: Favorit Light Italic;
	src: url("fonts/Favorit-Regular-Italic.woff");
}

.small_font {
	font-family: "Favorit Regular", sans-serif;
	font-size: var(--smallFont);
}
.small_mono_font {
	font-family: "Favorit Mono Regular", sans-serif;
	font-size: var(--smallFont);
}
.medium_font {
	font-family: "Favorit Light", sans-serif;
	font-size: var(--mediumFont);
}
.medium_font.italic {
	font-family: "Favorit Light Italic", sans-serif;
}
.medium_bold_font {
	font-family: "Favorit Regular", sans-serif;
	font-size: var(--mediumFont);
}
.large_font {
	font-family: "Favorit Regular", sans-serif;
	font-size: var(--largeFont);
}

body {
	position: relative;
	margin: var(--bodyMargin);
	background-color: var(--backColor);
	color: var(--textColor);
 	font-family: "Favorit Regular", sans-serif;
	font-size: var(--mediumFont);
	letter-spacing: var(--letterSpacing);
	word-spacing: var(--wordSpacing);
	line-height: var(--lineHeight);
	text-decoration: none;
	/*font smooth*/
  	-webkit-font-smoothing: smooth !important;
  	-moz-osx-font-smoothing: smooth !important;
  	text-rendering: geometricPrecision !important;
	/*
	transition-property: background-color, color, filter;
	transition-duration: var(--transitionTime);
	*/
}

img {
	vertical-align: middle;
}

/* text formats */
h1, h2, h3 {
	margin: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding: 0;
	font-weight: 400;
	font-size: var(--mediumFont);
	letter-spacing: var(--letterSpacing);
	word-spacing: var(--wordSpacing);
	line-height: var(--lineHeight);
}

p {
	display: block;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 0;
	/* font-size: var(--mediumFont);
	letter-spacing: var(--letterSpacing);
	word-spacing: var(--wordSpacing);
	line-height: var(--lineHeight); */
}

/* span {
	font-size: var(--mediumFont);
	letter-spacing: var(--letterSpacing);
	word-spacing: var(--wordSpacing);
	line-height: var(--lineHeight);
} */

/* menu format */
nav h1, nav p, nav ul, nav li {
	display: inline;
}

ul {
	display: block;
	list-style-type: none;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 0;
}

/* links */
a {	
	color: var(--linkColor);
	text-decoration: none;
	transition-property: color;
	transition-duration: var(--transitionTime);
}

/* menu */
/* .header {
	width: calc(100% - (var(--bodyMargin)*2) - (var(--paddingY)*2) - (var(--borderWidth)*2));
	position: fixed;
  	top: var(--bodyMargin);
  	left: var(--bodyMargin);
	padding: calc(var(--paddingX)*1.25) var(--paddingY) calc(var(--paddingX)*0.75) var(--paddingY);
	border: var(--borderSetup);
	border-radius: var(--borderRadius);
	background-color: var(--blockColor);
	line-height: 1;
} */

.site_name {
	position: fixed;
  	top: var(--bodyMargin);
  	left: var(--bodyMargin);
	padding: var(--paddingX) var(--paddingY) calc(var(--paddingX)*0.5) var(--paddingY);
	border: var(--borderSetup);
	border-radius: var(--borderRadius);
	background-color: var(--blockColor);
	font-family: "Favorit Mono Regular", sans-serif;
	font-size: var(--largeFont);
	line-height: 1;
	text-transform: uppercase;
	transition-property: background, background-color, color;
	transition-duration: var(--transitionTime);
	z-index: 99;
}

.site_title:hover {
	color: var(--blockColor);
	background-color: var(--bodyColor);
}

.battery {
	height: 99px;
    width: 65px;
	position: fixed;
    top: var(--bodyMargin);
    right: var(--bodyMargin);
    display: flex;
    justify-content: center;
    z-index: 99;
}

.battery .piece_1 {
	position: absolute;
    height: 88px;
    width: 100%;
    border: var(--borderSetup);
    border-radius: var(--borderRadius);
    background: var(--blockColor);
    bottom: 0;
    display: flex;
    align-items: end;
    justify-content: center;
}

.battery .piece_1 span {
	margin-bottom: calc(var(--paddingY)*0.75);
    font-size: var(--smallFont);
}

.battery .piece_2 {
	width: 24px;
    height: 8px;
	position: absolute;
    border: var(--borderSetup);
    border-bottom: 0;
    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
    background: var(--blockColor);
}

/*
.battery svg{
	width: 85px;
}

.battery polygon.st0 {
	fill:#FFFFFF;
}
*/

.menu_logbooks {
	width: calc(100% - (var(--bodyMargin)*2));
	position: fixed;
	bottom: var(--bodyMargin);
	left: var(--bodyMargin);
	display: grid;
	grid-template-columns: var(--gridMenuSetUp);
	grid-gap: var(--gridMargin);
	text-align: center;
	line-height: 1.1;
	z-index: 99;
}

.menu_logbooks a.logbook_button {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: calc(var(--paddingX)*1.25) var(--paddingY) calc(var(--paddingX)*0.75) var(--paddingY);
	border: var(--borderSetup);
	border-radius: var(--borderRadius);
	background-color: var(--blockColor);
	transition-property: background, background-color, color;
	transition-duration: var(--transitionTime);
	/*box-shadow: var(--boxShadow);*/
}

.menu_logbooks a.logbook_button:nth-child(6) {
	grid-column: 1 / 6;
	border: var(--borderWidth) solid #ff00ff;
}

/*
.menu_logbooks a.logbook_button:nth-child(6) .event,
.menu_logbooks a.logbook_button:nth-child(6) .title {
	color: #ff00ff;
}

.menu_logbooks a.logbook_button:nth-child(6):hover .event,
.menu_logbooks a.logbook_button:nth-child(6):hover .title,
.menu_logbooks a.logbook_button:nth-child(6).current .event,
.menu_logbooks a.logbook_button:nth-child(6).current .title{
	color: white;
}
*/

.menu_logbooks a.logbook_button:nth-child(6):hover,
.menu_logbooks a.logbook_button:nth-child(6).current {
	border: var(--borderSetup);
}

.menu_logbooks a.logbook_button .event{
	font-family: "Favorit Mono Regular", sans-serif;
	font-size: var(--smallFont);
	transition: var(--transitionTime);
}

.menu_logbooks a.logbook_button .title {
	font-family: "Favorit Regular", sans-serif;
	text-transform: uppercase;
	transition-property: background, background-color, color;
	transition-duration: var(--transitionTime);
}

.menu_logbooks a.logbook_button:hover {
	background: var(--bodyColor);
}

.menu_logbooks a.logbook_button:hover .event,
.menu_logbooks a.logbook_button:hover .title {
	color: var(--blockColor);
}

.menu_logbooks a.logbook_button.current {
	background: var(--bodyColor);
}

.menu_logbooks a.logbook_button.current .event,
.menu_logbooks a.logbook_button.current .title{
	color: var(--blockColor);
}

/* content */
.content {
    width: 100%;
    margin-top: var(--topMargin);
	margin-bottom: var(--bottomMargin);
    display: grid;
    grid-template-columns: var(--gridSetUp);
    grid-gap: 0 var(--gridMargin);
}

.content_col {
    grid-column: 3/9;
}

/* TABLET */
@media (max-width:1180px) {

:root {
	/* margins */
	--paddingX: 0.6rem;
	--paddingY: 0.6rem;
	/* grid */
	--gridMenuSetUp: repeat(3, 1fr);
	/*font sizes*/
	--smallFont: 1.5rem;
    --mediumFont: 2rem;
    --largeFont: 3rem;
}

.menu_logbooks .logbook_button:first-child {
	grid-column: 1 / 3;
}

.content_col {
    grid-column: 1/13;
}

}

/* MOBILE */
@media (max-width:1000px) {

:root {
	/* margins */
	--topMargin: 22.5rem;
	--bottomMargin: 25rem;
	--paddingX: 0.75rem;
	--paddingY: 0.75rem;
	/* grid */
	--gridMenuSetUp: repeat(2, 1fr);
	/*font sizes*/
	--smallFont: 1.6rem;
    --mediumFont: 2.2rem;
    --largeFont: 3rem;
}

.menu_logbooks .logbook_button:first-child {
	grid-column: 1 / 3;
}

.site_title {
	padding: calc(var(--paddingX)*1.25) calc(var(--paddingY)*1.25) calc(var(--paddingX)*0.5) calc(var(--paddingY)*1.25);
	font-size: var(--largeFont);
}

}