/* Style Settings */
@import url("//fonts.googleapis.com/css?family=Karla:400,700&display=swap");
:root {
  --bgColor: #f4eed4;
  --accentColor: #e03a3e;
  --hoverColor: #963d96;
  --font: "Karla", sans-serif;
}

body {
  background-color: var(--bgColor);
  background-image: url("images/background.png");
  text-align: center;
}

a {
  text-decoration: none;
}

#userPhoto {
  width: 96px;
  height: 96px;
  display: block;
  margin: 35px auto 20px;
  border-radius: 50%;
  border: solid var(--bgColor) 2px;
}

#userName {
  color: var(--bgColor);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  display: block;
  font-family: var(--font);
  width: 100%;
  text-align: center;
  text-shadow: 0 0 3px #ff0000, 0 0 5px #009ddc;
}

#links {
  max-width: 675px;
  width: auto;
  display: block;
  margin: 27px auto;
}

p {
  display: inline-block;
  text-decoration: underline dotted;
  background-color: var(--bgColor);
  color: var(--accentColor);
  font-family: var(--font);
  text-align: center;
  margin-bottom: 10px;
  padding: 7px;
  text-decoration: underline dotted;
  font-size: 1rem;
  transition: all 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99);
  border: solid var(--hoverColor) 3px;
}

.link {
  display: block;
  background-color: var(--bgColor);
  color: var(--accentColor);
  font-family: var(--font);
  text-align: center;
  margin-bottom: 20px;
  padding: 17px;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99);
  border: solid var(--hoverColor) 3px;
}

.link:hover {
  background-color: var(--hoverColor);
  color: var(--bgColor);
}

ion-icon {
  vertical-align: text-bottom;
  width: 1.1875em;
  height: 1.1875em;
}

.cat {
  width: 100px;
  /*width of your image*/
  height: 100px;
  /*height of your image*/
  content: url("images/cat.png");
  margin: 0;
  /* If you want no margin */
  padding: 0;
  /*if your want to padding */
}

.rainbowcat-left {
  position: absolute;
  width: 100px;
  /*width of your image*/
  height: 100px;
  /*height of your image*/
  left: 90%;
  content: url("images/rainbowcat.gif");
  margin: 0;
  /* If you want no margin */
  padding: 0;
  /*if your want to padding */
}

.rainbowcat-left-bottom {
  position: absolute;
  width: 100px;
  /*width of your image*/
  height: 100px;
  /*height of your image*/
  left: 90%;
  top: 90%;
  content: url("images/rainbowcat.gif");
  margin: 0;
  /* If you want no margin */
  padding: 0;
  /*if your want to padding */
}

.rainbowcat-right {
  position: absolute;
  width: 100px;
  height: 100px;
  right: 90%;
  content: url("images/rainbowcat.gif");
  margin: 0;
  padding: 0;
}

.rainbowcat-right-bottom {
  position: absolute;
  width: 100px;
  height: 100px;
  right: 90%;
  top: 90%;
  content: url("images/rainbowcat.gif");
  margin: 0;
  padding: 0;
}

.rainbowcat-top {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 90%;
  left: 50vw;
  right: 50vw;
  content: url("images/rainbowcat.gif");
  margin: 0;
  padding: 0;
}

.rainbowcat-bottom {
  position: absolute;
  width: 100px;
  height: 100px;
  bottom: 90%;
  left: 50%;
  right: 50%;
  content: url("images/rainbowcat.gif");
  margin: 0;
  padding: 0;
}

.pulse {
  animation-name: pulse;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.direction {
  animation-name: direction;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.roll-in-left {
  -webkit-animation: roll-in-left 2s ease-out infinite both;
  animation: roll-in-left 2s ease-out infinite both;
}

.roll-in-right {
  -webkit-animation: roll-in-right 2s ease-out infinite both;
  animation: roll-in-right 2s ease-out infinite both;
}

.roll-in-top {
  -webkit-animation: roll-in-top 2s ease-out infinite both;
  animation: roll-in-top 2s ease-out infinite both;
}

.roll-in-bottom {
  -webkit-animation: roll-in-bottom 2s ease-out infinite both;
  animation: roll-in-bottom 2s ease-out infinite both;
}

@keyframes pulse {
  from {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.75);
    opacity: 0.25;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes direction {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(0.75);
    opacity: 0.25;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-2 22:37:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-left
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-2 22:38:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-right
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-right {
  0% {
    -webkit-transform: translateX(800px) rotate(540deg);
    transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll-in-right {
  0% {
    -webkit-transform: translateX(800px) rotate(540deg);
    transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-2 22:44:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-top
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-top {
  0% {
    -webkit-transform: translateY(-800px) rotate(-540deg);
    transform: translateY(-800px) rotate(-540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll-in-top {
  0% {
    -webkit-transform: translateY(-800px) rotate(-540deg);
    transform: translateY(-800px) rotate(-540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-2 22:45:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-bottom {
  0% {
    -webkit-transform: translateY(800px) rotate(540deg);
    transform: translateY(800px) rotate(540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll-in-bottom {
  0% {
    -webkit-transform: translateY(800px) rotate(540deg);
    transform: translateY(800px) rotate(540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}