* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  padding: 1vh;
  background-color: #e5ffde;
}

#kara,
#gates,
#isan,
#artist {
  display: flex;
  width: 100%;
  height: 24.5vh;
}

/* Letter colors */
/* ------------------------ */
.k:hover,
.r:hover,
.n:hover {
  background: #2b3337;
}

.a:hover {
  background: #ef6e48;
}

.t:hover {
  background: #ee4c30;
}

.g:hover,
.e:hover {
  background: #d81e5b;
}

.s:hover {
  background: #f59336;
}

.i:hover {
  background: #2b3337;
}

.me:hover {
  background-image: url('../kara_headshot.jpg');
  background-position: center center;
  background-size: cover;
}

/* Letter shapes */
/* ------------------------ */
.letter {
  position: relative;
  background: #131212;
  flex-grow: 1;
  margin: 1vh;
}

.vert,
.horz,
.t-hat {
  position: absolute;
  background: #e5ffde;
  margin: 0;
}

.horz {
  right: 0;
  width: 33%;
  height: 2vh;
}

.vert {
  right: 0;
  left: 0;
  width: 2vh;
  height: 30%;
  margin-right: auto;
  margin-left: auto;
}

.k>.vert:nth-of-type(2) {
  bottom: 0;
}

.k>.horz {
  top: 50%;
}

.a>.vert:nth-of-type(1) {
  top: 20%;
}

.a>.vert:nth-of-type(2) {
  bottom: 0;
}

.r>.horz:nth-of-type(1) {
  top: 25%;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}

.r>.horz:nth-of-type(2) {
  top: 50%;
}

.r>.vert {
  bottom: 0;
}

.g>.horz {
  top: 33%;
  width: 50%;
}

.g>.vert {
  top: 33%;
}

.t>.horz {
  top: 50%;
  width: 50%;
}

.t>.vert {
  top: 50%;
}

.t-hat {
  top: 0;
  right: 0;
  width: 50%;
  height: 10%;
}

.e>.horz:nth-of-type(1) {
  top: 33%;
}

.e>.horz:nth-of-type(2) {
  top: 66%;
}

.s>.horz:nth-of-type(1) {
  top: 33%;
}

.s>.horz:nth-of-type(2) {
  top: 66%;
  left: 0;
}

.i>.horz {
  top: 33%;
  width: 100%;
  margin: 0 auto;
}

.n>.vert:nth-of-type(1) {
  height: 30%;
  left: 33%;
}

.n>.vert:nth-of-type(2) {
  bottom: 0;
  right: 33%;
  height: 30%;
}

.space {
  width: 6vh;
}

/* Text */
/* ------------------------ */
p {
  font-family: 'Neuton', serif;
  font-size: 2.3vw;
  line-height: .95;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  margin: 0;
  transform: translate(-50%, -50%);
}