@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");

:root {
  --almond: #e5d5c7;
  --light-almond: #ece0d5;
  --umber: #725e54;
  --blue-munsell: #1b9aaa;
  --oxford-blue: #001427;
  --rich-black: #0d1321;

  font-family: Oswald, Helvetica, sans-serif;
}

* {
  padding: 0px;
  margin: 0px;
  color: var(--umber);
  /* background-color: var(--almond); */
}

a {
  text-decoration: none;
}

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    "a a a b"
    "c d d b"
    "c d d b"
    "c e e e";
  background-color: var(--almond);
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--light-almond);
  text-rendering: geometricPrecision;
  font-size: large;
  font-weight: 700;
  color: var(--umber);
  background-color: var(--light-almond);
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.55, 0.2),
    box-shadow 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  transform-origin: 50% 50%;
  text-shadow: 0em -0.05em 0em rgba(255, 255, 255, 0.5);
  box-shadow: 0em -0.05em 0em rgba(255, 255, 255, 0.5);
}

.item:hover {
  transform: scale(1);
  box-shadow: 0em -0.2em 0em rgba(255, 255, 255, 0.5);
}

#a {
  grid-area: a;
}
#b {
  grid-area: b;
  writing-mode: vertical-lr;
  font-size: 5rem;
}
#c {
  grid-area: c;
}
#d {
  grid-area: d;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 1fr 1fr;
}
#d h1 {
  align-self: end;
  justify-self: center;
  font-size: 6rem;
}
#d span {
  align-self: start;
  justify-self: center;
}
#socials {
  align-self: start;
  justify-self: center;
  font-size: xx-large;
  display: flex;
  width: 5em;
  justify-content: space-between;
  align-items: center;
  transition: text-shadow 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}
#socials > a > i {
  transition: filter 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}
#socials > a > i:hover {
  filter: drop-shadow(0px 0.1em 0.05em rgb(13, 19, 33, 0.3));
}
#e {
  grid-area: e;
}