@import url('https://fonts.googleapis.com/css2?family=Sarala&family=Rancho&family=Nova+Round&display=swap');

:root {
	--ollie-orange: rgb(255, 128, 0);
	--ollie-blue: rgb(145, 189, 242);
	--ollie-light-blue: rgb(224, 251, 255);
	--ollie-light-blue-fade: rgba(224, 251, 255, 0.9);
	--ollie-purple: rgb(131, 77, 179);
	--ollie-purple-trans: rgba(131, 77, 179, 0.15);
	--ollie-white: rgba(255, 255, 255);
	--ollie-white-fade: rgba(255, 255, 255, 0.7);

	--calum-small: 0.8rem;
	--calum-medium: 1.1rem;
	--calum-large: 1.3rem;
	--calum-larger: 1.8rem;
	--calum-even-larger: 2.0rem;
	--calum-x-large: 3rem;

	--calum-faster-transition: 0.1s;
	--calum-fast-transition: 0.35s;
	--calum-transition: 0.2s;
	--calum-medium-transition: 0.5s;
	--calum-slow-transition: 0.65s;

	--calum-smaller-gap: 0.5ch;
	--calum-small-gap: 1ch;
	--calum-gap: 2ch;
	--calum-medium-gap: 3ch;
	--calum-large-gap: 6ch;
}

/* TEXT */
body {
	font-family: Sarala;
}

h1, h2, h3, h4, h5 {
	font-family: "Nova Round";
}

h1 {
	text-align: center;
	font-size: var(--calum-x-large);
}

h2 {
	font-size: var(--calum-larger);
}

h3 {
	font-size: var(--calum-large);
}

dfn {
	font-weight: bold;
	font-style: normal;
}

button {
	font-family: Sarala;
	font-size: var(--calum-medium);
}

a:link, a:active, a:visited, a:hover {
	text-decoration: none;
}

article {
	text-align: justify;
}

article a {
	text-decoration: underline !important;
}
	
article h2, article h3, article h4, article h5{
	text-align: left;
}

q, blockquote, aside {
	font-style: italic;
}

blockquote {
	text-align: justify;
}


/* COLOUR */
body {
	background-image: linear-gradient(90deg, var(--ollie-purple-trans), var(--ollie-light-blue) 10%, var(--ollie-light-blue) 90%, var(--ollie-purple-trans));
}

a:link, a:active, a:visited, a:hover {
	color: inherit;
}

article {
	color: var(--ollie-purple);
	background-color: var(--ollie-light-blue-fade);
}


/* SIZING */
body {
	min-height: 100vh;
}

article {
	max-width: 90ch;
}

/* SPACING */
html {
	padding: env(safe-area-inset);
}

body {
	margin: 0; 			/* Stops gaps along the right/left of nav bar */
}

article {
	margin: auto;
}

aside, blockquote {
	margin-left: 2rem;
	margin-right: 2rem;
}


/* ARRANGEMENT */
body {
	position: relative;
}


/* INTERACTION */
button {
	cursor: pointer;
}


/* BORDERS */
button {
	border-radius: 0.4rem;
}

article {
	border-radius: 1rem;
}


@media only screen and (max-width: 700px){
	article {
		padding: var(--calum-gap);
		margin: 0 var(--calum-small-gap) 0 var(--calum-small-gap);
	}

	article h1 {
		font-size: var(--calum-larger);
	}

	article h2 {
		font-size: var(--calum-large);
	}

	article h3 {
		font-size: var(--calum-medium);
	}
}

@media only screen and (min-width: 701px){
	article {
		padding: var(--calum-large-gap);
		box-shadow: 0px 0px 25px 25px var(--ollie-light-blue-fade);
	}
}

.secret {
	visibility: hidden;
}

body:after {
	content: "";
	background-attachment: fixed;
	background-size: cover;
	opacity: 0.5;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: fixed;
	z-index: -10;
}