/* CSS Document */

:root {
	--line-height: 1.3;
	--font-scale: 1.2;
	--fontsize-base:clamp(15px, calc(15px + ((100vw - 375px) / 213)), 18px);
	--fontsize-minus-1:calc(var(--fontsize-base) / var(--font-scale));
	--fontsize-plus-1:calc(var(--fontsize-base) * var(--font-scale));
	--fontsize-plus-2:calc(var(--fontsize-plus-1) * var(--font-scale));
	--fontsize-plus-3:calc(var(--fontsize-plus-2) * var(--font-scale));
	--fontsize-plus-4:calc(var(--fontsize-plus-3) * var(--font-scale));
	--fontsize-plus-5:calc(var(--fontsize-plus-4) * var(--font-scale));
	--fontsize-plus-6:calc(var(--fontsize-plus-5) * var(--font-scale))
}

/* Font */ 
@font-face {
	font-family: TextRegular; 
  	src: url( "res/font/Text-Regular.woff2" ) format("woff2"); 
	font-display: block;
}

@font-face {
	font-family: TextBold; 
  	src: url( "res/font/Text-Bold.woff2" ) format("woff2"); 
	font-display: block;
}

@font-face {
	font-family: Regular; 
  	src: url( "res/font/Regular.woff2" ) format("woff2"); 
	font-display: block;
}

@font-face {
	font-family: Semibold; 
  	src: url( "res/font/Basic-SemiBold.woff2" ) format("woff2"); 
	font-display: block;
}

body {
	font-family: TextRegular;	
	line-height: 1.5;
	overflow: auto;	
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

h1 {
	font-family: Semibold;		
	font-size: var( --fontsize-plus-4, 10px );
	color: #3F0000;
	letter-spacing:normal;
	line-height:var(--line-height);
  	margin-bottom: 7px;
	margin-left: 20px;
	margin-right: 20px;
  	word-wrap:break-word;			
}

h2 {
	font-family: Semibold;		
	font-size: var( --fontsize-plus-2, 10px );
	color: #3F0000;
	letter-spacing:normal;
	line-height:var(--line-height);
  	margin-bottom: 7px;
	margin-left: 20px;
	margin-right: 20px;
  	word-wrap:break-word;			
}

h3 {
	font-family: Semibold;		
	font-size: var( --fontsize-plus-1, 10px );
	color: #3F0000;
	letter-spacing:normal;
	line-height:var(--line-height);
  	margin-bottom: 7px;
	margin-left: 20px;
	margin-right: 20px;
  	word-wrap:break-word;			
}

h4 {
	font-family: Semibold;		
	font-size: var( --fontsize-base, 10px );
	color: #3F0000;
	letter-spacing:normal;
	line-height:var(--line-height);
  	margin-bottom: 7px;
	margin-left: 20px;
	margin-right: 20px;
  	word-wrap:break-word;			
}


p {
	font-size: 13pt;
    font-family:  TextRegular;
	margin-left: 20px;
	margin-right: 20px;
	word-wrap:break-word;			
}

q, cite {	
	quotes: "„" "”";	
	font-style: italic;	
}

/* for div that holds all */
div#root {
  	background-color: #3F0000;
	padding-top:  0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;		
}

/* for div that holds content */
div#root {
  	background-color: #3F0000;
	padding-top:  0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;	
}


/* for header div */
div#header {
	display: flex; 
	justify-content: space-between;                     
	min-height: 90px; 
	max-height: 200px;
	max-width: 1600px;
	min-width: 1000px;   
	position: relative!important;
	position: fixed;
	background-color: #fdccca;	
	margin:0 auto;	
}

div#avatar {
	display: flex;	
	align-content: center; 
	position: relative!important;	
 	min-width: 180px;
	align-items: center;
	justify-content: center;
}

span#bce8c62a {
	display: flex;
	align-content: center;	
	opacity: 1;	
}

span#bce8c62a:hover {	
	opacity: 0.7 !important; 
	cursor: pointer;
	
}

img#f5147d29 {
		width: 90px;		
		height: 90px;	
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
		border-bottom-left-radius: 50%;														

		border-top-color: white;
		border-bottom-color: white;														
		border-left-color: white;																	border-right-color: white;

		border: white solid 5px;
}																			  
																			  
						

.header:after {
	background-color: transparent!important;
}

/* div holiding logo on header */
.logo {
	width: 44px;
	height: 25px;
}

div#main {
	min-width:1010px;
	max-width:1600px;	
	position: relative!important;
	background-color: #F0F6FA;
	padding-bottom:30px;
	margin:0 auto;	
}	
	

/* for section - copyright line in footer div */
.copyrightline {
    display:flex;
    flex-wrap: wrap;
    align-items: baseline;
    white-space: nowrap;
    line-height: 1.4;
    margin:0 5px;
}

	
/* for div for author details under document title */
.author {
	margin-top: 15px;
}

/* for anchor pointing to author description */
.link-author {
	margin-top: 15px;
	color: #081336;		
	fill: #081336;		
  	display: inline-block;
	font-size: var( --fontsize-minus-1 );	
	font-family: TextBold;	
	font-weight: 600;
	line-height: var(--line-height);	
  	letter-spacing: normal;
	text-decoration: none;
  	cursor: pointer;	
}

.link-author:active {
	color: #081336;
	fill: #081336;
}

.link-author:hover {
	color: #3F0000;
	text-decoration: underline;
}

.link-author:focus {
	outline: none;
}

/* span holding time of publication - under author */
.time-area {
	margin-top: 5px;
	display: inline-block;
	white-space: nowrap;
	color: #5C718A;
	font-size: var( --fontsize-minus-1 );
	font-weight: 400;
	line-height: var( --line-height );
  	letter-spacing: normal;
}

.time {
	display: inline-block;
	white-space: nowrap;
	color: #5C718A;
	font-size: var( --fontsize-minus-1 );
	margin-left: 20px;
	word-wrap:break-word;			
}

blockquote > p:last-child::before {
    content: "— ";
}

span#sss:hover {
	color: aqua;
}


div#copyright {
		
}

figure {
	margin-left: 20px;
	margin-right: 20px;
}

figcaption {
	
	width:100%;
	padding-top: 15px;
	padding-bottom: 10px;
  	background-color: rgb(230,236,240);
	line-height: 16.5px;
	
}

picture {
	box-sizing: border-box
}

picture img  {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;		
}