/* ----------------   GENERAL STYLESHEET   ------------------ */
@import url("https://use.typekit.net/rij4cky.css");
@import url("https://fonts.googleapis.com/css2?family=Caladea:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/* https://www.w3schools.com/css/css_pseudo_classes.asp */
/* /////////////// Typography //////////////// */

body {
	/* set your basic default text styles */
	font-family: "Nicholas", "Caladea", "Times New Roman", Times, serif;
	/* line-height: 1.4; */
	background-color: var(--black);
	color: var(--cream);
	/* font-size: 22px; */
}

h3 {
	font-family: "Nicholas", "Caladea", "Times New Roman", Times, serif;
	font-size: 50px;
	font-weight: normal;
}

h1,
h2,
h3 {
	line-height: 1.4;
	font-weight: normal;
}

p {
	/* margin-top: 1em; */
	line-height: 75%;
}
/* 
.big-type {
	font-size: 400px;
	padding: 2%;
} */

/* /////////////// Colours //////////////// */
:root {
	--black: #0e0e0e;
	--cream: #fefdd1;
	--red: #e0482b;
	--white: #ffffff;
}

/* top content */
.top-bar {
	display: flex;
	align-items: center;
	padding: 40px;
}

.left {
	/* margin: 30px; */
	/* display: inline-flex;
	/* align-items: center; */
	/* display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px; */
	/* justify-self: start;
	font-size: 18px; */
	flex: 1;
}

.right {
	flex: 1;
	text-align: right;
}

.mid {
	/* position: absolute;
	left: 50%;
	font-size: 28px; */
	/* justify-self: center;
	font-size: 28px; */
	text-align: center;
	font-size: 30px;
}

/* /////////////// Layout //////////////// */
/* https://www.w3schools.com/css/css3_shadows_box.asp */
.small-box {
	display: flex;
	width: 70px;
	height: 70px;
	background-color: var(--red);
	transition: all 0.1s ease-in;
	/* padding: 20px; */
}
.small-box:hover {
	/* animation: box-shadow 0.6s ease-in-out; */
	/* transition: 0.3s ease-in; */

	/* animation-name: in-out;
	animation-timing-function: ease-in-out;
	animation-duration: 1.2s; */
	/* transition: 0.3s ease-out; */
	width: 70px;
	height: 70px;
	/* background-color: #e0482b;
	box-shadow: #e0482b; */
	box-shadow: 10px 10px var(--red);

	/* padding: 20px; */
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 65vh;
}

.layout-right {
	position: absolute;
	bottom: 80px;
	right: 80px;
	display: flex;
	align-items: baseline;
	gap: 40px;
}

.align-boxes {
	display: flex;
	gap: 40px;
}

.fade-in {
	/* https://www.w3schools.com/css/css3_animations.asp */
	opacity: 1;
	animation-name: fade-in;
	animation-timing-function: ease-in-out;
	animation-duration: 4.2s;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* --------------------MEDIA QUERIES------------------ */

/* Starting at tablet width and larger */

@media only screen and (min-width: 769px) {
	body {
		font-size: 10px;
	}
	h1 {
		font-family: "Nicholas", "Caladea", "Times New Roman", Times, serif;
		font-size: 5.12vh;
		font-weight: normal;
	}
}

/* Starting at desktop width and larger */

@media only screen and (min-width: 1080px) {
	body {
		font-size: 22px;
	}
	h1 {
		font-family: "Nicholas", "Caladea", "Times New Roman", Times, serif;
		font-size: 225px;
		font-weight: normal;
	}
}