/*
 * ANIMATIONS
 * animation source: https://codepen.io/nelledejones/pen/gOOPWrK
 */
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

@keyframes hithere {
  30% { transform: scale(1.1); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/*
 * FONTS
 */
/* Ubuntu – Regular (400) */
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Regular.woff2') format('woff2'),   /* modern browsers */
         url('../fonts/Ubuntu-Regular.woff')  format('woff'),    /* fallback */
         url('../fonts/Ubuntu-Regular.ttf')   format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;          /* optional – improves perceived load speed */
}

/* Ubuntu – Italic (400) */
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Italic.woff2') format('woff2'),
         url('../fonts/Ubuntu-Italic.woff')  format('woff'),
         url('../fonts/Ubuntu-Italic.ttf')   format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Ubuntu – Bold (700) */
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Bold.woff2') format('woff2'),
         url('../fonts/Ubuntu-Bold.woff')  format('woff'),
         url('../fonts/Ubuntu-Bold.ttf')   format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Ubuntu – Bold Italic (700) */
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-BoldItalic.woff2') format('woff2'),
         url('../fonts/Ubuntu-BoldItalic.woff')  format('woff'),
         url('../fonts/Ubuntu-BoldItalic.ttf')   format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/*
 * STYLES
 */
:root {
  /*
   * solarized dark
   */
  --color-base03:    #002b36;
  --color-base02:    #073642;
  --color-base01:    #586e75;
  --color-base00:    #657b83;
  --color-base0:     #839496;
  --color-base1:     #93a1a1;
  --color-base2:     #eee8d5;
  --color-base3:     #fdf6e3;
  --color-yellow:    #b58900;
  --color-orange:    #cb4b16;
  --color-red:       #dc322f;
  --color-magenta:   #d33682;
  --color-violet:    #6c71c4;
  --color-blue:      #268bd2;
  --color-cyan:      #2aa198;
  --color-green:     #859900;

  /*
   * bounce-element props
   */
  --bounce-element-width: 300px;
  --bounce-element-x-speed: 13s;
  --bounce-element-y-speed: 7s;
  --bounce-element-transition-speed: 2.2s;
}

body {
  font-family: 'Ubuntu', sans-serif;
  background-color: var(--color-base01);
  color: var(--color-red)
}

main {
  text-align: center;
}

h1, h2, h3 {
  font-weight: 400;
}

.text-content {
  display: inline-block;
  animation: hithere 1s ease infinite;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bounce-element {
  width: var(--bounce-element-width);
  height: var(--bounce-element-width);
}

.x {
  animation: x var(--bounce-element-x-speed) linear infinite alternate;
}
.y {
  animation: y var(--bounce-element-y-speed) linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX(calc(100vw - var(--bounce-element-width)));
  }
}
@keyframes y {
  100% {
    transform: translateY(calc(100vh - var(--bounce-element-width)));
  }
}

.emoji-content {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  animation: shake 2s ease infinite;
}

.emoji-body-left-hand {
  animation: bounce2 2s ease infinite;
}

.emoji-body-head {
  animation: spin 1s infinite linear;
}