/**
 * Base Styles
 *
 * Core typography, resets, and base layout styles.
 *
 * @package    Estylish
 * @author     Woracious
 * @since      1.0.0
 */

@import url("fonts.css");

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/

:root {
	--black: #000000;
	--white: #ffffff;
	--theme: #ed0089;
	--color4: #f7f7f7;
	--yalert: #fff266;
	--grey1: #b7b4b4;
	--grey2: #e7e7e7;
	--sourcesans: "Source Sans Pro", Helvetica, Arial, sans-serif;
	--foverdana: Verdana, Arial, Helvetica, sans-serif;
	--lato: "Lato", sans-serif;
}

/*--------------------------------------------------------------
# Reset & Base
--------------------------------------------------------------*/

html,
body {
	margin: 0;
	padding: 0;
	font-family: var(--sourcesans);
}

* {
	box-sizing: border-box;
}

ul {
	list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
	margin: 0;
	padding: 0;
	font-family: var(--lato);
	font-weight: normal;
	color: #363636;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--sourcesans);
}

p {
	font-size: 1.175rem;
	line-height: 1.675;
	font-family: var(--lato);
}

h1 {
	font-size: 4rem;
}

h2 {
	font-size: 3.2rem;
}

h3 {
	font-size: 2.8rem;
}

h4 {
	font-size: 2.4rem;
}

h5 {
	font-size: 2rem;
}

h6 {
	font-size: 1.5625rem;
}

a {
	text-decoration: none;
	color: #000000;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

.wrapper {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: auto;
	max-width: 1200px;
	margin: auto;
}

.header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 100%;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

.none {
	display: none;
}