html,
body {
  height: 800px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 5%;
  height: 100%;
}

ul li {
  width: 25%;
  position: relative;
}

ul li:after {
  display: block;
  content: attr(class);
  position: absolute;
  color: #fff;
  font-size: 22px;
  right: 5px;
  bottom: 5px;
}

.vh {
  background-color: #800000;
  height: 50vh;
}

.dvh {
  background-color: #0000ff;
  height: 50dvh;
}

.lvh {
  background-color: #120f14;
  height: 50lvh;
}

.svh {
  background-color: #5fb0d5;
  height: 50svh;
}















@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:300,800');

body {
  font-family: 'Merriweather Sans', sans-serif;
}