html {
	height: 100%;
	}

body {
  display        : flex;
  flex-direction : column;
  height         : 100vh;
  justify-content: space-between;
  margin         : 0;
  overflow       : hidden;
	}

h2 {
  background-color: black;
  color           : #ead4d4;
  cursor          : pointer;
  font-family     : sans-serif;
  font-size       : 5vw;
  left            : 20%;
  margin          : 0;
  padding         : 1em;
  position        : absolute;
  text-transform  : uppercase;
  top             : 40%;
  z-index         : 100;
	}

	div {
		display: flex;
		}

	.bars-1 { flex: 66%; flex-grow: 1; }
	.bars-2 { flex: 6%;  flex-grow: 0; }
	.pluge  { flex: 15%; flex-grow: 0; }


	 p {
		flex  : 1 1 auto;
		margin: 0;
		}

	.bars-1 p:nth-of-type(1) { background-color: hsl(  0  0% 80% ); }
	.bars-1 p:nth-of-type(2) { background-color: hsl( 60 95% 38% ); }
	.bars-1 p:nth-of-type(3) { background-color: hsl(180 95% 38% ); }
	.bars-1 p:nth-of-type(4) { background-color: hsl(120 95% 38% ); }
	.bars-1 p:nth-of-type(5) { background-color: hsl(300 95% 38% ); }
	.bars-1 p:nth-of-type(6) { background-color: hsl(  0 95% 38% ); }
	.bars-1 p:nth-of-type(7) { background-color: hsl(240 95% 38% ); }

	.bars-2 {}
	.bars-2 p { background-color: black; }
	.bars-2 p:nth-of-type(1) { background-color: hsl(240 95% 38% ); }
	.bars-2 p:nth-of-type(3) { background-color: hsl(300 95% 38% ); }
	.bars-2 p:nth-of-type(5) { background-color: hsl(180 95% 38% ); }
	.bars-2 p:nth-of-type(7) { background-color: hsl(  0  0% 80% ); }

	.pluge p:nth-of-type(1) { background-color: rgb(16,70,106); }
	.pluge p:nth-of-type(2) { background-color: white; }
	.pluge p:nth-of-type(3) { background-color: rgb(72,16,118); }
	.pluge p:nth-of-type(4) { background-color: black; }
	.pluge p:nth-of-type(5) { background-color: rgb(16,16,16); }
	.pluge p:nth-of-type(6) { background-color: rgb(16,16,16); }