/* -----------Typography styles--------- */
/* Some base typography rules have already been declared in reset.css. Never edit reset.css - overwrite here as needed. */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

/* Import your fonts here, using the @import method. */

/* Begin with rules for mobile. Use the media queries at the bottom of the page to adjust any rule for larger screens. */

/* /////////// Defaults /////////// */
/* -----Set the base size here----- */
html {
	font-size: 16px;
}
/* -----Set the body copy font rules, and fallback rules for all text ----- */
body {
	font-family: "Jost", "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	/* this is ratio, its relative to the font size */
}

/* /////////// Body copy, Headings & Lists /////////// */
/* -------- Paragraphs ---------- */
/* Paragraph styles, including margins. Consider limiting the line lengths with a maximum width. */
p {
	font-family: "Jost", "Open Sans", Helvetica, Arial, sans-serif;
	line-height: 26px;
	margin-top: 0;
}

/* --------Headings------- */

/* Change heading typefaces, margins, letter spacing and general line heights here */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Jost", "Open Sans", Helvetica, Arial, sans-serif;
	line-height: 1.2;
	margin-top: 40px;
	margin-bottom: 25px;
}

/* Change font size and more specific rules as needed per heading type */
h1 {
	font-size: 64px;
	line-height: 1.1;
	font-weight: 200;
}
h2 {
	font-size: 40px;
	line-height: 38px;
	font-weight: 500;
}
h3 {
	font-size: 36px;
	font-weight: 200;
}

.index-head {
	font-size: 84px;
	font-family: "Jost", "Open Sans", Arial, Helvetica, sans-serif;
	font-weight: 300;
	color: var(--black);
}

/* /////////// Links //////////// */

/* -----Text links----- */
a {
	color: var(--black);
	text-decoration: none;
	font-size: 40px;
	line-height: 38px;
}

/* Hover states only work when using a mouse; focus states also work for keyboard focus */
a:hover,
a:focus {
	color: var(--red);
	transition: ease-out 400ms;
}

/* Active states will work on click, on "Enter" (with keyboard), and on tap */
a:active {
	color: var(--black);
	text-decoration: underline;
}
/* -------------- Link styles -------- */

/* ----- Button-y links ------- */
/* rules that both buttons share, like padding, corner shape, font size, line height, text decoration (underline or not) */
.primary-button,
.secondary-button {
	padding: 1.25em;
	font-size: 20px;
	display: inline-block;
	transition: all 400ms;
}

/* rules that both buttons share for their hover state  */
.primary-button:hover,
.secondary-button:hover,
.primary-button:focus,
.secondary-button:focus {
	transform: scale(1.1);
}

/* rules that are unique to primary-button */
.primary-button {
	color: var(--black);
}

/* rules that are unique to secondary-button */
.secondary-button {
	color: var(--white);
	background-color: var(--black);
}

.secondary-button:hover,
.secondary-button:focus {
	color: var(--white);
}

/* //////////// Optional Special classes /////////// */
/* Edit these and/or create classes as needed to give yourself layout options. */

/* Used to separate a group of text elements from neighbouring images, or other groups of text. Optionally, create large-padding-wrap, small-padding-wrap classes for a variety of options. */
.padding-wrap {
	padding: 0;
}

.text-centred {
	text-align: center;
}

/* ------------------------------------------------------------- */
.project-overlay {
	font-size: 18px;
	border: 2px solid var(--red);
}

/* //////////// Media queries //////////// */
/* Add and/or edit. Use to adjust any rules for larger screen sizes. padding-wrap is used here as an example - edit or delete as needed. You can edit the media queries themselves, as well as the content inside of them. For example, if you want your text rules to change at 600px instead of 768, you can edit the min-width. You can also add more "breakpoints" - more conditions where the rules will change. */