@font-face {font-family: OpenSansReg; src: url(/fonts/woff/OpenSans/OpenSans-Regular.woff2) format('woff2');; font-display: swap;}
@font-face {font-family: OpenSansBold; src: url(/fonts/woff/OpenSans/OpenSans-Bold.woff2) format('woff2');; font-display: swap;}
@font-face {font-family: OpenSansSemiBold; src: url(/fonts/woff/OpenSans/OpenSans-Semibold.woff2) format('woff2');; font-display: swap;}
:root{	
	--padding-content:3vw 2vw;
	--w-boxfoto-article-768:120px;
	--w-boxfoto-article:160px;
	--height-baner:75svh;
	--footer-bg-color:#9f9f9f;
	--footer-font-color:#333;
}
*{user-select: none;}

body{font-family:OpenSansReg, -apple-system, system-ui, sans-serif;background-color: var(--footer-bg-color);}	
body.bg_mini::before{background:var(--bg_min);background-repeat: no-repeat; background-position: center;}
body.bg_max::before{background:var(--bg_max);background-repeat: no-repeat; background-position: center;}		
body::before{		
	content: '';position:fixed;display:block;top:0; left:0;height:var(--height-baner);width:100%;
	filter:brightness(0.6) contrast(0.9); transition: filter .5s;z-index:-1;background-size: cover !important;
}
h3{font-family: 'OpenSansSemiBold';font-weight: unset;}	
nav{position: fixed;z-index: 1;width: -webkit-fill-available;padding:0.5em 1em;background-color:#0000002b;transition:background-color .5s; backdrop-filter: blur(2px);animation: bg-progress auto linear; animation-timeline: scroll();animation-range: 20px 60vh;animation-fill-mode: both;color:#fff;anchor-name:--header;}
@keyframes bg-progress {
	from { background-color: #0000002b;} to { background-color: #000000d1;}
}
body[data-load='loading']::before{filter:brightness(0.7) contrast(0.9) blur:(4px);}
.hello{
	flex-grow: 1;align-content: center;width: min(100%, 1200px);padding:0 1em;color:#fff;font-size: clamp(1rem, 2vw, 1.6rem);border-radius:6px;p{text-wrap-style: pretty;font-size: 1.1em;text-align:justify;text-shadow: 0 0 1px #000;}
}
h1{font-family:OpenSansSemiBold;text-align: center;text-wrap-style: balance;font-size:2em;}
header{display: flex;position: relative;flex-direction: column;align-items: center;height:var(--height-baner);color:#fff;}
.weather{font-size: 1.6rem;color: goldenrod;}
main{
	width: min(1200px, 100%);margin:0 auto;
	h3{text-align:center;font-size: 1.4em;margin-bottom: 0.5em;}
	section{padding: 3vw 2vw;position:relative;background-color: #fff;width: 100%;}
	section:not(:first-child){margin-top: 1em;}	
}
.box_cat{	
	a{display:block;width: clamp(200px, 400px, 100%);transition:background-color .2s;align-self: stretch; &:hover{background-color: #ededed;}}
	figure{text-align: center;display: flex;overflow:hidden;border-radius:5px;}
	figcaption{font-size: small;text-align: justify;padding: 0 1em;color:#333;align-self: center;}
	img{border-radius:5px;transition:transform .6s;flex-shrink: 0;overflow: hidden;height: auto;object-fit: cover;}
	img:hover{transform:scale(1.1);}
}
.scrolled{background-color:#004985d4;}
.popular_box{	
	.topic{
		width: 160px;text-align: center;position:relative;
		button{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}		
	}
	figcaption{text-align: center;text-wrap-style: balance;font-size: small;}	
	img{object-fit:cover;border-radius: 35px;corner-shape: squircle;box-shadow: 2px 2px 10px 1px #afafaf;}
}
#box_last_view{.gallerey{display:flex;width: 100%; overflow-x: auto; gap:4px;margin-top:1em;}}
.article_lastv{
	display:block;flex-shrink:0; width:clamp(72px, calc(100% / 4 - 4px), 128px);background-color:dimgrey;font-size:small;border-radius: 4px;
	figure{text-align:center;}
	figcaption{
		display: -webkit-box;   -webkit-box-orient: vertical;-webkit-line-clamp: 4;text-overflow: ellipsis; overflow: hidden;text-align:center;padding: 2px;overflow-wrap: break-word;color:lightgray;
	}
	img{width: calc(100% - 4px);object-fit: cover;height: auto;aspect-ratio: 1 / 1;border-radius: 4px 4px 0 0;}	
}
.shape {
	width: 100%;overflow: hidden;transform: rotate(180deg); fill: #FFF;
	svg {position: relative;display: block;width: 100%;height: clamp(35px, 5vw, 70px);}
}
.shape.bottom { transform: rotate(0deg);}
[popover]{
	margin:auto;border:none;border-radius: 10px;background-color: transparent;transition: all .4s;transition-behavior: allow-discrete;opacity:0; transform: scale(0);
	.but_close{position: absolute;top: 5px;right: 5px;background-color: transparent;backdrop-filter: contrast(0.5) brightness(1.5);color: red;border: 1px solid red;border-radius: 50%;padding: 0 10px 3px 10px;font-size: 30px;z-index: 1;}
}
[popover]:popover-open{opacity:1;transform: scale(1);	@starting-style {opacity: 0; transform: scale(0.5);}}
[popover]::backdrop{background:rgba(0,0,0,0.5);}
#ditails_article{	
	figure{width: clamp(300px, 90vw, 512px);border-radius: 8px 8px 0 0;position:relative;font-size:0;}
	h4{text-align: center;font-size: medium;font-family:OpenSansBold;}
	img{width: 100%; object-fit: contain; height: auto;border-radius: 8px 8px 0 0;}
	figcaption{font-size: 1rem;text-align: justify;background-color:#fff;}
}
.but_link{display:block;text-align: center; border: 1px solid #cfcfcf; border-radius: 8px;box-shadow: 0 0 14px #cfcfcf; padding: 0.3em;}
.afisha{
	/*position: absolute;position-anchor: --header;top:anchor(bottom);*/
	background-color: gold; backdrop-filter: blur(4px);padding: 1px;width: min(480px, 100%);color:#333;	
	.wrap_afisha{overflow-y: hidden;scroll-behavior: smooth;scrollbar-width: none;scroll-snap-type: x mandatory;anchor-name: --box-afisha;gap: 3px;}
	a{display:block;flex-shrink: 0;width: 100%;scroll-snap-align: start;}
	img{max-height: 12vh;max-width: max(50%, 300px); object-fit: cover;}
	h3{font-size: medium;text-align: center;}	
	figcaption{padding:0.5em 1em;}
}