html {
  scroll-behavior: smooth;
}

body {
	font-family: "Reddit Mono", monospace;
}

.flex {
	display:flex;
}

.label {
	white-space: nowrap;
}


#myTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: darkred; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 1em; /* Increase font size */
}

#myTopBtn:hover {
  background-color: gold; 
}

.patronyms_index {
	text-align:center;
}

.individual {	
	align-items: center;		
	display : flex;
	flex-wrap : wrap;
}

.name>a {
	text-decoration : none;
	font-weight :bold;
}

.separator {
	margin: 20px auto;
	width:75%;
	border-bottom:thin solid black;
	
}

.footer {
	margin: 20px auto;
	width:75%;
	border-top:thin solid black;
	text-align : center;
}



.gender {
	width:0.8em;
	height:0.8em;
	border-radius : 0.3em;
	margin-right: 3px;
    box-shadow: 2px 2px 2px grey;
	border : thin solid white;	
}

.gender.M {
	background:cyan;
}

.gender.F {
	background:pink;
}

.gender.U {
	background:gold;
}

div.ancestors {
	margin-top: 15px;
	display: flex;
    justify-content: center;
}


td.ancestor > .individual{
	border : thin solid black;
}

div.parents {
	margin-top : 15px;
}

div.parent {
	display : flex;
	margin-bottom: 4px;
}

.event {
	display : flex;
	flex-wrap : wrap;
	vertical-align : center;
}
.event > .place {
	display : flex;
vertical-align : center;
}


div.union {
	margin-top : 15px;
}

div.marriage {
	margin-left: 40px; 
}

div.children {
	margin-left: 25px;
    padding-left: 10px;
    border-left: thin solid black;
}

.patronyms_index  a {
	text-decoration : none;
	color : black;
	border-top : 2px solid transparent;
}

.patronyms_index a:hover {
	color : red;
	border-top : 2px solid red;
}

/*Menu*/
nav {
	width : 100%;
	margin: 0 auto;
	background-color :white;
	position: sticky;
	top : 0px;
}


nav ul {
	list-style-type:none;
}

nav li {
	float:left;
	width:25%;
	text-align:center;
}

nav ul:after {
	content:"" ;
	display : table;
	clear: both;
}

nav a {
	display : block;
	text-decoration : none;
	color : black;
	border-bottom : 2px solid transparent;
	padding: 10px 0px;
}

nav a:hover {
	color : orange;
	border-bottom : 2px solid gold;
}






@media screen and (max-width: 640px) {
	body {
		font-size:80%;
	}
	table {
		font-size:inherit;
	}
}