@font-face {
  font-family: Comfortaa; /* set name */
  src: url(font/Comfortaa-Regular.ttf); /* url of the font */
}
@font-face {
  font-family: Indie Flower; /* set name */
  src: url(font/IndieFlower-Regular.ttf); /* url of the font */
}

* {
	padding: 0;
	margin: 0;
}

/* Debug options */

/* * {
    outline: 1px solid rgba(255,0,0,0.2);
}
*/

/*div, main, aside, section, header, footer {
    outline: 2px solid rgba(0,0,255,0.3);
}*/

/* Debug options для конкретного блоку */
/*.inner {
    outline: 2px solid blue;
}*/

/* все, що йде після sans-serif - потрібне для оптимізації(гарантованого) відображення uicode символів */
body {
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji";
	}

a, p, h1, h2, h3, h4, h5, h6 {
	color: black;
}

a.additionallink {
	color: #000000/*#1059c2*/;
	font-weight: normal;
	text-decoration: none;
}

a.additionallink:hover {
	color: #4c8aed;
	font-weight: none;
	text-decoration: none;
}	

a.additionallink:visited {
	color: #1059c2;
	font-weight: normal;
	text-decoration: none;
}

a.additionallink:active {
	color: #1059c2;
	font-weight: normal;
	text-decoration: none;
}

ul.url-list {
	list-style-type: disc; 
	padding: 0px 0px 0px 30px;
}

li.url-list-li {
	margin: 0.6em 0;
}

/* Заголовку статті задаємо такий самий відступ збоків як і блоку з постом - "main p" */
h1, h2, h3, h4, h5, h6 {
	font-family: Comfortaa, sans-serif;
	padding: 0px 0px 0px 10px;
}

/*.article-title-parameters {
		text-align: center;
	}*/

.title-link {
  color: inherit;          /* Колір як у h2 */
  text-decoration: none;
  font-family: inherit;    /* Шрифт як у h2 */
  font-size: inherit;      /* Розмір як у h2 */
  font-weight: inherit;    /* Жирність як у h2 */
}
	

h1.pidzagolovok, h2.pidzagolovok, h3.pidzagolovok, h4.pidzagolovok, h5.pidzagolovok, h6.pidzagolovok {
	font-family: Arial, sans-serif;
	padding: 0px 0px 0px 10px;
}

/* ------ version 1 ------ */
h4.horizontal_liner_with_text {
  display: flex;
  align-items: flex-start;
  text-align: left;
  color: #000000;
  font-family: arial;
  padding-top: 10px;

  &:after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: #000000/*#1059c2*/;
    min-width: 20px;
    margin: auto;
  }
  &:after {
    margin-left: 20px;
  }
}
/* ------ ---------- ------ */

/* ------ version 2 ------ */
h4.horizontal_liner_with_text_github {
    overflow: hidden;
    text-align: left;
	padding-top: 10px;
	font-family: Arial, sans-serif;	
}
/*:before,*/
h4.horizontal_liner_with_text_github:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 100%;
}

/*h4.horizontal_liner_with_text_github:before {
    right: 0.5em;
    margin-left: -50%;
}*/

h4.horizontal_liner_with_text_github:after {
    left: 0.5em;
    margin-right: -50%;
}
/* ---------------------- */

/* old but cool */
.img_in_section {
			width: 100%;
            height: auto;
			padding: 10px 0px 0px 0px;
			display: block; /* Спосіб #1. Цей параметр потрібний лише для того, щоб позбавитися пустого проміжку між малюнком і section під малюнком. Подяка: https://www.tutorialrepublic.com/faq/how-to-remove-white-space-under-an-image-using-css.php */
			/* float: left;*/ /* Спосіб #2. Цей параметр потрібний лише для того, щоб позбавитися пустого проміжку між малюнком і section під малюнком. Подяка: https://www.kirupa.com/html5/removing_space_between_images_using_css.htm */
			object-fit: scale-down/* contain*/;
}

/* old but cool */
.image_description { /* Не працює. Допрацювати */
	color: #ffffff;
	
	background-color: #2e2e36;
	width: auto; /* ширина auto автоматично підганяє блок з підписом до ширини малюнка */
	border: 0px;
	margin: 0px;
	padding: 10px;
	display: block;
}

/* Nieuwe AI */
.image_block {
	width: 50%;
    margin: 10px 0;
}

.image_block img {
    width: 50%;
    margin: auto;
	height: auto;
    display: block;
    border-radius: 6px 6px 0 0;
}

.image_block figcaption {
    /*background-color: #ffffff;*//*#2e2e36;*/
    color: #000000;
	width: 50%;
    padding: 10px;
	margin: auto;
	text-align: center;
    font-size: 14px;
    border-radius: 0 0 0 0;
}
/* End Nieuwe AI */

.container {
	max-width: 1000px;
	margin: auto;
	/* border: 1px solid red;*/
	}

a.link_in_text {
	color: #047cea;
	text-decoration: none;
}

a.link_in_text:hover {
	color: #5eb0fd;
	text-decoration: underline;
}

.container ul.a{
	list-style-type: ;
	list-style-position: inside;
	}

.title-link {
  color: inherit;          /* Колір як у h2 */
  text-decoration: none;
  font-family: inherit;    /* Шрифт як у h2 */
  font-size: inherit;      /* Розмір як у h2 */
  font-weight: inherit;    /* Жирність як у h2 */
}

.title-link:hover {
	opacity: 0.6;
}

/* ------------------------------ container ------------------------- */
.header_image {	
	background: url('header.jpg') no-repeat top center;
	font-family: Arial;
	color: #8aaddb;
	text-shadow: 3px 3px 5px #aecde6;
	text-align: center;
	padding: 20px;
	/* налаштування для текствого поля. Після встановлення малюнка - це все прибрати */
}
/* ------------------------------------------------------------------ */

/* ------------------------------ header ---------------------------- */
header {
	background-color: #8aaddb;
	width: 100%;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 120px; /* Адаптивна висота хедера. Мінімум 120px. Але якщо хедер потребує більше - розтягується по висоті рівно на стільки, на скільки потрібно */
	flex-wrap: wrap;
}

/* Логотип + назва */
.logo-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    height: 100px;
}

.site-title {
    font-size: 22px;
	font-family: Comfortaa, sans-serif;
    color: #ffffff;
    font-weight: bold;
}

/* Меню */
.navigationbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
	gap: 20px;
}

/*.navigationbar li {
    margin-left: 20px;
}*/

.navigationbar a {
    display: block;
    padding: 10px;
    color: #ffffff;
    text-decoration: none;
}

.navigationbar a:hover {
    background-color: #377dbf;
    border-radius: 4px;
}


/*header nav.navigationbar ul{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}

header nav.navigationbar li{
	float: left;
}

header nav.navigationbar a{
	padding: 15px;
	display: block;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
}

header nav.navigationbar a:hover{
	background-color: #377dbf;
}*/

/* --- old header */
/*
header nav {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

header nav a {
	padding: 10px;
	color: white;
	text-decoration: none;
}

header nav a:hover{
	color: red;
}*/
/* ---       --- */

/* --------------------------------- main --------------------------- */
.inner {
    max-width: 90%;		/* максимальна ширина блоку */ /* оригінально 80% */
    margin: 0 auto;		/* центрування по горизонталі */
    padding: 0 15px;	/* відступи при вузьких екранах */
	/*outline: 2px solid blue;*/ /* Для дебагу сторінки */
}

.main-aside-container {
    display: flex;						/* робить блоки всередині — в ряд */
    justify-content: space-between;		/* розсуває main і aside по краях */
    align-items: flex-start;			/* вирівнює обидва елементи по верхньому краю */
    gap: 0px;							/* відстань між main і aside */
    margin-top: 30px;					/* відступ зверху */
}

section {
	background-color: #f5f5f5; /* background і margin формують кольорову рамку поста */
	margin: 20px 0px 20px 0px; /* вирівнювання кольорової рамки поста */ /* Оригінально лівий і правий боки мали margin 10px */
	padding: 20px;
	border-radius: 8px;
	/* border: 1px solid green; */
	text-align: justify; /* Вирівнювання тексту в пості section */
	/*width: 100%;*/
}

main {
	width: 70%; /* При використанні бокової панелі aside - ширина 70% */
	/*border: 1px solid green;*/
}

/* Відступ абзацу всередині блоку з постом */
main p {
	font-size: 1.1rem;
	line-height: 1.4rem;
	text-indent: 6%;
	padding: 5px 0px 5px 10px; /* вертикальний відступ маж параграфами 5px + 5px = 10px */
}

main p.center {
	font-size: 1.1rem;
	text-indent: 0%;
	padding: 0px 0px 0px 0px; /* вертикальний відступ маж параграфами 5px + 5px = 10px */
}

main p.right {
	font-size: 0.9rem;
	text-align: right;
	}

/* блок з постом, але БЕЗ абзацу */
main p.without_indent {
	font-size: 1.1rem;
	line-height: 1.4rem;
	text-indent: 0%;
	padding: 5px 0px 5px 10px; /* вертикальний відступ маж параграфами 5px + 5px = 10px */
}

/* блок з посиланнями після статті */
main p.without_indent_links {
	font-size: 1.1em;
	line-height: 1.4rem;
	text-indent: 0%;
	padding: 0px 0px 0px 0px; /* вертикальний відступ маж URL 0px + 0px = 0px */
}

main p.double_indent {
	font-size: 1.1rem;
	line-height: 1.4rem;
	text-indent: 12%;
	margin-left: 12%; /* відступ всього параграфа (абзацу) від заданої позиції, в даному випадку у нас відступ першого рядка 12%, потім ми відсовуємо всі інші рядки ще на 12% */
	padding: 5px 0px 5px 10px; /* вертикальний відступ маж параграфами 5px + 5px = 10px */
}

main p.dialog {
	font-size: 1.1rem;
	line-height: 1.4rem;
	text-indent: 6%;
	padding: 0px 0px 0px 10px; /* вертикальний відступ маж параграфами 10px*/
}

main p.woorden {
	font-size: 1.1rem;
	line-height: 1.4rem;
	text-indent: 4%;
	padding: 0px 0px 0px 10px; /* вертикальний відступ маж параграфами 10px*/
}

main p.external-links-indent {
	/*font-size: 1.1rem;
	line-height: 1.4rem;*/
	text-indent: 0%;
	/*padding: 5px 0px 5px 10px; */ /* вертикальний відступ маж параграфами 5px + 5px = 10px */
}

.word_description { /* Крім того до цього блоку пристосовується тінь */
	display: flex;
	margin-top:1em; /* Відступ над словом і поясненням до нього. Якщо прибрати тінь, то в принципі цей відступ можна поставити = 0 */
	margin-bottom:15px; /* Відступ під словом і поясненням до нього. Якщо прибрати тінь, то в принципі цей відступ можна поставити = 0 */
	border-radius: 8px;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;/*box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/ /*box-shadow: 0 8px 8px hsl(0deg 0% 0% / 0.075);*/
	/*background-color: #ffffff;*/
}

.word {
	display: flex;
	/*align-items: flex-start;*/ /* вирівнювання тексту в flex по верхньому краю */
	justify-content: center; /* вирівнювання будь-якого елементу в flex. Якщо тільки текст - то тоді можна не використовувати */
	text-align: center; /* Цей параметр необхідний для вирівнювання контенту по центру лише на вузьких екранах. ЧОМУ? */
	height: auto;
	width: 35%;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 10px;
	color: #851800;/*#660202;*/
	font-weight: bold;
	background-color: #f5f5f5; /*fc9a38*/
	border-radius: 8px 0px 0px 8px;
}

.description {
	display: block;
	align-items: center;
	height: auto;
	width: 65%;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 10px;
	background-color: #f5f5f5; /*fadeaf*/
	border-radius: 0px 8px 8px 0px;
}

.addition { /* Не працює. Допрацювати */
	color: #ffffff;
	background-color: #e6e6e6;
	width: auto; /* ширина auto автоматично підганяє блок з підписом до ширини малюнка */
	border: 0px;
	margin: 0px;
	padding: 10px;
	display: block;
}

.typewriter {
	font-family: 'Noto Sans Mono', monospace/*Courier New*/;
	color: #851800;/*#660202;*/
	font-weight: bold;
	font-size: 1rem;
}

.typewriter a{
	position: relative;
	color: #851800;/*#660202;*/
	text-decoration: underline;
	transition: color 0.2s ease; /* Плавний перехід при наведенні */
}

/*.typewriter a::before {
    content: "📌"; *//* Значок перед посиланням */
    /*color: #851800;
    margin-right: 0px; *//* Відступ між значком і текстом */
/*}*/

.typewriter a:hover {
    color: #e68a6b; /* Світліший відтінок #851800 */
}

.typewriter a:hover::before {
    color: #e68a6b;
}

/* примітка в правому верхньому кутку контейнера */
/*Block 1*/
.language_level {position: relative;
		}

.felement {
            position: absolute;
            top: 0;
            right: 0;
            padding: 8px;
            background-color: #851800;
			border-radius: 8px;
            color: #ffffff;
        }
/*End block 1*/
/* ------------------------------------------------------------------ */

aside {
	width: 28%;
	/* border: 1px solid orange; */
}

aside p {
	font-size: 1.1rem;
	line-height: 1.4rem;
	padding: 20px;
}

/* відступ бокової панелі */
aside ul {
	padding: 0px 20px 0px 20px;
}

aside ul li {
	font-size: 1.1rem;
	line-height: 1.6rem;
	list-style: none;
	padding: 3px 0px 3px 0px;
}
/* ----------------------------------------------------------------- */

/* -------------------------- footer ------------------------------- */
footer {
	width: 100%;
    background-color: #8aaddb;
    color: white;
    padding: 20px 0;
}

.footer-text {
	padding: 0px 10px 0px 10px;
	color: #f2f2f2;
	font-family: 'Indie Flower';
	font-size: 1.4em;
}

.footer-year {
	padding: 0px 10px 0px 10px;
	color: #f2f2f2;
	font-family: Arial;
	font-size: 1.0em;
}

.footer-content {
    display: block; /* originally - display: flex */
    justify-content: center;
    text-align: center;
}

/*
footer {
	display: flex;
	flex-direction: column;
	text-align: center; *//* justify-content: center; */
	/*align-items: center;*/
	/* display: inline-block; */
	/*background-color: #8aaddb;
	width: 100%;
	margin-top: 10px;
}
*/


footer a {
	color: #ffffff;
	padding: 0px 10px 0px 10px;
}

.footer_links {
	background-color: cyan;
	}

.footer_info {
	padding: 10px 0px 10px 0px;
	}

/* налаштування кнопок перемикання сторінки */
.align {
	display: inline-block;
	padding: 8px;
	}
/* ------------------------------------------------------------------ */

/* ------------------------ additional containers ------------------- */
.date-and-tag {
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 0px 0px 0px 10px;
	color: #5e5e5e;
	font-size: 0.8rem;
}

.date-container{
}

.tag-container-woorden {
  white-space: nowrap;     /* не дозволяє розривати тег усередині кнопки */
  background-color: #fa8264/*#336699*/ /*#cce6ff*/ /*dddddd*/;
  border: none;
  color: #ffffff /*#f2f2f2*/ /*#666666*/ /*#3F5675;*/;
  border-radius: 3px;
  padding: 0px 4px 2px 4px;
  width: auto;
  height: auto;
  text-decoration: none;
  font-size: 1em;
  /*font-family: Arial, Halvetica, sans-serif;*/
  font-weight: none;
  margin: 1px 1px;
  cursor: pointer;
}

.tag-container-uitdrk {
  white-space: nowrap;     /* не дозволяє розривати тег усередині кнопки */
  background-color: #fcb900/*#336699*/ /*#cce6ff*/ /*dddddd*/;
  border: none;
  color: #ffffff /*#f2f2f2*/ /*#666666*/ /*#3F5675;*/;
  border-radius: 3px;
  padding: 0px 4px 2px 4px;
  width: auto;
  height: auto;
  text-decoration: none;
  font-size: 1em;
  /*font-family: Arial, Halvetica, sans-serif;*/
  font-weight: none;
  margin: 1px 1px;
  cursor: pointer;
}

.tag-container-elementarka {
  white-space: nowrap;     /* не дозволяє розривати тег усередині кнопки */
  background-color: #75db5e/*#336699*/ /*#cce6ff*/ /*dddddd*/;
  border: none;
  color: #ffffff /*#f2f2f2*/ /*#666666*/ /*#3F5675;*/;
  border-radius: 3px;
  padding: 0px 4px 2px 4px;
  width: auto;
  height: auto;
  text-decoration: none;
  font-size: 1em;
  /*font-family: Arial, Halvetica, sans-serif;*/
  font-weight: none;
  margin: 1px 1px;
  cursor: pointer;
}

.tag-container-grammatica {
  white-space: nowrap;     /* не дозволяє розривати тег усередині кнопки */
  background-color: #cf2e2e/*#336699*/ /*#cce6ff*/ /*dddddd*/;
  border: none;
  color: #ffffff /*#f2f2f2*/ /*#666666*/ /*#3F5675;*/;
  border-radius: 3px;
  padding: 0px 4px 2px 4px;
  width: auto;
  height: auto;
  text-decoration: none;
  font-size: 1em;
  /*font-family: Arial, Halvetica, sans-serif;*/
  font-weight: none;
  margin: 1px 1px;
  cursor: pointer;
}

.tag-container-praktijk {
  white-space: nowrap;     /* не дозволяє розривати тег усередині кнопки */
  background-color: #0693e3/*#336699*/ /*#cce6ff*/ /*dddddd*/;
  border: none;
  color: #ffffff /*#f2f2f2*/ /*#666666*/ /*#3F5675;*/;
  border-radius: 3px;
  padding: 0px 4px 2px 4px;
  width: auto;
  height: auto;
  text-decoration: none;
  font-size: 1em;
  /*font-family: Arial, Halvetica, sans-serif;*/
  font-weight: none;
  margin: 1px 1px;
  cursor: pointer;
}

.dot-divider::before {
  content: "\00B7";    /* Сама крапка */
  color: #5e5e5e;      /* Колір (можна легко змінити) */
  margin: 0 10px;      /* Відстань зліва і справа */
  font-weight: bold;   /* Можна зробити жирнішою */
  font-size: 1em;
  display: inline-block;
}

.link-container {
	background-color: #ffffff; /* background і margin формують кольорову рамку поста */
	margin: 20px 0px 20px 0px; /* вирівнювання кольорової рамки поста */ /* Оригінально лівий і правий боки мали margin 10px */
	padding: 20px;
	border-radius: 8px;
	/* border: 1px solid green; */
	text-align: justify; /* Вирівнювання тексту в пості section */
	/*width: 100%;*/
}

.examples-frame {
  background-color: #ffffff; /*#e0f2f1;*/
  border-radius: 0px 8px 8px 0px;
  border-left: 5px solid #5e9adb;/*#69c773;*/ /* вертикальна лінія ліворуч */
  margin-top: 1em;
  margin-bottom: 1em;
  /*margin-bottom: 1.5em;*/
  padding: 20px 20px 20px 15px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

.examples-frame h3 {
  margin-bottom: 1em;
  color: #5e9adb;/*#588dc7;*//*#2a7f62;*/
}

.links-frame {
  background-color: #ffffff; /*#e0f2f1;*/
  border-radius: 0px 8px 8px 0px;
  border-left: 5px solid #5e9adb;/*#69c773;*/ /* вертикальна лінія ліворуч */
  margin-top: 1.5em;
  /*margin-bottom: 1.5em;*/
  padding: 20px 20px 20px 15px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

.links-frame h3 {
  margin-bottom: 1em;
  color: #5e9adb;/*#588dc7;*//*#2a7f62;*/
}

a.link-frame {
	text-decoration: none;
}

.dictionary-frame {
  background-color: #ffffff; /*#e0f2f1;*/
  border-radius: 0px 8px 8px 0px;
  border-left: 5px solid #5e9adb;/*#69c773;*/ /* вертикальна лінія ліворуч */
  margin-top: 1.5em;
  /*margin-bottom: 1.5em;*/
  padding: 20px 20px 20px 15px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;/*box-shadow: 0 8px 8px hsl(0deg 0% 0% / 0.075);*/
}

.dictionary-frame h3 {
  margin-bottom: 1em;
  color: #5e9adb;/*#588dc7;*//*#2a7f62;*/
}

.external-links-cards {
  background-color: #ffffff;
  border-radius: 0px;
  border-left: 5px solid #5e9adb;/*#69c773;*/ /* вертикальна лінія ліворуч */
  margin-top: 2em;
  padding: 1em 1em 1em 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.external-links-cards h3 {
  margin-bottom: 1em;
  color: #5e9adb;/*#588dc7;*//*#2a7f62;*/
}

.card {
  background-color: #f5f5f5;/*#deedff;*/ /*#e0f2f1;*/
  border-radius: 0px;
  margin-bottom: 0.2em;
  margin-left: 0.5em;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 0px 3px rgba(0,0,0,0.15);
}

.card a {
  color: #004d40;
  text-decoration: none;
  display: block;
  padding: 0em; /* 0.4em */
}

.card-content p {
  margin: 0;
  color: #000000;
  /*font-weight: 600;*/
}

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

/* --------------------------- video container ---------------------- */
.video-container {
    /* 16:9 співвідношення сторін: 9/16 = 0.5625 = 56.25% */
    position: relative;
    padding-bottom: 56.25%; /* Відповідає висоті, необхідній для співвідношення 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Відео займе всю ширину контейнера */
    height: 100%; /* Відео займе всю висоту контейнера */
}
/* ----------------------------------------------------------------- */

/* ------------------------------ quotation ------------------------- */
.bx {
  margin: 1em auto; padding: 1em 2em;
  border: solid 0px #808080;
  display: inline-block; 
  position: relative; 
  font-size: 18px;  
  max-width: 400px;
}

.quoteAuthor { text-align: right; }

.handDrawn {
  background-color: rgba(255,255,255) /*rgba(240,230,165, 0.6)*/;
  border-radius: 255px 15px 225px 15px / 12px 225px 15px 225px;
  font-family: 'Indie Flower'; 
  box-shadow: 4px 4px 12px 0 rgba(80,80,80, 0.5);
}

.handDrawn .quoteAuthor { 
  font-size: 1.2em;
  font-weight: bold;
  margin: 0.5rem; 
}

main p.center-quotation {
	font-size: 1.4rem;
	text-indent: 0%;
	padding: 0px 0px 0px 0px; /* вертикальний відступ маж параграфами 5px + 5px = 10px */
}

.original-quotation {
	font-style: italic;
	font-size: 0.9em;	
	text-align: right;
}
/* ----------------------------------------------------------------- */

/* ------------------------------- fonts --------------------------- */
.comfortaa_font{
	font-family: Comfortaa, sans-serif;
    font-weight: bold;
}

.indieflower_font{
	font-family: Indie Flower;
    font-size: 1.3em;
	font-weight: bold;
}
/* ------------------------------------------------------------------ */

/* Table v 1.0*/
/*table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}
table tr {
    background: white;
    border-bottom: 1px solid
}
table th, table td {
    padding: 10px 20px;
}
table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    left: 0;
}*/

/* Table v 2.0 */
.styled-table {
    border-collapse: collapse;
    margin: 0;
	width: 100%
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.styled-table tr {
    padding: .45em;
}

.styled-table thead tr {
	background-color: #851800/*#6e0737*/;
}

.styled-table thead th {
	color: #ffffff;
	font-size: 1em;
}

.styled-table tbody tr:nth-child(even){
	background-color: #eaeaea;
}

.styled-table th,
.styled-table td {
    font-size: 1em;
	padding: 0.6em;
	text-align: center;
}

/* End Table */

@media (max-width: 1080px) { /* Ідея, щоб бокова колонка сповзала донизу на відносно широких екранах 1080 px(ширших ніж було), відтестувати і подивитися як виглядає на екранах різної ширини */
    .header-flex {
        flex-direction: column;
        align-items: center;
        height: auto;
    }

	.navigationbar ul{
		display: flex;          /* важливо */
        justify-content: center;/* центрує кнопки */
        gap: 20px;
		width: 100%;            /* дає простір для центрування */
        padding: 0;
        margin: 10px 0 10px 0;
			}

	.main-aside-container {
        flex-direction: column;
        align-items: center;
    }

    main,
    aside {
        width: 100%;
    }
	
	.article-title-parameters {
		text-align: center;
	}
}

/*@media (max-width: 600px) {
	.header-flex {
		flex-direction: column;
		align-items: center;
		height: auto;
		padding: 10px 0;
	}
	
	.navigationbar ul{
		justify-content: center;
		margin-top: 10px;
	}
	
	.main-aside-container {
		flex-direction: column;*/
		/*border: 1px solid red;*/
/*	}
	
	main, aside {
		width: 100%;*/
		/*border: 1px solid green;*/
/*	}
}*/

/*@media (max-width: 1000px) and (min-width: 701px) {
    main {
        width: 62%;
    }

    aside {
        width: 38%;
    }
}*/