html {
    padding,margin:0;
}
body {
    background-color: #464646;
    padding,margin:0;
    font-family:'BEBAS', sans-serif;
}

/** ANIMATIONS **/

.stretch {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: #ff3333;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(0.8);
    background-color: #ff3333;
    border-radius: 100%;
  }
  66% {
    background-color: #ffee4a;
  }
  100% {
    transform: scale(1.1);
    background-color: #ffee4a;
  }
}

.nudge {
  animation: 
    nudge 20s linear infinite alternate;
    border-radius: 100%;
}

@keyframes nudge {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(75px, 0);
  }
  
  80% {
    transform: translate(-75px, 0);
  }
}

/** ANIMATED BACKGROUND **/

.animated_bg {
	background: #464646; 
}

/** APPEAR **/

.appear {
    visibility: hidden;
}
.appearFade {
    visibility: hidden;
}

/** CIRCLE **/

.circle {
    background:#ffee4a;
	border-radius: 50%;
	width: 500px;
	height: 500px;
    margin:0 0 0 25px;
}

/** HEX **/

.text {
    padding:80px 160px;
    font-size:26pt;
    font-weight:600;
    letter-spacing: 0.6px;
    line-height:1.37;
}

/** FONT **/

@font-face {
    font-family:'BEBAS';
    src: url(../assets/BEBAS.TTF);
}