:root{
  --menu_bg_color:#d3d9ff;
  --menu_color:#A0C0FF;
  --menu_text_color:#5198d7;
  --menu_hilit_frame_color:#1e83a8;
  --menu_hilit_bg_color:#fff;
  --menu_hilit_color:#ddebfb;
  --menu_hilitmj_color:#cbcbc9;
}
 
nav ul {
  border-top:2px var(--menu_color) solid;
}

nav ul li {
  display:inline-block;
  margin:-20px 2px 5px 0;
  padding:1px 5px;
  border: 2px var(--menu_color) solid;
  border-radius: 0 0 6px 6px;
  background-color: var(--menu_bg_color); 
}

nav ul li a{
  text-decoration:none;
  font-family: 'Tilt Neon', sans-serif;
  font-size: small;
  /*color:white; */
  color:var(--menu_text_color);
}

nav ul li:hover{
  background-color:var(--menu_hilit_bg_color);
  border-radius: 0 0 10px 10px;
  border-color:var(--menu_hilit_frame_color); 
}

nav ul li a:visited{
  /*color:white; */
  color:black; 
  border-radius: 0 0 10px 10px;
  border-color:Blue; 
}



.hammenu {
  display:none;
}

@media screen and (max-width:640px){
   nav{
     display:none;
   }

  .hammenu { /*<640px*/
      display:inline;
      position:relative;
      margin-top:-10px;
      padding-right:10px;
      float:right;
    }
  }
  .hammenu img{
    transform: scale(0.5);
  }


/**************/
.hmenu h1 {
 color:var(--menu_text_color);
 width:50%;
 margin:0 auto;
 padding-top: 5px;
}

.hmenu ul {
  list-style-type:none;
  width:80%;
}
.hmenu ul li {
  display:block;
  margin: 4px;
  padding:10px 20px;
  border: 2px var(--menu_hilit_frame_color) solid;
  border-radius: 16px;
  text-align: center;
  background-color:var(--menu_bg_color); 
  box-shadow: 2px 2px 5px var(--btnshdcolor);
}
.hmenu ul li a{
  text-decoration:none;
  /*color:white; */
  color:var(--menu_hilit_frame_color); 
  font-weight:bold;
}

.menu_zvuk{
  color: #4040FF;
}

#but_zpet{
  background-color: var(--menu_hilit_color);
}
#but_zpet a:before{
  content: "\1F3E0\0020\020";
}

#but_mj{
  background-color: var(--menu_hilitmj_color);
  margin-top: 30px;
  border:2px dotted black;
  
}
#but_mj a{
  color:black;
}
#but_mj a:before{
  content: "\21ED\0020\020";
}

/**********************************/

.picmenu{
  display:flex;
  margin-left: 0.3rem;
  column-gap: 10px; 
  row-gap: 10px;
  flex-flow: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.picbutton p{
  margin: 2px 2px 2px 2px;
}

.picbutton {
  display: block;
  width:320px;
  
  border: 2px solid var(--btncolor);
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  background-color: var(--btncolor);
  color:var(--headingcolor);
  box-shadow: 2px 2px 5px var(--btnshdcolor);
  font-family: Arial, Helvetica, sans-serif;
  font-size: smaller;
  padding: 4px 2px 2px 2px;
}

.picbutton a img{
  transition-property: background-color;
	transition-duration: 0.8s;
	transition-timing-function: linear;  
}

.picbutton img{
  max-width: 98%;
  min-width: 300px;
  border-radius: 8px;
  box-shadow: 1px 1px 3px 1px black;
}