style.css

body {
  /* styling */
  font-size: 32px;
  /* layout */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

a {
  pointer-events: none;
  transition: 0s pointer-events;
}

address {
  /* styling */
  font-size: 64px;
  /* layout */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  height: 500px;
  width: 200px;
}

div {
  /* layout of content in each letter */
  margin: 16px;
}

/* control of spacing */
h2,
h3,
h4,
ul {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 64px;
}

h3 {
  font-size: 48px;
}

h4 {
  font-size: 40px;
}

ul {
  font-size: 22px;
  margin: 16px 24px 0 24px;
}

p {
  font-size: 32px;
  text-align: justify;
}

/* -------------------------------- */

svg path {
  /* general svg settings */
  fill: none;
  stroke: white;
  transition: 0.8s;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

foreignObject {
  /* general embedded html settings */
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.8s;
}

g:hover foreignObject {
  /* show embedded html */
  visibility: visible;
  opacity: 1;
}

/* prevent premature redirection on mobile */
@keyframes delay-pointer-events {

  0%,
  99% {
    pointer-events: none;
  }
}

g:hover a {
  animation: delay-pointer-events 0.1s linear;
  pointer-events: auto;
}

/* -------------------------------- */

rect {
  /* firefox hover support */
  stroke: none;
  fill: none;
  pointer-events: all;
}

/* shape morphs */
#tim_0:hover path {
  d: path("M 0 0 l 66 0 h 66 l 67 0 l 67 0 l 67 0 l 67 0 m 0 0 h 25 l 50 0 h 50 l 50 0 h 25 m 0 0 l 139 0 h 461 v 500 h -42 l -82 0 h -42 l -82 0 h -42 l -82 0 h -42 l -82 0 h -42 l -62 0 m 0 0 h -17 l -66 0 h -34 l -66 0 h -17 m 0 0 l -67 0 h -67 l -67 0 h -133 l -66 0 v -125 l 0 -125 v -125 l 0 -125");
}

#o_0:hover path {
  d: path("M 1200 100 h 400 v 400 h -400 v -400 m 400 0 l 0 400 l -400 0 l 0 -400 l 400 0");
}

#t_1:hover path {
  d: path("M 1725 0 h 150 l 125 0 l 0 125 v 75 l 0 75 v 75 l 0 75 v 75 h -275 l -125 0 v -125 l 0 -125 v -125 l 0 -125 l 125 0");
}

#h_0:hover path {
  d: path("M 2000 0 h 133 l 134 0 h 133 l 0 125 v 375 h -57 l -114 0 h -58 l -114 0 h -57 v -500");
}

#y_0:hover path {
  d: path("M 2400 100 h 80 l 80 0 h 80 l 80 0 h 80 v 500 h -400 v -100 l 0 -100 v -100 l 0 -100 v -100");
}

#c_0:hover path {
  d: path("M 900 600 h 400 v 80 l 0 80 v 80 l 0 80 v 80 h -400 v -400");
}

#h_1:hover path {
  d: path("M 1300 500 h 133 l 134 0 h 133 l 0 125 v 375 h -57 l -114 0 h -58 l -114 0 h -57 v -500");
}

#o_1:hover path {
  d: path("M 1700 600 h 400 v 400 h -400 v -400 m 400 0 l 0 400 l -400 0 l 0 -400 l 400 0");
}

#i_1:hover path {
  d: path("M 2100 500 h 200 v 125 m -200 125 l 0 -125 v -125 m 200 125 l 0 125 v 250 h -200 v -250");
}

/* -------------------------------- */

g {
  transition: 0.8s;
}

@media (orientation: landscape) {
  svg {
    min-width: 100vw;
    max-height: calc(100vh / 1032 * 2832);
  }
}

@media (orientation: portrait) {
  svg {
    width: 100vw;
  }
  
  #tim_0 {
    transform: scale(calc(2800 / 1600)) translate(0px, -512.5px);
  }
  
  #o_0,
  #t_1,
  #h_0,
  #y_0 {
    transform: scale(calc(2800 / 1600)) translate(-1200px, -12.5px);
  }
  
  #c_0,
  #h_1,
  #o_1,
  #i_1 {
    transform: scale(calc(2800 / 1600)) translate(-700px, 87.5px);
  }
}

div.logo {
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 0;
}