styles.css

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,700;1,400&display=swap');

/* css reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}
/* variables colors */
:root {
	--red: #fd7057;
	--green: #0ada48;
	--blue: #8376fa;
	--grey: #f5f5f5;
	--darkred: #811401;
	--darkgreen: #005c10;
	--darkblue: #0a015f;
	--darkgrey: #242222;
}
/* variables - form inputs */
:root {
	--input-border: #8b8a8b;
	--input-focus-h: 245;
	--input-focus-s: 100%;
	--input-focus-l: 42%;
}
/* fonts */
code {
	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
body {
	font-family: Rubik, sans-serif;
}

.app {
	padding: 0.2em 0.5em;
	min-height: 100vh;
}

/* Breakpoints:
320px — 480px: Mobile
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV */
@media screen and (min-width: 481px) {
	.app {
		padding: 0.2em 2em;
	}
}
@media screen and (min-width: 769px) {
	.app {
		padding: 0.2em 4em;
	}
}
@media screen and (min-width: 1025px) {
	.app {
		padding: 0.2em 6.5em;
	}
}
@media screen and (min-width: 1201px) {
	.app {
		padding: 0.2em 9em;
	}
}