/*----------------------------------------- global ----------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

@font-face {
	font-family: 'PTRootUIWebVF';
	/*src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');*/
	src:
		url('/_fonts/PT-Root-UI_VF.woff2') format('woff2'),
		url('/_fonts/PT-Root-UI_VF.woff') format('woff');
	/*font-weight: normal;*/
	/*font-style: normal; */
	/*font-weight: 125 950;*/
	/*font-stretch: 75% 125%;*/
}

@font-face {
	font-family: 'PT_Root_UI_Medium_OT';
	/*src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');*/
	src:
		url('/_fonts/PT-Root-UI_Medium.otf') format('opentype');
	/*font-weight: normal;*/
	/*font-style: normal; */
	/*font-weight: 125 950;*/
	/*font-stretch: 75% 125%;*/
}

*{
	margin: 0;
	padding: 0;
	outline: 0;
	font-family: 'JetBrains Mono', sans-serif;
	}

/**{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: #ffffff;
	color: #0000ff;
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 20px;
	font-weight: normal;
	text-align: right;
	}*/
	
	/*table {
	border-collapse: collapse;
	border-spacing: 0;
	}*/
:focus {
	outline: 0;
	}

html:lang(ru) {quotes: '« ' ' »'}

li{
	/*list-style-type: none;*/
	list-style-position: outside;
	}
/*article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ 
	display:block;
	}*/
	
a{
	color: #000000;
	}
a:hover{
	color: #ff0000;
	}
	
h2 {
	margin-top: 0;
	padding-top: 0;
	}
	
/*----------------------------------------- body ----------------------------------------------*/
body{
	/*padding-bottom: 100px;*/
	padding-top: 100px;
	/*height: 100%;*/
	/*min-height: 100%;*/
	background-color: #fcfcfc;
	/*background-color: yellow;*/
	}
	
/*----------------------------------------- header --------------------------------------------*/
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 75px;
	z-index: 200;
	vertical-align: bottom;
	background-color: #fcfcfc;
	/*background-color: green;*/
	}
#logo{
	/*float: left;*/
	width: 200px;
	margin-left: 20px;
	margin-top: 20px;
	font-weight: bold;
	font-size: 24px;
	/*background-color: yellow;*/
	}
#social_networks{
	position: fixed;
	right: 20px;
	top: 20px;
	width: 400px;
	height: 50px;
	text-align: right;
	/*background: blue;*/
	}
.icon{
	fill: #000000;
	width: 32px;
	height: 32px;
	}
.icon:hover{
	fill: #ff0000;
	}
	
/*----------------------------------------- nav -----------------------------------------------*/	
nav{
	position: absolute;
	top: 157px;
	left: 20px;
	/*background-color: green;*/
	}
nav ul li{
	list-style-type: none;
	list-style-position: outside;
	}
	
/*----------------------------------------- main ----------------------------------------------*/	
main{
	/*margin-top: 120px;*/
	margin-left: 300px;
	margin-right: 20px;
	min-height: 700px;
	/*text-align: center;*/
	/*min-height: 80%;*/
	/*height: 500px;*/
	/*background-color: red;*/
	}
article{
	/*background-color: green;*/
	/*min-height: 80%;*/
	}
article h1{
	font-size: 24px;
	margin-bottom: 1em;
	}
article h2{
	font-size: 18px;
	margin-top: 2em;
	margin-bottom: 1em;
	/*background-color: red;*/
	padding-top: 0;
	}
article h2.first{
	margin-top: 0;
	}
article h3{
	font-size: 14px;
	margin-top: 1em;
	margin-bottom: 0.5em;
	}
article ul{
	margin-bottom: 1em;
	/*background-color: green;*/
	}
th{
	text-align: left;
	height: 2em;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
#slogan{
	float: left;
	margin-top: 36px;
	margin-left: 6px;
	font-weight: normal;
	font-size: 18px;
	text-decoration: none;
	color: #181818;
	}
/*#contacts{
	float: right;
	margin-top: 36px;
	margin-right: 30px;
	font-weight: normal;
	font-size: 18px;
	}*/

	
	
	


.number{
	width: 50px;
	/*background-color: red;*/
	}
.uni{
	width: 100px;
	/*background-color: red;*/
	}
.html{
	width: 100px;
	/*background-color: red;*/
	}
.mnemonic{
	width: 100px;
	/*background-color: red;*/
	}
.width{
	width: 160px;
	/*background-color: green;*/
	}
.friendly_name{
	width: 300px;
	/*background-color: orange;*/
	}
.case_varsion{
	width: 300px;
	/*background-color: orange;*/
	}
.description{
	width: 400px;
	/*background-color: blue;*/
	}

	
footer{
	/*background: red;*/
	height: 50px;
	width: 100%;
	padding: 0;
	margin: 0;
	margin-top: 100px;
	}
#contacts{
	/*float: left;*/
	/*margin-top: 4em;*/
	padding-left: 20px;
	/*background-color: blue;*/
	position: absolute;
	left: 0;
	}
#contacts p{
	font-weight: normal;
	font-size: 14px;
	color: #181818;
	}
#copyright{
	/*float: right;*/
	/*margin-top: 4em;*/
	padding-right: 20px;
	/*background-color: orange;*/
	position: absolute;
	right: 0;
	}
#copyright p{
	font-weight: normal;
	font-size: 14px;
	color: #181818;
	}
#grani{
	width: 40px;
	height: 109px;
	position: absolute;
	right: 0;
	top: 450px;
	/*background: red;*/
	}
#grani_logo{
	fill: #181818;
	}
#grani_logo:hover{
	fill: #363636;
	}
	

	
.work{
	position: relative;
	display: inline-block;
	width: 400px;
	height: 300px;
	margin: 10px;
	background-color: #f7f5f3;
	}
.work section{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 0;
	}
.work section:hover{
	opacity: 1;
	background-color: #f1efee;
	cursor: crosshair;
	}
.work section h3{
	margin-top: 15px;
	margin-left: 20px;
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	}
.work section p{
	margin-top: 20px;
	margin-left: 20px;
	text-align: left;
	font-weight: normal;
	font-size: 14px;
	}
.work img{
	top: 0;
	left: 0;
	z-index: 1;
	}

	
/*--------------------------------------------------------------------------------*/


.variable_fonts_test * {
    font-family: 'PTRootUIWebVF';
	font-size: 72px;
	font-variation-settings: 'wght' var(--text-axis);
	
  }
  
#tester {
    font-family: 'PTRootUIWebVF';
/*	font-size: 72px;*/
	/*font-variation-settings: 'wght' var(--text-axis);*/
  }

.light{
	
	font-family: 'PTRootUIWebVF';
	font-size: 36px;
	/*font-weight: 100;*/
	font-variation-settings: 'wght' 1;
 }
.regular{
	font-family: 'PTRootUIWebVF';
	font-size: 36px;
	/*font-weight: 400;*/
	font-variation-settings: 'wght' 400;
 }
.medium{
	font-family: 'PTRootUIWebVF';
	font-size: 36px;
	/*font-weight: 700;*/
	font-variation-settings: 'wght' 500;
 }
.bold{
	font-family: 'PTRootUIWebVF';
	font-size: 36px;
	/*font-weight: 1000;*/
	font-variation-settings: 'wght' 1000;
 }
.hidden{
	display: none;
}
/*#box {
  height: 20px;
  width:20px;
  background: green;
}*/

.root_medium_ot{
	font-family: 'PT_Root_UI_Medium_OT';
	font-size: 72px;
}