@import 'vars.css';

@font-face {
    font-family: 'GOST type A';
    src: url('/assets/css/fonts/GOST-type-A.woff2') format('woff2'),
    	 url('/assets/css/fonts/GOST-type-A.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GOST type B';
    src: url('/assets/css/fonts/GOST-type-B.woff2') format('woff2'),
         url('/assets/css/fonts/GOST-type-B.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*{margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'GOST type B', 'GOST type A', monospace, sans-serif;
	background-color: var(--grey-bg);
	font-size: 13px;
}

img{width: 300px; height: 300px; margin-bottom: 100px;}

body, .wrapper{width: 100%; height: 100%;}
.wrapper{position: absolute;}

.ramka, .ramka line, nav, p {display: flex;}
.ramka nav, .ramka line {flex-direction: row;}
.ramka column {flex-direction: column;}
.ramka column, .ramka line, .ramka p {width: 100%;}
.ramka p, .ramka{justify-content: center; align-items: center;}

.ramka{
	position: fixed;
	top: 20px; right: 20px;
	bottom: 20px; left: 100px;
	border: 2px solid var(--black);
	background-color: var(--white);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.ramka nav {
    width: 600px;
	position: absolute;
    bottom: 0; right: 0;
}
.ramka line {height: 25px;}
.ramka line:last-child{height: 27px;}
.ramka line.double{height: 50px; font-size: 28px;}

.ramka p {height: 100%; font-style: italic;}
.ramka p, .ramka div {
	border: 2px solid var(--black);
	border-bottom: initial;
	border-right: initial;
}

.ramka column:first-child line p:nth-child(1){flex: 25;}
.ramka column:first-child line p:nth-child(2){flex: 30;}
.ramka column:first-child line p:nth-child(3){flex: 15;}

.ramka column:last-child line p:nth-child(1){flex: 35;}
.ramka column:last-child line p:nth-child(2){flex: 20;}
.ramka column:last-child line p:nth-child(3){flex: 20;}