@charset utf-8;

/*********************************************
	Basic Elements & Variables
*********************************************/

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;}
	
:root {
	/* Fonts */
	--primary-font: 'Newsreader', serif;
	--secondary-font:'League Spartan', sans-serif;
	
	/* Base Colors */
	--primary-light-color: #f7f7f7;
	--primary-dark-color: #10163b;
	--link-color: #2a84a7;
	--active-color: #c5349e;
	
	/* Spacing */
	--trim: 0;
	--space: 2vh;
	--half: calc(var(--space) / 2);
	--single: calc(1 * var(--space));
	--double: calc(2 * var(--space));
	--short: 6vw;
	--tall: 12vw;
	--v-offset: calc(var(--double) + 3.2rem);
	--h-offset: 32rem;
	--anchor-offset: calc(var(--space) + 3.2rem);}
	
html {
	font-size: 100%;
  overflow-y: auto;
	width: 100%;
	height: 100%;}
	
body {
	background-color: var(--primary-light-color);
	color: var(--primary-dark-color);
	font-family: var(--primary-font);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.75;
	text-rendering: geometricPrecision;
	width: 100%;
	height: 100%;}
	
a:focus,
button:focus {
	outline: var(--primary-dark-color) 1px dotted;
	outline-offset: 2px;}

a {
	text-decoration: underline wavy 1px;
	text-underline-offset: 0.33rem;}
	
a, 
a:link, 
a:visited {
	color: var(--link-color);
	text-decoration-color: var(--link-color);}

a:active, 
a:hover {
	color: var(--active-color);
	text-decoration-color: var(--active-color);}
	
a > * {
	cursor: pointer;}

a img {
	border: 0;}
	
img {
	display: block;
	-ms-interpolation-mode: bicubic;
	margin: 0;
	max-width: 100%;
	height: auto;
	transition: 0.4s;
	-webkit-transition: 0.4s;}
	
button {
	line-height: 0;}
	
ul {
	padding-left: 0;}

ul,
li {
	list-style-type: none;}
	
/*********************************************
Colors for Testing
*********************************************/

/*header, footer {background-color: rgb(238, 137, 137);}

section {background-color: rgb(255, 209, 124);}

article {background-color: rgb(245, 232, 130);}

.summary {background-color: rgb(186, 234, 122);}

feature {background-color: rgb(123, 181, 223);}

li {background-color: rgb(212, 101, 218);}

p {background-color: rgb(252, 160, 193);}

h2,h3,ul {background-color: rgb(154, 123, 205);}*/

/*********************************************
	Type Sizes
	Major Second 1.125 > Perfect Fourth 1.333 
	https: //type-scale.com/
*********************************************/
	
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	clear: both;
	font-weight: normal;
	line-height: 1.3;}
	
h1 {
	font-size: clamp(1.8rem, calc(2.5 * 2vw), 4.2rem);}

/*h2 {
	font-size: clamp(1.6em, 2vw, 3.2rem);}*/

/*h3 {
	font-size: clamp(1.125rem, calc(.95 * 2vw), 1.8rem);}*/
	
h1 {
	font-size: clamp(1.6em, 2vw, 3.2rem);}

h2 {
	font-size: clamp(1.125rem, calc(.95 * 2vw), 1.6rem);}
	
p,
button,
ul,
dl {
	font-size: clamp(1rem, 2vw, 1.33rem);}
	
h2 {
	display: inline;}
	
figcaption {
	font-size: clamp(.8rem, 2vw, 1.2rem);}
	
small {
	font-size: 0.9rem;}
	
sup,
sub {
	font-size: 0.75rem;}

/*********************************************
	Type Styles & Alignment
*********************************************/

h1,
h2,	
h3, 
h4,
button {
	font-family: var(--secondary-font);
	font-weight: 900;}
	
h1,
h2 {
	color: var(--accent-2);}

h1 {
	filter: drop-shadow(var(--light-shadow));}	

h2 {
	margin-bottom: calc(.5 * var(--half));}
	
strong,
dt {
	font-weight: 600;}
	
address {
	font-style: normal;}
	
em {
	color: var(--accent-1);
	font-style: normal;
	font-weight: 600;}
	
figcaption {
	font-style: normal;
	margin-top: .8rem;}

h1,
h2,
nav a,
button,
li a {
	text-decoration: none;
	text-transform: uppercase;}

.center {
	margin-right: auto;
	margin-left: auto;}
	
h1,
figcaption,
footer p,
header p {
	text-align: center;}
	
/*********************************************
	Buttons
*********************************************/

button {
	border-radius: 42px;
	font-family: inherit;
	padding: clamp(1.8rem, var(--space), 2.32rem);}
	
a button,
a:link button,
a:visited button {
	background-color: var(--link-color);
	color: var(--primary-light-color);}
	
a:active button,
a:hover button {
	background-color: var(--active-color);}

/*********************************************
	Site Structure
*********************************************/

#livearea,
main {
	display: grid;}
	
#livearea > *,
section,
article,
dl,
ul,
li a {
	display: flex;
	flex-direction: column;}
	
#livearea > *,
ul,
button {
	flex: 100%;}
	
#livearea,
section {
	row-gap: var(--double);}
	
article {
	row-gap: var(--single);}
	
header,
article,
footer {
	width: clamp(300px, 80vw, 600px);}
	
article {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-items: stretch;
	row-gap: var(--single);}
	
/*********************************************
	Header & Navigation
*********************************************/

header,
hgroup {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;}

header {
	margin-top: var(--single);
	row-gap: var(--single);}
	
hgroup {
	row-gap: var(--single);}
	
header figure img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	outline: .5rem dotted var(--accent-2);
	outline-offset: .5rem;
	width: clamp(300px, 20vw, 600px);
	height: auto;}
	
/*********************************************
	Content Area
*********************************************/
	
/*dl h2 span {
	aspect-ratio: 1 / 1;
	background-color: var(--accent-1);
	border-radius: 50%;
	color: var(--primary-light-color);
	font-size: 75%;
	filter: drop-shadow(var(--dark-shadow));
	margin-right: .25rem;
	padding: 4px 8px;}*/

dl {
	row-gap: var(--single);}

ul {
	row-gap: var(--half);}

dl > div {
	margin: var(--half) 0;}

dd {
	display: flex;
	flex-direction: column;
	row-gap: var(--single);}
	
dd ul {
	padding-left: var(--double);}
	
figure img {
	border-radius: 21px;}
	
.divider {
	background: transparent url("img/line.png") repeat-x center left;
	display: flex;
	flex: 1;
	align-content: center;
	justify-content: center;
	width: 100%;}
	
.divider h2 {
	background-color: var(--primary-light-color);
	padding: 0 1rem;}
	
/*********************************************
	Footer & Copyright
*********************************************/

footer,
footer div {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	row-gap: var(--half);}
	
footer {
	margin-top: var(--single);
	margin-bottom: var(--double);}
	
footer div {
	flex: 100%;}

footer p {
	line-height: 1.33rem;}