.color {
  fill: #ddd; }

.bg-color {
  fill: #300f42; }

body {
  background-color: lavenderblush; }

* {
  transition: all 0.5s;
  box-sizing: border-box; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
nav {
  text-align: center;
  width: 40em;
  margin: 5em auto 0; }

nav a {
  display: inline-block;
  background: #300f42;
  width: 31%;
  height: 5em;
  padding: 0.5em;
  position: relative;
  animation: fade-in 0.5s 0.3s backwards;
  border-radius: 10px; }
  nav a svg {
    width: 100%;
    height: 100%; }
  nav a .additional {
    width: 0;
    height: 0;
    overflow: hidden;
    bottom: 0;
    position: absolute;
    transition: all 0.3s; }
    nav a .additional p {
      transition: all 0.3s;
      width: 21em;
      background: #665072;
      position: absolute;
      bottom: 0;
      color: #ddd;
      padding: 1.2em;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
      nav a .additional p strong {
        transition: none; }
      nav a .additional p:before {
        position: absolute;
        width: 0;
        height: 0;
        display: block;
        content: "";
        border-top: 0px transparent;
        border-left: 0.6em solid transparent;
        border-right: 0.6em solid transparent;
        border-bottom: 0.6em solid #665072;
        top: -0.5em;
        left: 0.4em; }
  nav a.about-you .additional {
    left: 0; }
    nav a.about-you .additional p {
      text-align: left; }
  nav a.about-you .about {
    transform: translate(8px, 23px); }
    nav a.about-you .about .body {
      transform: translate(-374px, -422px) scale(8, 10);
      transition: all 0.4s 0.2s; }
    nav a.about-you .about .letter-a {
      transform: translate(30px, 0); }
    nav a.about-you .about .letter-b {
      transform: translate(20px, 0); }
    nav a.about-you .about .letter-o {
      transform: translate(10px, 0); }
    nav a.about-you .about .letter-t {
      transform: translate(-10px, 0); }
  nav a.about-you .you {
    transform: translate(-35px, -19px); }
    nav a.about-you .you .letter-y {
      transform: translate(10px, 0); }
    nav a.about-you .you .letter-u {
      transform: translate(-10px, 0); }
    nav a.about-you .you .head .bg-color {
      transform: translate(80px, 41px) scale(0, 0); }
    nav a.about-you .you .head .color {
      transform: translate(-172px, -82px) scale(3, 3);
      transition: all 0.5s 0.2s; }
  nav a.education .additional {
    margin-left: 6.3em; }
    nav a.education .additional p {
      position: absolute;
      left: 50%;
      margin-left: -10.5em; }
      nav a.education .additional p:before {
        left: 50%;
        margin-left: -0.6em; }
  nav a.education:hover .additional, nav a.education:focus .additional {
    margin-left: -5em; }
  nav a.education .letter-e {
    transform: translate(60px, 10px); }
  nav a.education .letter-d {
    transform: translate(40px, -5px); }
  nav a.education .letter-u {
    transform: translate(20px, 10px); }
  nav a.education .letter-c {
    transform: translate(0px, 10px); }
  nav a.education .letter-a {
    transform: translate(-10px, 0px); }
  nav a.education .letter-t {
    transform: translate(-30px, 0px); }
  nav a.education .letter-i {
    transform: translate(-20px, 4px); }
  nav a.education .letter-n {
    transform: translate(-60px, 5px); }
  nav a.education .bottom-hat-wrap {
    transform: translate(20px, 10px); }
  nav a.education .oval-wrap,
  nav a.education .oval-hole-wrap {
    transform: translate(-30px, 10px); }
  nav a.education .hat {
    transform: translate(-11px, 0) scale(1.1, 1.1); }
    nav a.education .hat .oval {
      transform: translate(-271px, -49px) scale(4, 2);
      stroke: #300f42;
      stroke-width: 1;
      transition: all 0.5s 0.2s; }
    nav a.education .hat .oval-hole {
      transform: translate(-639px, -40px) scale(8.05, 2);
      stroke: #ddd;
      stroke-width: 1;
      transition: all 0.5s 0.2s; }
    nav a.education .hat .bottom-hat {
      transform: translate(-417px, -53px) scale(12.09, 2.2);
      transition: all 0.5s 0.3s; }
    nav a.education .hat .top-hat {
      transform: translate(-799px, -297px) scale(12, 9);
      transition: all 0.5s 0.2s; }
  nav a.submit {
    position: relative; }
    nav a.submit .additional p {
      text-align: right;
      position: absolute;
      right: 0; }
      nav a.submit .additional p:before {
        right: 0.4em;
        left: auto; }
    nav a.submit .additional {
      left: auto;
      right: 0; }
    nav a.submit .letter-s {
      transform: translate(36px, 3px); }
    nav a.submit .letter-u {
      transform: translate(22px, 3px); }
      nav a.submit .letter-u .shrink {
        transform: translate(17px, 0) scale(0.5, 1);
        transition: all 0.5s 0.4s; }
    nav a.submit .letter-b {
      transform: translate(22px, -3px) scale(0.7, 1); }
    nav a.submit .letter-m {
      transform: translate(28px, -18px) scale(0.4, 1); }
    nav a.submit .letter-i {
      transform: translate(-28px, -12px); }
    nav a.submit .letter-t {
      transform: translate(-36px, 3px); }
    nav a.submit .dot {
      transform: translate(-169px, -60px) scale(3, 3);
      transition: all 0.5s 0.1s; }
    nav a.submit .arrow-head {
      transform: translate(-135px, -45px) scale(2.6, 2.43);
      transition: all 0.5s 0.3s; }
    nav a.submit .arrow-shaft {
      transform: translate(-169px, -32px) scale(3, 2);
      transition: all 0.5s 0.3s; }
    nav a.submit .container {
      transform: translate(-168px, -210px) scale(6, 6);
      transition: all 0.5s 0.3s; }
  nav a:hover, nav a:focus {
    outline: none;
    background: #665072; }
    nav a:hover .bg-color, nav a:focus .bg-color {
      fill: #665072; }
    nav a:hover .color, nav a:focus .color {
      fill: #eee8d2; }
    nav a:hover svg *, nav a:focus svg * {
      transform: none !important;
      transition: all 0.3s !important;
      stroke-width: 0 !important; }

nav:not(:has(:focus-within)) a:hover .additional,
nav a:focus .additional {
  transition: all 0.3s 0.3s;
  bottom: -6.7em;
  height: 7em;
  width: 21em;
  overflow: hidden; }
  nav:not(:has(:focus-within)) a:hover .additional p,
  nav a:focus .additional p {
    transition: all 0.3s 0.3s; }

/*# sourceMappingURL=style.css.map */