body {
	padding: 64px 4px;
    max-width: 512px;
    margin: auto;
}

nav {
    background: red;
    padding: 2px 8px;
    display: flex;
    border-bottom: solid 2px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}

nav a {
	color: black;
    text-decoration: none;
    font-size: 24px;
    font-weight: bolder;
    line-height: 15px;
    border: none;
    margin: 7px 0;
}

nav select {
    margin-left: auto;
}

select.disabled {
    color:red;
}

.tool {
    position: absolute;
    right: 8px;
}
.tool svg>path {
    fill:black;
}


h1 {
    text-align: center;
}

h2 {
    border-bottom: solid red;
}


h3{
	background: grey;
    color: white;
    padding: 0 8px;
}
.h3p,.h3ul{
	background: #f5f5f5;
    margin-top: -18px;
    box-shadow: 0px 4px 16px #07070721;
}
.h3p{
    padding:6px;
}
a {
    color: black;
    text-decoration: none;
    white-space: nowrap;
}
table {
    margin: auto;
	border-collapse: collapse;
}
td {
    padding:6px;
	background: #e5e5e5;
}

.tdindex{
    text-align:right;
}


form {
    max-width: 600px;
    margin: auto;
}


textarea, input{
	width: -webkit-fill-available;
}

textarea{
	height:128px;
}



div.hexa{
	
}

div.trait{
	margin: 8px auto;
	height:20px;
	width:200px;
	background:black;
}
div.mideltrait{
	margin: 0 auto;
    height: 20px;
    width: 25%;
    background: white;
}



div.mutant_div{
}

.mutant_line{
	display:flex;
	margin-bottom: 8px;
}
.mutant_hexa{
	margin-bottom: 8px;
    margin-right: 8px;
}
div.mutant_trait{
    margin: 5px auto;
    height: 8px;
    width: 64px;
    background: black;
}
div.mutant_mideltrait{
	margin: 0 auto;
    height: 8px;
    width: 25%;
    background: white;
}