/**********************
    	Global Fonts
***********************/

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800&display=swap');

@font-face{
	font-family: bubble;
	src: url(../fonts/bubble-font.otf);
}


/**********************
    	Global Vars
***********************/
:root {
	/* colors */
	--light-grey: #727272; 
	--light-pink: #FFEDED; 
	--grey-text:  #686666;

	/* font sizes */
	--title-font-size: 2em; 
	--main-font-size: 1.9em;
	
	/* fonts */
	--main-font: 'Gill Sans', 'Poppins', 'Microsoft Sans serif';
	--nav-font: 'Gill Sans', 'Poppins' , 'Microsoft Sans serif';
}

/**********************
    	Global Styles
***********************/

* {
    box-sizing: border-box;
}


html {
	font-size: 10px;
	font-family: var(--main-font);
	color: var(--grey-text);
}

body {
    padding: 0;
    margin: 0;
    min-width: 326px;
}


/**********************
    	Animations
***********************/

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes slide {
	0% {
		transform: translate(-100%);
		opacity: 0;
	}

	100% {
		transform: translate(0%);
		opacity: 1;
	}
}