.link {
    color: #3D6475;
    text-decoration: none;
    border-bottom: 1px dotted #3D6475;
}

.link:hover {
    border-bottom: 1px solid #3D6475;
}

#points {
  width: 98%;
  height: 400px;
  resize: none;
  border: 1px solid #3D6475;
  border-radius: 5px;
}
#update,
#copyButton {
  width: 100%;


}



#main {
	width: 500px;
}

body {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background-image: url('../images/fon.webp');
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-size: cover;
	color: #252525;
}

button {
    color: #252525;
    font-size: 17px;
    margin-top: 5px;
    margin-bottom: 2vh;
	border: 1px solid #3D6475;
    border-radius: 5px;
    height: 5vh;
	width: 99%
}

button:hover {
	color: #fff;
	background-color: #3D6475;
	border: 1px solid #333;
}

.nav2 img {
	max-width: 100px;
}
.nav2 {
	z-index: 199;
	background: white;
	box-shadow: rgb(101, 101, 101) 0px 0px 19px 1px;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content:space-between;
	padding: 0 4vw ;
}
.nav2 ul li {
	list-style-type: none;
	color: rgb(35, 35, 35);
}
.nav2 ul {
	display: flex;
	gap: 4vw;
	padding-inline-start: 0;
}
.nav2 a {
	text-decoration: none;
	color: rgb(35, 35, 35);
	font-size: 19px;
}
.nav2 a:hover {
	color: #3D6475;	
	transition: all .1s;
	border-bottom: 2px solid #3D6475;
	
}



#imageContainer {
	margin-top: 10px;
	width: 500px;
	height: 500px;
	overflow: hidden;
	border-radius: 50%;
	position: relative;
	border: 1px solid #000;
	
}

#imageContainer4 {
	margin-top: 10px;
	width: 500px;
	height: auto;
	overflow: hidden;

	position: relative;

	
}






#myCanvas {
  width: 100%;
  height: auto;

}

#step1 {
	height: 100%;
	margin-top: 10vh;
}





@media (max-width: 600px) {
  #imageContainer,
  #imageContainer4 {
    width: 100%;
  }
  #main {
	  display: flex;
  
  }
}


.nav {
	display: none;
}

#main {
	margin-top: 10px;
	gap: 15px;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
}
#step4 {
	margin-top: 10vh;
	background: #fff;
	border: solid 1px #3D6475;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px;
	width: 500px;
}

#step4 {
	margin-bottom: 5vh;
}

@media (max-width: 819px) {
	#step4 {
		width: auto;
		margin-top: 10vh;
		
	}
	#imageContainer {
		width: 500px;
		height: 500px;
		margin-left: auto;
		margin-right: auto;
}
	#imageContainer4 {
		width: 500px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
}

}
/* 
@media (max-width: 819px) {
	#main {
		width: 100%;
	}
} */
@media (max-width: 500px) {
	#step1 {
		margin-top: 0;
	}

	#step1, #step4 {
		width: 80vw;
		
	}
	#step4 {
		margin-bottom: 10vh;
	}

	#imageContainer4 {
		width: 80vw;
		height: auto;
	}
}

@media (max-width: 600px) {
		#step1 {
		margin-top: 0;
	}
		#step4 {
		margin-bottom: 13vh;
		margin-top: 0;
	}
	.nav2 {
		display: none;
	}

	.nav {
		display: flex;
		justify-content: center;
		box-shadow: rgb(101, 101, 101) 0px 0px 19px 1px;
		background: #f9f9f9;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding: 10px;
	}
}

.nav-text {
	display: flex;
	justify-content: space-evenly;
	max-width: 94vw;
	height: auto;
	gap: 5vw;
}
.nav-t-1 a {
	text-decoration: none;
	align-items: center;
	display: flex;
	gap: 2vw;
	flex-direction: column;
	color: #5f5f5f;
	font-size: 12px;
}
/* .nav-t-1 a:hover {
	color:rgb(48, 166, 206);
	transition: all .3s;
} */

.nav-t-1 svg {
	max-width: 20px;
	max-height: 20px;
}

.nav-t-1 svg path {
	fill:#5f5f5f;
}

.none-path svg path  {
	fill: white;
}

.none-path svg g,.none-path path {
	stroke: #5f5f5f ;
}

/* .none-path:hover svg g, .none-path:hover path {
	stroke: rgb(48, 166, 206);
	transition: all .3s;
}

.nav-t-1:hover svg path  {
	fill:rgb(48, 166, 206);
	transition: all .3s;
}

.none-path:hover svg path {
	fill: white;
} */

.nav-t-1 {
	gap: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


/* Нижнее меню: всегда помещается по ширине */
@media (max-width: 600px) {

  .nav {
    padding: 8px 6px;              /* чуть компактнее */
  }

  .nav-text{
    width: 100%;
    max-width: 100%;
    gap: 0;                        /* ВАЖНО: убираем vw-gap */
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }

  .nav-t-1{
    flex: 1 1 0;                   /* все пункты равной ширины */
    min-width: 0;                  /* позволяет сжиматься */
  }

  .nav-t-1 a{
    width: 100%;
    padding: 4px 2px;
    gap: 6px;
  }

  .nav-t-1 svg{
    width: 20px;
    height: 20px;
    max-width: none;
    max-height: none;
  }

  .nav-t-1 a span,
  .nav-t-1 a {                      /* если текст прямо в a без span */
    white-space: nowrap;            /* не переносить */
    overflow: hidden;               /* обрезать */
    text-overflow: ellipsis;        /* ... если не влезло */
    font-size: 11px;                /* чуть меньше */
  }
}
/* Нижнее меню: всегда помещается по ширине */