/*
* Stylesheet for heartbeats.
*/


/* Basic Layout */

body {
	background-color: #232323;
	height: 100vh;
}

.main-container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.heart-container {
	width: 300px;
	height: 200px;
	display: flex;
	justify-content: center;
}

.text-container {
	height: 100px;
	width: 300px;
	color: white;
	color: #F4F2F6;
	text-align: center;
	font-family: 'Dosis', sans-serif;
	font-size: 20px;
}

.dial-container {
	font-size: 20px;
	bottom: 0;
}

input.dial {
	font-size: 32px !important;
	margin-top: 24px !important;
}


/* Heart */

#heart {
    position: relative;
    width: 100px;
    height: 90px;
    align-self: center;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #F364B4;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-animation-name: colorchange;
	        animation-name: colorchange;
	-webkit-animation-duration: 1.1s;
			animation-duration: 1.1s;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}


/* Animation Basics */

.animated {
  -webkit-animation-duration: 1.1s;
  		  animation-duration: 1.1s;
  -webkit-animation-fill-mode: both;
  		  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  		  animation-iteration-count: infinite;
}

/* Pulse Animation */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    		transform: scale3d(1, 1, 1);
  }

  27% {
    -webkit-transform: scale3d(1.3, 1.3, 1.3);
    		transform: scale3d(1.3, 1.3, 1.3);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    		transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    		transform: scale3d(1, 1, 1);
  }

  27% {
    -webkit-transform: scale3d(1.3, 1.3, 1.3);
    		transform: scale3d(1.3, 1.3, 1.3);
  }

  100% {
    -webkit-transform: scale3d(.95, 1, 1);
   			transform: scale3d(.95, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  		  animation-name: pulse;
}

@keyframes colorchange {
	from {
		background: #bf1c76;
	}

	9% {
		background: #F364B4;
	}

	27% {
		background: #f24ba7;
	}

	to {
		background: #bf1c76;
	}
}