*, *::before, *::after {box-sizing: border-box;}

html {
  scroll-behavior: var(--scroll-behavior);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
	direction: var(--direction);
	background-color:var(--background-color);
	margin: 0;
	padding: 0;
	color: var(--color);
	display: flex;  
	flex-direction: column; 
	font-weight: var(--font-weight); 
	font-size: var(--font-size);
	
}
* [dir="rtl"]{
    direction:rtl;
    text-align:right;
	display: flex;
	width: 100% !important;
}

* [dir="ltr"]{
    direction:ltr;
    text-align:left;
	display: flex;
	width: 100%;
}
div::-webkit-scrollbar, section::-webkit-scrollbar, article::-webkit-scrollbar {
  display: none;
}
[hidden] {
    display: none !important;
}
html.photo-dialog-lock,
body.photo-dialog-lock,
html.popup-dialog-lock,
body.popup-dialog-lock {
    overflow: hidden !important;
    touch-action: none;
}

body.photo-dialog-lock, body.popup-dialog-lock {
    position: fixed;
    width: 100%;
}

::-webkit-input-placeholder ,:-ms-input-placeholder, ::placeholder {color: var(--placeholder-color);}

a:link {text-decoration: none;color:var(--a-link);}
a:visited {text-decoration: none;color:var(--a-visited);}
a:hover {text-decoration: none;color:var(--a-hover);}
a:focus {text-decoration: none;color:var(--a-focus);}
a:active {text-decoration: none;color:var(--a-active);}
a {text-decoration: none;color:var(--a-link);}

input[type="radio"], input[type="checkbox"] {
	accent-color: var(--accent-color);
}

abbr, address {
    text-decoration: none;
    font-style: normal;
}
img {
    display: block;
    max-width: 100%;
}

h1 {font-size: var(--h1); margin: 0; padding: 0;}
h2 {font-size: var(--h2); margin: 0; padding: 0;}
h3 {font-size: var(--h3); margin: 0; padding: 0;}

button {
    cursor: pointer;
    border: 0;
    background-color: transparent;
    font-size: inherit;
}
h1, .sub_title {
  position: relative;
  padding-bottom: 10px;
}

h1::after, .sub_title::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 4px;
  background: var(--title-line-color);
  border-radius: 2px;
}

.srOnly { /* ONLY for screenr readers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.Fieldset {
  border: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.Fieldset.row {
  flex-direction: row !important;
  gap: 10px;
}
.Fieldset legend {
  margin-bottom: 10px; 
  font-size: calc(var(--font-size) + 0.2rem);
  border-bottom: 1px var(--main-menu-border) dotted;
}

.popup-dialog__overlay, .photo-dialog__overlay {
    position: absolute;
    inset: 0;

    background: rgba(12, 14, 20, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    cursor: pointer;
}

.blink {
  animation: softBlink 2s ease-in-out infinite;
}

.info, .warning, .error, .quote, .success, .tip, .error2, .adult-warning, .neutral {
	position: relative;
	font-weight: var(--font-weight);
	padding-block: 16px;
	padding-inline: 20px;
	padding-inline-start: 58px;
	border-radius: 18px;
}
.info::before, .warning::before, .error::before, .quote::before, .success::before, .tip::before, .error2::before, .adult-warning::before {
	position: absolute;
	inset-inline-start: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.neutral {
	background:#f6f6f7;
	border:1px solid #e4e4e6;
	color:#8a1f35;
	

	
}
.error2 {
	background:#fff0f3;
	border:1px solid rgba(255,70,105,.28);
	color:#8a1f35;
	box-shadow:0 10px 30px rgba(255,70,105,.10);

	&::before {
		content:"×";
		background:linear-gradient(135deg,#ff7a95,#ff3d5f);
		color:#fff;
		font-weight:800;
	}
}
.tip {
	background:#fff9ec;
    border-color:rgba(255,185,0,.28);
    color:#866100;
    box-shadow:0 10px 30px rgba(255,185,0,.10);
	&::before {
		content:"★";
        background:linear-gradient(135deg,#ffd14d,#ffb400);
		color: #fff;
		font-weight: 700;
	}
}
.success {
	background:#eefbf3;
    border-color:rgba(31,180,92,.25);
    color:#1f6b43;
    box-shadow:0 10px 30px rgba(31,180,92,.10);
	&::before {
		content:"✓";
		color: #fff;
		font-weight: 700;
        background:linear-gradient(135deg,#47d67c,#1db954);
	}
}
.info {
	background: #eef7ff;
	border: 1px solid rgba(70, 140, 255, .28);
	color: #1f4f7a;
	box-shadow: 0 10px 30px rgba(70, 140, 255, .10);
	&::before {
		background: linear-gradient(135deg, #5ea8ff, #3d7dff);
		color: #fff;
		content: "i";
		font-weight: 700;
		font-style: normal;
	}
}
.warning {
	background: #fff8ec;
	border: 1px solid rgba(255, 179, 0, .35);
	color: #7a4d00;
	box-shadow: 0 10px 30px rgba(255, 170, 0, .10);
	&::before {
		background: linear-gradient(135deg, #ffb300, #ff8400);
		color: #fff;
		content: "!";
		font-size: 1.2rem;
		font-weight: 900;
	}
}
.error {
	background: #fff1f3;
	border: 1px solid rgba(255, 77, 109, .35);
	color: #8a1028;
	box-shadow: 0 10px 30px rgba(255, 77, 109, .10);
	&::before {
		background: linear-gradient(135deg, #ff4d6d, #d60036);
		color: #fff;
		content: "!";
		font-size: 1.2rem;
		font-weight: 900;
	}
}

.adult-warning {
	background:#fff4f0;
	border:1px solid rgba(255,120,70,.28);
	color:#8a4a1f;
	box-shadow:0 10px 30px rgba(255,120,70,.10);

	&::before {
		content:"18+";
		background:linear-gradient(135deg,#ff9b63,#ff6b3d);
		color:#fff;
		font-size:.7rem;
		font-weight:800;
		letter-spacing:.03em;
	}
}
.quote {
	background: #f6f4ff;
	border: 1px solid rgba(120, 90, 255, .26);
	color: #3f347a;
	box-shadow: 0 10px 30px rgba(120, 90, 255, .10);
	&::before {
		content: "";
		position: absolute;
		background: linear-gradient(135deg, #9b8cff, #6f5cff);
	}
	&::after {
		content: "";
		position: absolute;
		inset-inline-start: 25px;
		top: 50%;
		transform: translateY(-50%);
		width: 14px;
		height: 12px;
		background:
			linear-gradient(#fff, #fff) 0 2px / 14px 2px no-repeat,
			linear-gradient(#fff, #fff) 0 7px / 10px 2px no-repeat,
			linear-gradient(#fff, #fff) 0 12px / 6px 2px no-repeat;
	}
}

/*header*/
header {
	width: 100%;
	display: flex;
	flex-direction: row;
	position: fixed;
	z-index: 100;
	justify-content: center;
	align-items: center;
	background-color: var(--header-bg);
	height: var(--header-height);
	-webkit-box-shadow: 0 15px 40px rgba(0,0,0,0.08); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); 
	backdrop-filter: blur(16px);
}
header .header {
	width: 96%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	
}
header .header button {
	font-size: 40px;
	
}

header .header section {
	
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	
}
header .header #logo {
	display: flex;
	max-height: calc(var(--header-height) - 30px);
	width: auto;
	margin: 0;
	padding: 0;
}
header .header #logo img {
	display: flex;
	width: auto;
	height: calc(var(--header-height) - 30px);
}

#main_menu {
	display: none;
}
#main_menu.open {
	display: flex;
	position: fixed;
	top: calc(var(--header-height) + 5px);
	background: var(--main-menu-bg-gradient), var(--main-menu-bg);
	border: 1px var(--main-menu-border) solid;
	min-height: 50vh;
	max-height: calc(100vh - var(--header-height) - 80px);
	border-radius: 10px;
	padding: 20px;
	padding-bottom: 60px;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	-webkit-box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.10); 
    box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.10); 
	overflow-x: hidden;
	overflow-y: auto;

	&:-webkit-scrollbar {
     display: none;
    }
}

#main_menu.open .menu_section {
	display: flex;
	flex-direction: column;
	
	min-width: 270px;
	max-width: 320px;
}
#main_menu.open .menu_section nav {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 10px;
}
#main_menu.open .menu_section .sub_title {
	font-weight: 600;
	font-size: calc(var(--font-size) + 0.1rem);
	display: flex;
	gap:5px;
	align-items: center;
	color: var(--menu-section-header-color);
}
#main_menu.open .menu_section a {
	font-weight: 500;
	display: flex;
	gap:5px;
	align-items: center;
	padding-bottom: 5px;
    border-bottom: 1px var(--main-menu-border) dotted;
	color: var(--menu-section-link-color);

	&:hover {
      color: var(--menu-section-link-color-hover);
	}
	&:focus {
      color: var(--menu-section-link-color-hover);
	}
}
#main_menu.open .menu_section .material-symbols-outlined {
	font-weight: 600;
	font-size: calc(var(--font-size) + 0.2rem);
}
.material-symbols-outlined.big-material {
	font-size: calc(var(--font-size) + 1.9rem);
	font-weight: 900;
}
.material-symbols-outlined.big-material.red, .material-symbols-outlined.red {
	color: #d60036;
}
.material-symbols-outlined.big-material.green, .material-symbols-outlined.green {
	color: #1f6b43;
}

/*main screen*/
.full_screen {
    width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;	
}
.spacer {
  width: 100%;
  display: flex;
  height: calc(var(--header-height) - 5px);	
}
.content {
	width: 90%;
	display: flex;
	flex-direction: column;
}
.page_content {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap:20px;
	
}
.static {
  margin-top: -180px;
}
.static.logged {
  margin-top: 0;
}
.static2 {
  margin-top: -260px;
}
.static2.logged {
  margin-top: 0;
}
.page_content article,  .page_content section.article_list {
    display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1050px;
}
.page_content section.side {
    display: flex;
	flex-direction: column;
	max-width: 200px;
}
.page_content article h1 {
    margin-bottom: 15px;
}
.page_content article figure {
  padding: 0 !important;
  margin: 0;
  margin-bottom: 15px;
  width: inherit;
  overflow: hidden;
  border-radius: 12px;
}
.page_content aside {
	display: flex;
	flex-direction: column;
	width: 300px;
}
.profile_content {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/*buttons*/
a.button, .button {
	display: inline-flex;
    width: fit-content;
	padding: 10px;
	padding-left: 14px;
	padding-right: 14px;
	border-radius: 8px;
	border: 1px var(--button-border) solid;
	background: var(--button-bg);
	color: var(--button-color);
	transition: 120ms;
	font-weight: 600;
	position: relative;
	

	&:hover {
      background: var(--button-bg-hover);
	  color: var(--button-color-hover);
	}
	&:focus {
      background: var(--button-bg-hover);
	  color: var(--button-color-hover);
	  
	}
	&:focus-visible {
     outline: 3px solid var(--input-focus-shadow);
     outline-offset: 3px;
    }
	&:disabled {
      background: #e1e1e1;
	  color: var(--button-color);
	  cursor: not-allowed;
	}
}

a.button2, .button2 {
	display: inline-flex;
    width: fit-content;
	padding: 10px;
	border-radius: 8px;
	padding-left: 14px;
	padding-right: 14px;
	border: 1px var(--button2-border) solid;
	background: var(--button2-bg);
	color: var(--button2-color);
	transition: 120ms;
	font-weight: 600;
	position: relative;
	

	&:hover {
      background: var(--button2-bg-hover);
	  color: var(--button2-color-hover);
	}
	&:focus {
      background: var(--button2-bg-hover);
	  color: var(--button2-color-hover);
	}
	&:focus-visible {
     outline: 3px solid var(--input-focus-shadow);
     outline-offset: 3px;
    }
	&:disabled {
      background: #e1e1e1;
	  color: var(--button-color);
	  cursor: not-allowed;
	}
}
a.button3, .button3 {
	display: flex;
	width: 45px !important;
	height: 45px !important;
	border-radius: 100%;
	margin: 8px;
	
	border: 1px var(--button3-border) solid;
	background: var(--button3-bg);
	color: var(--button3-color);
	transition: 120ms;
	font-weight: 600;
	position: relative;
	font-size: 36px;
	align-items: center;
	align-content: center;
	justify-content: center;
	/*margin: -20px; */
	padding-top: 4px;
	overflow: hidden;

	&:hover {
      background: var(--button3-bg-hover);
	  color: var(--button3-color-hover);
	}
	&:focus {
      background: var(--button3-bg-hover);
	  color: var(--button3-color-hover);
	}
	&:focus-visible {
     outline: 3px solid var(--input-focus-shadow);
     outline-offset: 3px;
    }
	&:disabled {
	  background: #e1e1e1;
	  color: #cccccc;
	  cursor: none;
	  opacity: 0;
	  pointer-events: none;
	  width: 0px;
	  height: 0px;
	  display: none;
	}
}
a.button3x, .button3x {
	display: flex;
	width: 45px;
	height: 45px;
	border-radius: 100%;
	
	border: 1px var(--button3-border) solid;
	background: var(--button3-bg);
	color: var(--button3-color);
	transition: 120ms;
	font-weight: 600;
	
	font-size: 36px;
	align-items: center;
	align-content: center;
	justify-content: center;
	

	&:hover {
      background: var(--button3-bg-hover);
	  color: var(--button3-color-hover);
	}
	&:focus {
      background: var(--button3-bg-hover);
	  color: var(--button3-color-hover);
	}
	&:focus-visible {
     outline: 3px solid var(--input-focus-shadow);
     outline-offset: 3px;
    }
	&:disabled {
	  background: #e1e1e1;
	  color: #cccccc;
	  cursor: not-allowed;
	}
}

a.button4, .button4 {
	display: inline-flex;
    width: fit-content;
	padding: 10px;
	padding-left: 4px;
	padding-right: 4px;
	color: var(--button4-color);
	transition: 120ms;
	font-weight: 600;
	position: relative;
	

	&:hover {
      color: var(--button4-color-hover);
	}
	&:focus {
      
	  color: var(--button4-color-hover);
	}
	&:focus-visible {
     outline: 3px solid var(--input-focus-shadow);
     outline-offset: 3px;
    }
}

#chat_button  .material-symbols-outlined {
	font-size: 28px;
}

.reg_btn, .login_btn {
	display: flex;
	align-items: center;
	gap: 10px;
}

.reg_btn .material-symbols-outlined, .login_btn .material-symbols-outlined {
	font-size: 25px;
}
.share {
	font-size: 30px !important;
	font-weight: 600;
}
.loading.show, .result.show {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	
}
.result.show.multicolumn {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.loading.show  img {
	display: block;
	width: 100px;
	height: 100px;
}
.loading.hide, .hide, .result.hide {
	display: none;
}
.no-margin {
	margin-top: -36px;
}
.result1 {
	color: darkred;
	justify-content: flex-start;
	display: flex;
	margin-top: 5px;
	width: 100%;
}


footer {
  background: var(--footer-bg);	
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: flex-end;
}
footer .image {
  width: 60%;
}
footer .text {
  width: 40%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;	
}
footer .text section {
  width: 100%;
  border-top: 3px var(--footer-border-color) dotted;	
}
footer .text section a {
  color: var(--footer-static-link-color);
  &:hover {
	color: var(--footer-static-link-color-hover);
  }
  &:focus {
	color: var(--footer-static-link-color-hover);
  }
  &:focus-visible {
     outline: 3px solid var(--input-focus-shadow);
     outline-offset: 3px;
  }
}
footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 24px 0;
  list-style: none;
}
footer ul li {
  margin: 0;
  padding: 0;
}

footer ul li a, footer ul li button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--footer-link-bg);
  border: var(--footer-link-border);
  color: var(--footer-link-color) !important;
  font-weight: 500;
  letter-spacing: 0.2px;
  font-size: calc(var(--font-size) - 0.1rem);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease,
    color 0.2s ease;
  backdrop-filter: blur(6px);

  &:hover {
	background: var(--footer-link-bg-hover);
    border-color: var(--footer-link-border-hover);
    color: var(--footer-link-color-hover);
    transform: translateY(-1px);
  }
  &:focus {
	background: var(--footer-link-bg-hover);
    border-color: var(--footer-link-border-hover);
    color: var(--footer-link-color-hover);
    transform: translateY(-1px);
  }
  &:focus-visible {
     outline: 3px solid var(--input-focus-shadow);
     outline-offset: 3px;
  }
  &:active {
    transform: translateY(0);
  }
}

.mobile_only {
	display: none;
 }

.button_group {
	display: flex;
	flex-direction: row;
	gap: 10px;
}


@media screen and (min-width: 1px) and (max-width: 1280px) { /*Mobile devices*/
.button_group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
  footer {
  
  flex-direction: column-reverse;
 }
 footer .image {
  width: 100%;
 }
 footer .text {
  width: 100%;
  
 }
 .page_content aside, .page_content section.side {
	display: none;
 }
 .no_mobile {
	display: none !important;
 }
 .mobile_only {
	display: flex;
 }

 #main_menu.open {
	flex-direction: column;
	align-items: flex-start;
	height: calc(100dvh - 90px);
	

	&:-webkit-scrollbar {
     display: none;
    }
}
}
@media (prefers-reduced-motion: reduce) {
   *, *:before, *:after {
        scroll-behavior: auto !important;
        transition: none !important;
    }

  .blink {
    animation: none;
  }
  .popup-dialog__overlay,
    .popup-dialog__box {
        animation: none;
   }

   .scroll-arrow {
        transition: none;
    }
}