@font-face {
    font-family: 'Minecraft_mir_fon';
    src: url('/font/mir_ua_minecraft.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
:root{
	--primary-color: #4CAF50;
}

*{
	font-family: "Minecraft_mir_fon", sans-serif;
    box-sizing: border-box;
}
html , body{
	overscroll-behavior: none; /* відключає "докручування" */
	touch-action: none; /* повністю блокує інерційні рухи на мобільних */
	-ms-touch-action: none; /* для старих IE/Edge */
	overflow: hidden; /* не дозволяє звичайну прокрутку */
}
a {
    text-decoration: none; /* прибирає підкреслення */
    color: inherit;        /* щоб колір був як у батька */
    outline: none;         /* прибирає рамку при фокусі */
}

a:hover, a:focus, a:active {
    text-decoration: none; /* прибирає підкреслення при наведенні */
    color: inherit;        /* колір не змінюється */
}
h1{
	color:white;
	text-shadow: 
	-2px -2px 0 #000, 
	2px -2px 0 #000, 
	-2px 2px 0 #000, 
	2px 2px 0 #000;
}
html,body{
    height: 100%;
    margin: 0;
	padding:0;
    overflow-x: hidden;
	scroll-behavior: smooth;
}
.under_head{
    display: flex;           /* робимо контейнер флекс */
    justify-content: flex-start; /* вирівнювання по горизонталі зліва */
    align-items: center;     /* вирівнювання по вертикалі по центру */
}

@media (min-width: 769px) {
	/* ТЕМНА ТЕМА*/
	
	header.nigth_tema{
	   top: 0;
	   left: 0;
	   margin:calc(1vw + 10px);
	   padding: 0.3vw;
	   border-radius: 2vw;
	   position: fixed;
	   width: calc(100% - 2vw - 20px);
		background-color: rgba(0,0,0,0.4);
	   transition: background-color .4s ease-out .15s;
		display: flex;
	   justify-content: space-between;
		align-items: center;
	   z-index: 1000;
	}
	
	#logo{
		width:10vw;
		height:3vw;
		padding:0 1vw 0 0;
	}
	.punct{
		padding: 0 1vw 0 1vw;
		display: flex;
		font-size: 1.5vw;
	}
	.punct_mobile{
		display: none !important;
	}
	#servdiv,#langdiv{
		margin:0;
	}
	#langdiv h1{
		font-size: 1.5vw;
	}
	
	#servlang.nigth_tema, #selectlang.nigth_tema{
		opacity: 0;
		visibility: hidden;
		transform: translateX(0) scale(1);
		padding: 0.1vw 1vw 0.1vw 1vw;
		border-radius: 3vw;
		position: fixed; /* Замість absolute */
		z-index: 1100;
		border: 0.3vw solid rgba(0,0,0,0.35);
		backdrop-filter: blur(5px); 
		-webkit-backdrop-filter: blur(5px);
		background-color: rgba(0,0,0,0.35);
	}
	#selectlang{
		right: 10px; 
	}
	
	@keyframes drowdownmenu{
		0%{
			opacity: 0;
			visibility: hidden;
		}
		100%{
		  opacity: 1;
		  visibility: visible;
		}
	}
	
	
	/* */ 
	.full-scr{
		display: flex;
		/*  flex-direction: column;  /* ← ось це робить елементи в стовпчик */ 
	   background-image: url('../img/fon.png');
	   transition: background-image .4s ease-out .15s;
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: center;
	   width:100vw;
	   height:100vh;
	   margin:0;
	}
	.fs_left{
		margin:0;
		padding: 0;
	   padding-top:calc(12.5vh + 10px);
	   padding-left:2vw;
	   width:50vw;
	}
	.fs_right{
		margin:0;
		padding: 0;
	   width:50vw;
	   display: flex;
	   flex-direction: column;
	   justify-content: center;
	   align-items: center;
	}
	.button {
		padding: 15px 32px;
		font-size: calc(1vw + 1vh);
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		color: var(--font-color-light);
		border-radius: 5px;
		transition: background-color 0.3s;
		box-shadow: var(--box-shadow);
		cursor: pointer;
		height:calc(5vh + 4vw);
		width:calc(20vw + 12vh);
	 }
	.button.download {
		/*background-image: url("../img/knipkaver2napivprozora.png") ;  */
		background: linear-gradient(to right, #6062ff, #1a1c7f);
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: center;
	}

	.url_to_soc{
		display: flex;
		align-items: center;
		background-color: rgba(0,0,0,0);
	}

	.social{
	   display: inline-block; /* робимо елементи рядковими */
		margin-top: 0.5vw;
		padding:0;
		width: 4vw;
		height:4vw;
		background-color: rgba(0,0,0,0)
	}

	.social img{
		max-height:100%;
		max-width:100%;
		background-color: rgba(0,0,0,0)
	}

	.discord img{
		background-color: blue;
	}
	.telegram img{
		background-color: CornflowerBlue;
	}
	.youtube img{
		background-color: Red
	}

	#vanila_menu .fs_right{
		position: relative; /* батько стає системою координат */
		margin-top:10vh;
	}
	
	#vanila_menu .fs_right iframe{
		position: relative;
		width:90%;
		height:90%;
		z-index:990;
	}
	
	#vanila_menu #iframe{
		width:90%;
		height:90%;
		z-index:990;
	}
	
	#owner_pidhead  .punct ,  #owner_pidhead .now_sel{
		font-size:1vw !important;
		color: DarkGrey;
	}
	.serv_sel{
		font-size:1.5vw;
	}
	
	h1#online_vanul {
		position: absolute !important;
		margin: 0 !important;
		top:80vh;
		right:calc(8vh + 45px);
		z-index: 995 !important;
		font-size:calc(vh + 1vw);
	}
	
	img#vanila_text{
		width:calc(15vw + 15vh);
		height:calc(5vw + 5vh);
	}
	
	#vanila_menu.nigth_tema{
	   background-image: url('../img/vanila.png');
	   transition: background-image .4s ease-out .15s;
	}
	#vait_menu.nigth_tema{
	   background-image: url('../img/valt.png');
	   transition: background-image .4s ease-out .15s;
	}
	
	#galary_itradv{
		position: relative;
		border: 0.3vw black solid;
		width: min(50vh, 50vw);
		height: min(50vh, 50vw);
		display: flex;
		align-items: center; /* вирівнює по центру вертикалі */
	   transition: background-image .4s ease-out .15s;
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: center;
	}
	#galary_itradv img {
		position: absolute;
		width: 100%;
      height: 100%;
    }
	#galary_itradv_buttons{
		width:100%;
		display: flex;
		justify-content: space-between; /* розташовує елементи по краях */
	}
	#galary_itradv_buttons h1{
		font-size: 5vw;
		margin:3vh;
		z-index:8;
		color: black;
		font-family: Arial, Helvetica, sans-serif;
		text-shadow: 
		-2px -2px 0 #fff, 
		2px -2px 0 #fff, 
		-2px 2px 0 #fff, 
		2px 2px 0 #fff;
	}
	/* СВІКЛА ТЕМА*/
	
	header.day_tema{
	   top: 0;
	   left: 0;
	   margin:calc(1vw + 10px);
	   padding: 0.3vw;
	   border-radius: 2vw;
	   position: fixed;
	   width: calc(100% - 2vw - 20px);
		background-color: rgba(255,255,255,0.4);
	   transition: background-color .4s ease-out .15s;
		display: flex;
	   justify-content: space-between;
		align-items: center;
	   z-index: 1000;
	}
	
	.full-scr.day_tema{
		display: flex;
		/*  flex-direction: column;  /* ← ось це робить елементи в стовпчик */ 
	   background-image: url('../img/fon_light.png');
	   transition: background-image .4s ease-out .15s;
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: center;
	   width:100vw;
	   height:100vh;
	   margin:0;
	}
	#vanila_menu.day_tema{
	   background-image: url('../img/vanila_light.png');
	   transition: background-image .4s ease-out .15s;
	}
	#vait_menu.day_tema{
	   background-image: url('../img/valt_light.png');
	   transition: background-image .4s ease-out .15s;
	}
	#servlang.day_tema, #selectlang.day_tema{
		opacity: 0;
		visibility: hidden;
		transform: translateX(0) scale(1);
		padding: 0.1vw 1vw 0.1vw 1vw;
		border-radius: 3vw;
		position: fixed; /* Замість absolute */
		z-index: 1100;
		border: 0.3vw solid rgba(0,0,0,0.35);
		backdrop-filter: blur(5px); 
		-webkit-backdrop-filter: blur(5px);
		background-color: rgba(255,255,255,0.35);
	}
}


@media (max-width: 768px) {
	header.nigth_tema{
	   top: 0;
	   left: 0;
	   margin:calc(1vw + 10px);
	   padding: 0.3vw;
	   border-radius: 2vw;
	   position: fixed;
	   width: calc(100% - 2vw - 20px);
		background-color: rgba(0,0,0,0.4);
	   transition: background-color .4s ease-out .15s;
		display: flex;
	   justify-content: space-between;
		align-items: center;
	   z-index: 1000;
	}
	#logo{
		width: calc(30vw + 10px);
		height: calc(9vw + 10px);
	}
	.punct{
		display: none !important;
	}
	.punct_mobile{
		padding: 0 1vw 0 1vw;
		font-size: calc(2vw + 20px);
	}
	.langdiv{
		display: none  !important;
	}
	.langdiv h1{
		display: none  !important;
	}
	#selectlang{
		display:none !important;
	}
	.servdiv{
		display:none !important;
	}
	
	.full-scr{
		display: flex;
		flex-direction: column; 
	   background-image: url('../img/fon.png');
	   transition: background-image .4s ease-out .15s;
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: center;
	   width:100vw;
	   height:100vh;
	   margin:0;
	}
	.fs_left{
		margin:0;
		padding: 0;
	   padding-top:calc(11.5vh + 10px);
	   padding-left:2vw;
	   height:50vh;
	   display: flex;
	   flex-direction: column;
	   justify-content: center;
	   align-items: center;
	   text-align: center;
	}
	.fs_right{
		margin:0;
		padding: 0;
	   height:50vh;
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	}
	.button {
		padding: 15px 32px;
		font-size: 3vh;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		color: var(--font-color-light);
		border-radius: 5px;
		transition: background-color 0.3s;
		box-shadow: var(--box-shadow);
		cursor: pointer;
		height:16vh;
		width:69vw;
	 }
	.button.download {
		/*background-image: url("../img/knipkaver2napivprozora.png") ;  */
		background: linear-gradient(to right, #5254ff, #00027d);
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: center;
	}
	
	#owner_menu  .fs_right h1{
		font-size:7vw;
	}
	
	.url_to_soc{
		display: flex;
		align-items: center;
		background-color: rgba(0,0,0,0);
	}

	.social{
	   display: inline-block; /* робимо елементи рядковими */
		margin-top: 0.5vw;
		padding:0;
		width: 9vh;
		height:9vh;
		background-color: rgba(0,0,0,0)
	}

	.social img{
		max-height:100%;
		max-width:100%;
		background-color: rgba(0,0,0,0)
		object-fit: cover;        /* як background-size: cover */
		object-position: center;  /* як background-position: center */
	}

	.discord img{
		background-color: blue;
	}
	.telegram img{
		background-color: CornflowerBlue;
	}
	.youtube img{
		background-color: Red
	}
	#vanila_menu{
	   background-image: url('../img/fons.png');
	}
	#vanila_menu .fs_right{
		margin-top:10vh;
	}
	#vanila_menu .fs_right iframe{
		width:90%;
		height:90%;
		z-index:990;
	}
	#langdiv, #servdiv{
		display:none !important;
	}
	h1#online_vanul {
		position: absolute !important;
		margin: 0 !important;
		top:35vh;
		right:calc(6vh + 45px);
		z-index: 995 !important;
		font-size:calc(1vh + 1vw);
	}
	#vanila_menu.nigth_tema{
	   background-image: url('../img/vanila.png');
	   transition: background-image .4s ease-out .15s;
	}
	#vait_menu.nigth_tema{
	   background-image: url('../img/valt.png');
	   transition: background-image .4s ease-out .15s;
	}
	img#vanila_text{
		width:calc(15vw + 15vh);
		height:calc(5vw + 5vh);
	}
	
	#mobile_header_menu{
		font-size:calc(2vw + 3vh)
	}
	
	#menu_modile_global.nigth_tema{
		visibility: hidden;
		transform: translateX(0) scale(1);
		width:90%;
		height:80%;
		top:15%;
		left: 5%;
		padding: 0.1vw 1vw 0.1vw 1vw;
		border-radius: 3vw;
		position: fixed; /* Замість absolute */
		z-index: 1100;
		border: 0.3vw solid rgba(0,0,0,0.1);
		backdrop-filter: blur(10px); 
		-webkit-backdrop-filter: blur(10px);
		background-color: rgba(0,0,0,0.35);
		text-align: center;
		display: flex;
		flex-direction: column; /* Робить розміщення зверху вниз */
		justify-content: space-between; /* Розкидає елементи по висоті */
	}
	.mm_sel{
		font-size:calc(3vh + 3vw);
		text-shadow: 
		-4px -4px 0 #000, 
		4px -4px 0 #000, 
		-4px 4px 0 #000, 
		4px 4px 0 #000;
	}
	#mm_down {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center; /* !!! вирівнює h1 по одній лінії вертикально */
	}

	#mm_down_left, 
	#mm_down_right {
		display: flex;
		align-items: center; /* вирівнює всередині */
	}

	#mm_down_left h1,
	#mm_down_right h1 {
		font-size: calc(3vh + 3vw);
		margin: 2vw; /* прибрати стандартні відступи h1 */
		margin-bottom:2.5vh;
		line-height: 1; /* щоб не було “підстрибування” тексту */
	}
	.accordion__content {
		font-size: calc(3vh + 3vw);
		color:white;
		display: grid;
		grid-template-rows: 0fr;
		transition-duration: 0.3s;
	}

	.accordion__content-body {
		font-size: calc(1vh + 1vw);
		color:white;
		overflow: hidden;
	}

	.accordion__details[open] + .accordion__content {
		font-size: calc(3vh + 3vw);
		color:white;
		grid-template-rows: 1fr;
	}
	.accordion__summary{
		font-size: calc(3vh + 3vw);
		color:white;
	}
	.accordion__title{
		text-shadow: 
		-4px -4px 0 #000, 
		4px -4px 0 #000, 
		-4px 4px 0 #000, 
		4px 4px 0 #000;
	}
	
	#lang_mobile h1{
		font-size: calc(3vh + 3vw);
		text-align: right;
		
	}
	#select_lang_modive.nigth_tema{
		opacity: 0;
		visibility: hidden;
		transform: translateX(0) scale(1);
		padding: 0.1vw 1vw 0.1vw 1vw;
		border-radius: 3vw;
		position: fixed; /* Замість absolute */
		z-index: 1100;
		border: 0.3vw solid rgba(0,0,0,0.35);
		backdrop-filter: blur(5px); 
		-webkit-backdrop-filter: blur(5px);
		background-color: rgba(0,0,0,0.35);
		right:3%;
		bottom:12%;
		text-align: center;
	}
	#select_lang_modive h1{
		width:100%;
		text-align: center;
	}
	
	#stalv_menu  .fs_left h1{
		margin-top:1px;
		font-size: 5vw;
	}
	
	#vanila_menu .fs_left h1{
		margin-top:1px;
		font-size:5.4vw;
	}
	
	#vait_menu .fs_left h1{
		margin-top: 1px;
		font-size:5.4vw;
	}
	
	#galary_itradv{
		width: min(58vh, 58vw);
		height: min(58vh, 58vw);
		position: relative;
		border: 0.3vw black solid;
		display: flex;
		align-items: center; /* вирівнює по центру вертикалі */
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: center;
	}
	
	#galary_itradv img {
		position: absolute;
		width: 100%;
      height: 100%;
    }
	#galary_itradv_buttons{
		width:100%;
		display: flex;
		justify-content: space-between; /* розташовує елементи по краях */
	}
	#galary_itradv_buttons h1{
		font-size: 5vw;
		margin:3vh;
		z-index:8;
		color: black;
		font-family: Arial, Helvetica, sans-serif;
		text-shadow: 
		-2px -2px 0 #fff, 
		2px -2px 0 #fff, 
		-2px 2px 0 #fff, 
		2px 2px 0 #fff;
	}
	/* СВІКЛА ТЕМА*/
	
	header.day_tema{
	   top: 0;
	   left: 0;
	   margin:calc(1vw + 10px);
	   padding: 0.3vw;
	   border-radius: 2vw;
	   position: fixed;
	   width: calc(100% - 2vw - 20px);
		background-color: rgba(255,255,255,0.4);
	   transition: background-color .4s ease-out .15s;
		display: flex;
	   justify-content: space-between;
		align-items: center;
	   z-index: 1000;
	}
	
	.full-scr.day_tema{
		display: flex;
		/*  flex-direction: column;  /* ← ось це робить елементи в стовпчик */ 
	   background-image: url('../img/fon_light.png');
	   transition: background-image .4s ease-out .15s;
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: center;
	   width:100vw;
	   height:100vh;
	   margin:0;
	}
	#vanila_menu.day_tema{
	   background-image: url('../img/vanila_light.png');
	   transition: background-image .4s ease-out .15s;
	}
	#vait_menu.day_tema{
	   background-image: url('../img/valt_light.png');
	   transition: background-image .4s ease-out .15s;
	}
	#menu_modile_global.day_tema{
		visibility: hidden;
		transform: translateX(0) scale(1);
		width:90%;
		height:80%;
		top:15%;
		left: 5%;
		padding: 0.1vw 1vw 0.1vw 1vw;
		border-radius: 3vw;
		position: fixed; /* Замість absolute */
		z-index: 1100;
		border: 0.3vw solid rgba(0,0,0,0.1);
		backdrop-filter: blur(10px); 
		-webkit-backdrop-filter: blur(10px);
		background-color: rgba(122,122,122,0.4);
		text-align: center;
		display: flex;
		flex-direction: column; /* Робить розміщення зверху вниз */
		justify-content: space-between; /* Розкидає елементи по висоті */
	}
	#select_lang_modive.day_tema{
		opacity: 0;
		visibility: hidden;
		transform: translateX(0) scale(1);
		padding: 0.1vw 1vw 0.1vw 1vw;
		border-radius: 3vw;
		position: fixed; /* Замість absolute */
		z-index: 1100;
		border: 0.3vw solid rgba(0,0,0,0.35);
		backdrop-filter: blur(5px); 
		-webkit-backdrop-filter: blur(5px);
		background-color: rgba(125,125,125,0.35);
		right:3%;
		bottom:12%;
		text-align: center;
	}
}

header::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 2vw;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   z-index: -1;
   background-color: rgba(0,0,0,0.3);
}

#vanila_menu > .fs_right{
	position: relative;
}
#stavl_menu > .fs_right{
	position: relative;
}