index.css

 @font-face {
  font-family:"Roboto Bold";
  src: url("/assets/Roboto-Bold.ttf") format("truetype");
}

@font-face {
  font-family:"Roboto";
  src: url("/assets/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family:"Zen Dots";
  src: url("/assets/ZenDots-Regular.ttf") format("truetype");
}

#title {
  text-align: center;
  padding: .25em 0;
  background: lightgray;
}

.title-name {
  font-family: "Zen Dots";
  font-weight: bold;
  font-size: 1.4em;
  white-space: nowrap;
}

h3 {
  font-family: "Roboto";
}

.btn a{
  font-family: "Roboto";
  font-weight: bold;
}

#robot {
  animation-name: wobble-hor-bottom;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
   /* ----------------------------------------------
 * Generated by Animista on 2021-5-1 21:59:54
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
@-webkit-keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}

@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}


  @media only screen and (max-width: 767px) {
    #robot {
      width: 100%;
    }

    .tite-name {
      font-size: 1em;
    }
  }

  #title {
    text-align:center;
    padding-top:2em;
  }

  #title div {
    text-align:center;
    font-size: 3em;
  }

  #title img {
    width: 3em;
    height:auto;
  }

  h3 {
    text-align:center;
    font-size: 2em; 
    padding-top: 1em;
  }

  #robo-div {
    text-align:center;
    padding:3em;
  }
  
  button {
    font-size:3em!important;
  }


/* fade in for the eye glass */
#magnifying {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
}


/* ----------------------------------------------
 * Generated by Animista on 2021-5-2 9:16:52
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

.footer {
  background-color: #33A1DE;
  margin-top: 4em;
  text-align: center;
}

.footer a {
  color: black;
  background-color: #33A1DE;
  font-family: "Roboto";
  font-size: 1.5em;
}

.footer a:hover {
  color: white;
  text-decoration: none;
}