input[type=text]:focus {   /*   для текстовых полей стиль */
    padding: 6px 2px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #f1f1f1;
}




select {    /*   для выподаюих текстов полей стиль */
  
    padding: 6px 2px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #f1f1f1;
}


 /*   * {
  box-sizing: border-box;
}  не знаю что это */


.mask {
    background-color:#D3D3D3; /* тёмно-серый */
}


nav {    /*   перхний блок гдн меню */
  position: fixed;
  
  width: 100%;
  padding: 16px 20px 30px 20px;
  display: flex;
 align-items: center; 
  transition: 0.3s ease-out;
  backdrop-filter: blur(8px) brightness(1.2);
  -webkit-backdrop-filter: blur(8px) brightness(1.2);
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
  color: white;
  font-size: 16px;
  &.mask {
    top: 0px;
    height: 30px;
  }


  @media (min-width: 640px) {
    padding: 16px 50px 30px 50px;
  }
}
nav.is-hidden {
  transform: translateY(-100%);
}
a {
  color: inherit;
  text-decoration: none;
  &:hover,
  &:focus {
    text-decoration: underline;
  }
}
.list {
  /*  list-style-type: none; */ 
  margin-left: 280px;   /*180 был  устанавливает величину внешнего отступа от левого края элемента */ 
  display: none;
  
}





body {
   background-color: #fff;

  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

  
  
  
  
  
  
    #nnavv{
    /* По левому краю выравниваю! */
    float:left;
    /* Отступ. */
    margin-bottom: 10;
    /* Задаю ширину. */
    width:1500px;
    /* Убираю маркеры*/
    list-style: none;
    /* Шрифт — жирным*/
    font-weight: bold;
}
#nnavv li{
    /* Выравнивание! */
    float: left;
    /* Делаю элементы блочными. */
    display: block;
    /* Отступ. */
    margin-right: 10;
    /* Позиционирование относительно исходного места! */
    position: relative;
}
#nnavv li a{
    /* Цвет бэкграунда. */
    background: #333;
    /* Делаю элементы блочными. */
    display: block;
    /* Отступы. */
    padding: 5;
    /* Цвет ссылки. */
    color: #fff;
    /* Форматирование текста*/
    text-decoration:none;
    /* Задаю скругленные углы на 2 пиксела*/
    -moz-border-radius: 10;
    -webkit-border-radius: 10;
    border-radius: 10;
    /* Тень для визуальной приподнятости текста*/
    text-shadow:1px 1px 1px rgba(0,0,0,0.74);
}
#nnavv li a:hover{
    /* Подчеркну ссылку при наведении*/
    text-decoration: underline;
    /* Задам фон. */
    background: #6b0c33;
    /* Цвет ссылки остается прежним*/
    color: #fff;
    background: rgba(108,13,53,0.74); /* Заставляю выглядеть полупрозрачным! */
}

  
  
  
  
  
  





/*Dialog Styles*/
dialog {
	padding: 1rem 3rem;
	background: white;
	
	border-radius: 20px;
	border: 1; /* //тощина нраницы */
	box-shadow: 0 5px 30px 0 rgb(0 0 0 / 10%);
	animation: fadeIn 1s ease both;
	&::backdrop {
		animation: fadeIn 1s ease both;
		background: rgb(255 255 255 / 10%);
		z-index: 2;
		backdrop-filter: blur(20px);
	}
	
}
#container {
  text-align: center;
  box-shadow: 0 15px 30px 1px grey;
  background: rgba(255, 255, 255, 1);
  border-radius: 50px;
  display: block;        /* теперь блок */
  width: fit-content;    /* под размер содержимого */
  padding: 2em 4em;
  margin: 1em auto;      /* центрирование работает */
}












a.button24 {
  display: inline-block;
  color: Black;
  text-decoration: none;
  padding: 2px 6px;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #808080	 #000 #808080;
  border-radius: 6px;
  background: linear-gradient(#8FBC8F, #F5F5DC) #F5DEB3	;
  transition: 0.2s;
  
} 
a.button24:hover { background: linear-gradient(#FAEBD7,#FAEBD7) #f5ae00; }
a.button24:active { background: linear-gradient(#BDB76B,#BDB76B) #f59500; }