* {
  box-sizing:border-box;
  font-size: 12px;
  font-family: Trebuchet MS;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  min-height: 100vh; /* ;) */
  display: grid;
  grid-template-rows: repeat(1, auto) 1fr;
  grid-row-gap: 1rem;
}

body > *:not(script) {
  display: grid;
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
  grid-template-columns: 2fr 1fr minmax(auto, 768px) 1fr 2fr;
  padding-left: 1rem;
  padding-right: 1rem;
}

body > * > * {
  grid-column: 3;
}

section {
  display: flex;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

aside {
  flex-grow: 1;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  flex-direction: column;
  flex-wrap: wrap;
}

li {
  margin-right: 0.5rem;
}

@media screen and (min-width: 768px) {
  section {
    flex-direction: row;
  }

  ul {
    flex-direction: row;
  }
}
a {
  color: gray;
  text-decoration: none;
}

a:hover {
  color: black;
}

button {
  box-sizing: border-box;
  width: 4.125rem;
  height: 4.125rem;
  margin: 1em;
  border: none;
  border-radius: 50%;
  transition: ease 0.1s;
}

button:hover {
  cursor: pointer;
  -webkit-transform: scale(2, 2);
          transform: scale(2, 2);
}

.add {
  display: flex;
  justify-content: center;
}

.add a {
  font-size: 10rem;
  text-decoration: none;
  color: silver;
}

.add a:hover {
  box-sizing: border-box;
  transition: ease 0.1s;
  color: black;
  font-size: 11rem;
}




a {
	color:gray;
	text-decoration:none;
}

a:hover {
	color:black;
}




.colors2{position:relative;width:calc(100px * 2);height:calc(50px * 6);font-size:10px;display:inline-block}.colors2>div{position:absolute;width:100px;height:50px}.colors2 div:nth-child(1n+2){text-align:center;line-height:calc(1rem * 3);left:50px}.colors2 div:nth-child(3),.colors2 div:nth-child(4){top:50px;width:0;height:0}.colors2 div:nth-child(5){top:100px}.colors2 div:nth-child(6){top:calc(50px * 3)}.colors2 div:nth-child(7){top:calc(50px * 4);left:0;border-right:1px solid #000}.colors2 div:nth-child(8){top:calc(50px * 5)}
.colors3{position:relative;width:calc(100px * 2);height:calc(50px * 6);font-size:10px;display:inline-block}.colors3>div{position:absolute;width:100px;height:50px}.colors3 div:nth-child(1n+2){text-align:center;line-height:calc(1rem * 3);left:50px}.colors3 div:nth-child(3){top:50px}.colors3 div:nth-child(4){top:calc(50px * 2)}.colors3 div:nth-child(5){top:calc(50px * 3);border-bottom:1px solid #000}.colors3 div:nth-child(6){top:calc(50px * 4);border-bottom:1px solid #000}.colors3 div:nth-child(7){top:calc(50px * 5)}
.colors4{position:relative;width:calc(100px * 2);height:calc(50px * 6);font-size:10px;display:inline-block}.colors4>div{position:absolute;width:100px;height:50px}.colors4 div:nth-child(1n+2){text-align:center;line-height:calc(1rem * 3)}.colors4 div:nth-child(2),.colors4 div:nth-child(5),.colors4 div:nth-child(6),.colors4 div:nth-child(9){left:50px}.colors4 div:nth-child(4),.colors4 div:nth-child(8){left:100px}.colors4 div:nth-child(3),.colors4 div:nth-child(4){top:50px}.colors4 div:nth-child(5){top:100px}.colors4 div:nth-child(6){top:calc(50px * 3);border-bottom:1px solid #000}.colors4 div:nth-child(7),.colors4 div:nth-child(8){top:calc(50px * 4)}.colors4 div:nth-child(9){top:calc(50px * 5);border-top:1px solid #000}.colors4 div:nth-child(7){border-right:1px solid #000}