/* DESKTOP */

/* global variables */
:root {
  	/* text */
    --miniFont: 0.8rem;
	--smallFont: 1.3rem;
  	--mediumFont: 1.8rem;
  	--largeFont: 13vh;
  	--fontWeight: 400;
  	--letterSpacing: .02em;
  	--wordSpacing: 0em;
  	--lineHeight: 1.1;
  	--lineHeightMenu: 0.9;
  	/* margins */
  	--marginX: 1.4rem;
  	--marginY: 1.4rem;
  	--bodyMargin: var(--marginX) var(--marginY);
  	--rowMargin: calc(var(--mediumFont) * var(--lineHeight));
  	/* grid */
  	--sixGrid: repeat(6, 1fr);
  	--gridGap: var(--marginY);
    --gridBorderSize: 1px 33.33%;
    --gridBorderBG: linear-gradient(90deg,var(--border-color),var(--border-color) calc(100% - 16px),transparent calc(100% - 16px),transparent);
  	/* color and deco */
  	--paletteWhite: #FFFFFF;
  	--paletteIvory: #fff7f2;
    --paletteOffWhite: #f1f3f4;
  	--paletteViolet: #cecfe3;
    --palettePink: #fff9f6;
    --paletteGreen: #00ff00;
  	--paletteBlack: #000000; 
  	--backColor: var(--paletteViolet);
  	--textColor: var(--paletteBlack);
  	--linkColor: var(--paletteBlack);
  	--hoverColor: var(--paletteGreen);
  	--linkDeco: underline;
    --borderLine: 0.4vh solid var(--paletteBlack); 
  	/* elements */
  	--srcWidth: calc(50vw - (var(--gridMargin)*2));
  	--srcHeight: calc(100vh - (var(--rowMargin)*6));
  	/* opacity */
  	--txtOpacity: 0;
  	--srcOpacity: 0;
  	/* blur */
  	--txtBlur: blur(1.5rem);
  	--srcBlur: blur(calc(var(--bodyMargin)*0.75));
  	--srcShadow: 0vw 0.25vw 1.75vw rgba(0,0,0,0.25);
  	--srcShadowThumb: 0vw 0.125vw 0.75vw rgba(0,0,0,0.25);
  	--textShadow: 0vw 0.25vw 0.15vw rgba(0,0,0,0.25);
  	/* transitions */
  	--transitionTime: 0.3s;
}

/* useful properties */

/* box sizing */
/* box-sizing: border-box;
-webkit-box-sizing: border-box; */

/* break work */
/* overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto; */

/* ellipsis... */
/* white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */

/* gradient */
/* -webkit-box-shadow: 0 var(--rowMargin) var(--rowMargin) calc(var(--rowMargin)*3) var(--backColor);
box-shadow: 0 var(--rowMargin) var(--rowMargin) calc(var(--rowMargin)*3) var(--backColor); */

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

/* selection */
::selection {
	color: var(--backColor);
	background-color: var(--textColor);
}

::-moz-selection {
	color: var(--backColor);
	background-color: var(--textColor);
}

/* fonts */
@font-face {
	font-family: AMA Regular;
	src: url("uploads/layout/AMA-Regular.woff");
}

@font-face {
	font-family: Diatype Expanded Medium;
	src: url("uploads/layout/Diatype-Expanded-Medium.woff");
}

@font-face {
	font-family: Diatype Light;
	src: url("uploads/layout/Diatype-Light.woff");
}

@font-face {
	font-family: Diatype Light Italic;
	src: url("uploads/layout/Diatype-Light-Italic.woff");
}

@font-face {
	font-family: Diatype Thin;
	src: url("uploads/layout/Diatype-Thin.woff");
}

@font-face {
	font-family: Diatype Thin Italic;
	src: url("uploads/layout/Diatype-Thin-Italic.woff");
}

/*
* {
  -webkit-font-smoothing: smooth;
  -moz-osx-font-smoothing: smooth;
  text-rendering: geometricPrecision;
}
*/

/* tags setup */

html {
  scroll-behavior: smooth;
}

body {
	position: relative;
  	margin: var(--bodyMargin);
    color: var(--textColor);
  	background: var(--backColor);
	font-family: "Diatype Light";
    font-size: var(--mediumFont);
    line-height: var(--lineHeight);
}

img {
	vertical-align: middle;
}

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;
}

li {
	display: block;
}

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

h1, h2, h3 {
	margin: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding: 0;
	font-size: var(--mediumFont);
	font-style: normal;
	font-weight: 400;
}

p {
	display: block;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 0;
}

span {
	display: inline;
}

/* grid */
.grid_item {
    padding: calc(var(--marginX) * 0.5) calc(var(--marginY) * 0.5);
}

/* header and menu */
header {
	width: calc(100% - var(--marginY)*2);
	position: fixed;
    top: 0;
    left: 0;
	display: grid;
	grid-template-columns: var(--sixGrid);
	grid-gap: 0 var(--gridGap);
    padding: var(--marginY);
  	z-index: 100;
}

header.hide {
	pointer-events: none;
    z-index: 1;
}

.menu_button, nav.menu {
	font-family: "AMA Regular";
  	font-size: var(--largeFont);
	line-height: var(--lineHeightMenu);
}

.menu_button {
  	top: 0;
  	left: calc(var(--marginX) * 0.25);
    grid-column: 1 / 2;
    cursor: default;
    align-self: start;
    pointer-events: none;
}

.menu_button span {
    transform: scale(-100%);
}

.menu_button span {
    pointer-events: auto !important;
}

nav.menu {
	position: relative;
	grid-column: 2 / 6;
    height: calc(100vh - var(--marginX) * 2);
    /*
    border-left: var(--borderLine);
    border-right: var(--borderLine);
    */
    padding: 0 calc(var(--marginY)*1.2);
}

nav.menu:before {
    background-image: linear-gradient(0deg, black, black calc(100% - var(--marginX)*0.6), transparent calc(100% - var(--marginX)*0.6), transparent);
    top: calc(var(--marginX)*-0.6);
    left: 0;
    width: 3px;
    /*height: 100%;*/
    background-size: 1px 14.3%;
    content: "";
    position: absolute;
    bottom: calc(var(--marginX)*-1.2);
}

nav.menu:after {
    background-image: linear-gradient(0deg, black, black calc(100% - var(--marginX)*0.6), transparent calc(100% - var(--marginX)*0.6), transparent);
    top: calc(var(--marginX)*-0.6);
    right: 0;
    width: 3px;
    /*height: 100%;*/
    background-size: 1px 14.3%;
    content: "";
    position: absolute;
    bottom: calc(var(--marginX)*-1.2);
}

nav.menu.hide {
	pointer-events: none;
}

nav.menu ul {
    opacity: 1;
    transition: opacity var(--transitionTime);
    margin-top: calc(var(--marginX)*-0.5);
    
}

nav.menu.hide ul, .menu_button:hover ~ nav.menu ul{
	opacity: 0;
    pointer-events: none;
}

/*
nav.menu ul{
	mix-blend-mode: difference !important;
}

nav.menu ul a {
	color: var(--paletteWhite) !important;
}
*/

nav.menu ul li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

nav.menu ul a:hover {
	color: var(--hoverColor);
}

@keyframes blink {
	50% { color: #00ff00; }
}
@-webkit-keyframes blink {
	50% { color: #00ff00; }
}

nav.menu li.menu_item .soon {
  	animation: blink 2s step-start 0s infinite;
  	-webkit-animation: blink 2s step-start 0s infinite;
  	transition: opacity 0.5s;
}

nav.menu li.menu_item .soon {
	font-family: "Diatype Expanded Medium" !important;
  	font-size: var(--miniFont);
    text-transform: uppercase;
    line-height: 2.5;
    vertical-align: top;
    margin: calc(var(--marginY) * 0.75);
    font-family: "Diatype Light";
}

nav.menu ul li.about_menu_item {
	transition-property: color;
	transition-duration: var(--transitionTime);
	cursor: pointer;
}

nav.menu ul li.about_menu_item:hover {
	color: var(--hoverColor);
}

nav.sub_menu {
  grid-column: 6 / 7;
  font-family: "Diatype Expanded Medium";
  font-size: var(--miniFont);
  text-align: right;
  text-transform: uppercase;
  z-index: 50;
}

nav.sub_menu a {
}

nav.sub_menu a:hover {
  color: var(--hoverColor);
}

/* content */
.content {
	width: 100%;
  	/* min-height: calc(100vh - var(--rowMargin)*5); */
	/* padding-bottom: calc(var(--rowMargin)*3); */
	/* margin-top: var(--rowMargin); */
  	position: relative;
	/* content grid */
	display: grid;
	grid-template-columns: var(--indexGrid);
	grid-gap: 0 var(--gridGap);
}

/* footer */
footer {
	width: calc(100% - var(--marginY)*2);
	position: fixed;
    bottom: 0;
    left: 0;
	display: grid;
	grid-template-columns: var(--sixGrid);
	grid-gap: 0 var(--gridGap);
    padding: var(--marginX);
    font-size: var(--mediumFont);
  	z-index: 50;
    opacity: 1;
    transition: opacity var(--transitionTime);
}

footer.hide {
    opacity: 0;
    pointer-events: none;
}

footer .signature {
	grid-column: 2 / 4;
    padding: 0 calc(var(--marginY)*1.2);
}

footer .subscribe {
	grid-column: 4 / 6;
    padding: 0 calc(var(--marginY)*1.2);
}

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

	:root {
		--mediumFont: var(--smallFont);
        --largeFont: 9vh;
	}

	/*viewport height*/
	body {
  		height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  		height: calc(var(--vh, 1vh) * 100);
	}
    
    nav.menu li.menu_item .soon {
      	line-height: 1.7;
      	margin: calc(var(--marginY) * 0.5);
	}

}

/*TABLET (VERTICAL)*/
@media (max-width:820px) {
	
    :root {
    	--smallFont: var(--miniFont);
	}
    
    nav.menu li.menu_item .soon {
    	margin: calc(var(--marginY) * 0.25);
	}

}

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

	:root {
    	--bodyMargin: calc(var(--marginX)*0.75) calc(var(--marginY)*0.75);
        --miniFont: 0.6rem;
    	--mediumFont: 1rem;
        --largeFont: 11.5vw;
	}
	
    header {
    	width: calc(100% - var(--marginY)*1.5);
    	padding: calc(var(--marginY)*0.75);
    	grid-gap: var(--gridGap);
    }
    
    nav.menu {
        grid-column: 1 / 7;
        border-left: 0;
        border-right: 0;
        padding: 0;
	}
    
    nav.menu:before {
      	display: none;
	}

	nav.menu:after {
    	display: none;
	}
    
    nav.menu ul {
    	margin-top: calc(var(--marginX)*1);
	}
    
    .menu_button {
        pointer-events: none;
    }

    .menu_button span {
        pointer-events: none !important;
    }
    
    nav.sub_menu {
		position: absolute;
    	top: var(--marginX);
    	right: 0;
	}
    
    footer {
		font-size: var(--mediumFont);
	}
    
    footer .signature {
		grid-column: 1 / 7;
   	 	padding: 0;
	}
    
    footer .signature {
		grid-column: 1 / 7;
   	 	padding: 0 0 calc(var(--marginY)*0.5) 0;
        margin-bottom: calc(var(--marginY)*0.5);
        border-bottom: 1px solid var(--paletteBlack);
	}

	footer .subscribe {
		grid-column: 1 / 7;
    	padding: 0;
	}

}