/* @group Variables */
/*  Variables for whole stylesheets, do not touch.   */

:root {
    /* s optical corrections */
    font-variant-ligatures: common-ligatures historical-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
  	/*dimensions and spacing variables*/
    --unit: 1vmin; /* jednotka: vw, px, em											*/
    --const: 0.4; /* breakpoint konštanta mení sa pri break pointoch				*/
    --size: calc(var(--unit) * var(--const)); /* veľkosť unit prepočítaný breakpoint konštantou				*/
   
   	/*colours*/
    --dark: 0, 0, 0;
    --light: 255, 255, 255;
    --alpha: 250, 200, 54; /* Primary color */
    --beta: 255, 71, 0;     /* Secondary color */
    --gama: 110, 207, 252;   /* Inverse Primary color */
    --delta: 235, 235, 235;  /* Inverse Secondary color */

	/* Vertical grid and spacing variables */
	
	--size-2xl: calc(18 * var(--size));
	--size-xl: calc(15 * var(--size));
	--size-l: calc(12 * var(--size));
    --size-m: calc(9 * var(--size)); /* Use this for basic paragraph and body*/
    --size-s: calc(6 * var(--size));
    --size-xs: calc(3 * var(--size));

	/* 	 Grey shades from light to dark */
    --txt-xs: calc(3.7 * var(--size));
    --txt-s: calc(4.6 * var(--size));
    --txt-m: calc(5.8 * var(--size));
    --txt-l: calc(7 * var(--size));
    --txt-xl: calc(7 * var(--size));
    --txt-xxl: calc(17.3 * var(--size));
    --txt-xxxl: calc(20 * var(--size));
	
	/*   Font Vertical alignment corrections*/
    vertical-align: calc(var(--size) - 1 * var(--size));


    --main-top: var(--size-xl);
    --main-left: var(--size-2xl);
    --main-bottom: var(--size-xl);
    --main-right: var(--size-2xl);
	--body-margin: var(--main-top) var(--main-left) var(--main-bottom) var(--main-right);
	
    --logo-size: calc(4 * var(--size));
	--main-font: "Fira Code", "Menlo", "Consolas", monospace;
	/* --main-font: "Normatica Medium", Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; */
	
	transition: all 0.3s;
}

/* @end */

/* @group Typography */

body {
    background-color: rgba(var(--dark), 1);
    color: rgba(var(--light), 0.75);
	font-weight: medium;
	font-style: normal;
    min-height: 100%; /*? REMOVE ?*/
	font-family: var(--main-font);
	line-height: var(--size-m);
	font-size: var(--txt-m);
}

body::selection {
    background: var(--light); /* Gecko Browsers */
}

body::-moz-selection {
    background: var(--light); /* Gecko Browsers */
}

.wrap--body {
	margin: var(--body-margin);
}

h1, h2, h3, h4, h5, h6, p.lead, label, a.link-tab {
    margin-top: 0;
    font-weight: 600;
    font-style: normal;
	font-family: var(--main-font);
}

h1 {
    font-size: var(--txt-xl);
    line-height: var(--size-xl);
    margin-bottom: var(--size-s);
}

h2 {
	font-size: var(--txt-xl);
	line-height: var(--size-xl);
	margin: var(--size-s) 0;
}

h3 {
	font-size: var(--txt-l);
	line-height: var(--size-l);
	margin: var(--size-s) 0;
}

h4 {
	font-size: var(--txt-m);
	line-height: var(--size-m);
	margin: var(--size-s) 0;
}

p {
	line-height: var(--size-m);
	font-size: var(--txt-m);
    margin: 0 0 var(--size-s) 0;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--light);
}

a:hover {
	color: var(--lighter);
}


.wrap--web-links {
	z-index: 999;
    position: fixed;
    top: var(--main-top);
    left: auto;
    right: var(--main-right);
    bottom: auto;
    margin: 0;
    padding: 0;
}

/* 1. Landscape screen */
@media screen and (max-aspect-ratio: 3/2) {
	:root {
		--const: 0.4;
	}

    .wrap--web-links {
        position: static;
        margin: var(--size-l) 0;
    }
}

/* 2. Square screen */
@media screen and (max-aspect-ratio: 3/2.6) {
	:root {
		--const: 0.42;
	}
}

/* 3. Vertical screen (Portrait) */
@media screen and (max-aspect-ratio: 2.6/3) {
	:root {
		--const: 0.5;
	}
}

@font-face {
    font-family: "Normatica Medium";
    src: url('../fonts/Normatica-Medium.woff2') format('woff2'),
         url('../fonts/Normatica-Medium.woff') format('woff');
    font-weight: medium;
    font-style: normal;

}


@font-face {
    font-family: "Normatica Display Bold";
    src: url('../fonts/NormaticaDisplay-Bold.woff2') format('woff2'),
         url('../fonts/NormaticaDisplay-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;

}


@font-face {
    font-family: "Fira Code";
    src: url('../fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}