html{
    background-color: #5D6C85;
    box-shadow: inset 100px 0 100px 0 rgb(71, 82, 102);
    height: 100%;
}

@keyframes shadow {
    from {
        transform: translate(0, -1.25vmin) scale(1, 1);
        background-color: rgba(0, 0, 0, 0.1);
   }
    to {
        transform: translate(0, 0) scale(1.3, 1);
        background-color: rgba(0, 0, 0, 0.05);
   }
}
@keyframes hover {
    from {
        transform: translate(0, 0);
   }
    to {
        transform: translate(0, -1.25vmin);
   }
}
@keyframes beat {
    0% {
        background-color: rebeccapurple;
        box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.3);
   }
    50%, 70% {
        background-color: #B5C6D1;
        box-shadow: 0 0 10vmin 12.5vmin rgba(176, 224, 230, 0);
   }
    100% {
        background-color: rebeccapurple;
   }
}
@keyframes wave {
    from {
        transform: rotate(15deg);
   }
    to {
        transform: rotate(80deg);
   }
}
@keyframes wobble {
    0% {
        transform: translate(-0.25vmin, 0);
        background-color: crimson;
        box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.3);
   }
    50%, 70% {
        transform: translate(0.25vmin, 0);
        background-color: mediumvioletred;
        box-shadow: 0 0 10vmin 12.5vmin rgba(220, 20, 60, 0);
   }
    100% {
        transform: translate(-0.25vmin, 0);
        background-color: rebeccapurple;
   }
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.column1 {
    top:200px;
    float: left;
    width: 60%;
    
  }
  .column2 {
    float: left;
    width: 40%;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
x {
    float:right;
    padding-right: 9vw;
    display: block;
    animation: hover 1500ms ease-in-out alternate infinite;
}
x-head {
    width: 25vmin;
    height: 12.5vmin;
    display: block;
    position: relative;
    border-radius: 6.25vmin;
    background-color: black;
    box-shadow: 0 0 0 3.25vmin white inset;
    transition: transform ease-in-out 350ms;
}
x-head::before {
    content: '';
    display: block;
    width: 4vmin;
    height: 4vmin;
    position: absolute;
    top: -10vmin;
    left: 10.5vmin;
    border-radius: 50%;
    box-shadow: 0 1vmin 0 -1.5vmin white0 0.5vmin 0 -1.5vmin white0 1vmin 0 -1.5vmin white0 1.5vmin 0 -1.5vmin white0 2vmin 0 -1.5vmin white0 2.5vmin 0 -1.5vmin white0 3vmin 0 -1.5vmin white0 3.5vmin 0 -1.5vmin white0 4vmin 0 -1.5vmin white0 4.5vmin 0 -1.5vmin white0 5vmin 0 -1.5vmin white0 5.5vmin 0 -1.5vmin white0 6vmin 0 -1.5vmin white0 6.5vmin 0 -1.5vmin white0 7vmin 0 -1.5vmin white0 7.5vmin 0 -1.5vmin white0 8vmin 0 -1.5vmin white;
}
x-head::after {
    content: '';
    display: block;
    width: 3.75vmin;
    height: 3.75vmin;
    position: absolute;
    top: 4.5vmin;
    left: 4.5vmin;
    border-radius: 1.875vmin;
    background-color: #B5C6D1;
    box-shadow: 12.25vmin 0 #B5C6D1;
    transition: inherit;
}
x-head:hover {
    transform: rotate(15deg) translate(2.5vmin, 0);
}
x-head:hover::after {
    transform: scale(1, 0.1);
}
x-body {
    width: 20vmin;
    height: 22.5vmin;
    position: absolute;
    top: 15vmin;
    left: 2.5vmin;
    display: block;
    overflow: hidden;
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    background: white;
}
x-body::after {
    content: '';
    display: block;
    width: 3.75vmin;
    height: 3.75vmin;
    position: absolute;
    top: 6.25vmin;
    left: 12vmin;
    border-radius: 50%;
    animation: beat 4500ms linear infinite;
}
x-body:hover::after {
    animation: wobble 1000ms linear infinite;
}
x-hand {
    width: 8.5vmin;
    height: 8.5vmin;
    position: absolute;
    top: 7.5vmin;
    left: 21.25vmin;
    display: block;
    border-radius: 50%;
    transform-origin: 50% 12vmin;
    box-shadow: 0 7.5vmin 0 -2.5vmin white;
    animation: wave 1000ms alternate ease-in-out infinite;
}
x-hand::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    clip-path: polygon(0% 0%, 50% 50%, 100% 0%, 100% 100%, 0% 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 2.5vmin white inset;
}
x::after {
    content: '';
    display: block;
    width: 15vmin;
    height: 3.75vmin;
    position: relative;
    top: 40vmin;
    left: 5vmin;
    border-radius: 50%;
      animation: shadow 1500ms ease-in-out alternate infinite;
}

h1, h3 {
    color:white;
    text-align:center;
    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 4s; /* Firefox < 16 */
     -ms-animation: fadein 4s; /* Internet Explorer */
      -o-animation: fadein 4s; /* Opera < 12.1 */
         animation: fadein 4s;
}

h1 {
    font-size: 5vw;
    margin-bottom:2vh;
    font-family: 'Assistant', sans-serif;
    font-weight: 700;
}

h3 {
    font-size: 3vw;
    font-family: 'Assistant', sans-serif;
    font-weight: 300;
}

.wrapper 
{
    margin:4vw;
   padding-top: 25vh;
}



  nav{
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
  nav ul{
    float: right;
    margin-right: 30px;
  }
  nav ul li{
    list-style-type: none;
    display: inline-block;
    transition: 0.7s all;
  }
  nav ul li:hover{
    background-color:rgba(181, 198, 209, 0.658);
  }
  nav ul li a{
    font-family: 'Assistant', sans-serif;
    text-decoration: none;
    color: #fff;
    padding: 24px;
    font-size: 20px;
  }


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#logo {
    margin-top: 1.5vh;
    margin-left: 3vw;
    width: 9vw;
}