style.css

/* GENERAL */

@font-face {
	font-family: 'Pixel Operator';
	src: url('fonts/PixelOperator.woff');
}

@font-face {
	font-family: 'Pixel Operator Bold';
	src: url('fonts/PixelOperator-Bold.woff');
}
/*
* {
	margin: 0;
}
*/
html {
	scroll-behavior: smooth;
	width: 100%;
}

body {
	background-color: #fce6f5;
	margin: 0;
	width: 100%;
}

.browse {
	background-color: white;
}

svg.menu {
	position: absolute;
	width: 40px;
	height: 40px;
	right: 20px;
	top: 35px;
}

h2, p, nav > a, form, ul, figcaption {
	font-family: 'Pixel Operator', sans-serif;
	font-size: 1.6em;
}

figcaption {
	font-size: 1em;
	padding: 10px;
}

h2 {
	font-size: 2em;
}

a:link, a:visited {
	text-decoration: none;
	color: white;
}

a:hover {
	text-decoration: #f58318 wavy underline;
}

a:active {
	color: #FF35C3;
}

nav {
	display: none;
	flex-direction: column;
	gap: 1.3em;
	text-align: right;
	background-color: #4f4f4e;
}

h1 {
	font-family: "owners-xwide", sans-serif;
	font-weight: 900;
	font-style: italic;
}

h1 {
	font-size: 1.6em;
}

footer {
	display: flex;
/*	gap: 10%;*/
	text-align: center;
	font-size: 0.7em;
	padding: 30px;
	padding-top: 100px;
}

footer > a {
	width: 33%;
}

footer > a:link, footer > a:visited, footer > a:active, footer > a:hover {
	text-decoration: underline;
	color: black;
}

header {
	z-index: 1;
	background-color: #4f4f4e;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	padding: 20px;
	/*width: 100%;
	margin: 0;*/
}

/* INDEX */

div.video, div.p5 {
	display: flex;
	justify-content: center;
}

video {
	width: 100%;
}

.index {
	display: flex;
	flex-direction: column;
	margin-bottom: 50px;
}

img.star {
	position: relative;
	/*display: block;
	position: relative;
	top: 50px;
	left: 70px;*/
}

img.clouds {
	position: relative;
	right: 250px;
/*	top: 10%;*/
}

.figure {
	display: flex;
	padding-top: 80px;
	margin: auto;
}

.paragraph {
	width: 80%;
	padding: 40px;
	padding-top: 80px;
}

nav.visibility {
	display: flex;
/*	flex-direction: column;*/
}

polygon.nav:hover {
	cursor: pointer;
	fill: #FF35C3;
}

.story {
	display: flex;
	flex-direction: column;
	margin: 40px;
}


/* BROWSE */

.browse {
	display: grid;
	grid-template-columns: repeat(2, 50%);
	grid-template-areas: 
	'a b '
	'c c '
	'e f'
	'd d'
	'g h'
	'i i'
	'k l'
	'j j'
	'm n'
	'o o'
	'q r'
	'p p';

	padding-top: 50px;
	padding-bottom: 50px;
}

.a {grid-area: a;}
.b {grid-area: b;}
.c {grid-area: c;}
.d {grid-area: d;
text-align: right;}
.e {grid-area: e;}
.f {grid-area: f;}
.g {grid-area: g;}
.h {grid-area: h;}
.i {grid-area: i;}
.j {grid-area: j;
text-align: right;}
.k {grid-area: k;}
.l {grid-area: l;}
.m {grid-area: m;}
.n {grid-area: n;}
.o {grid-area: o;}
.p {grid-area: p;
text-align: right;}
.q {grid-area: q;}
.r {grid-area: r;}

.a, .f, .g, .l, .m, .r {
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.7s;
	width: 90%;
}

.b, .e, .h, .k, .n, .q {
	width: 100%;
}

.c, .d, .i, .j, .o, .p {
	margin: 20px;
	margin-top: 0;
	padding-top: 0;
}

#instructions {
	padding: 20px;
	text-align: center;
}

polygon.st0:hover {
	cursor: pointer;
}

svg.e > g > polygon.st0 {
	fill: #67d60d;
}

svg.h > g > polygon.st0 {
	fill: #1469e0;
}

svg.k > g > polygon.st0 {
	fill: #FF35C3;
}

svg.n > g > polygon.st0 {
	fill: #f58318;
}

/* QUIZ */

div.p5 {
	text-align: center;
	padding: 40px;
}

.caption {
	text-align: center;
	font-size: 0.8em;
	padding: 30px;
	margin: auto;
	padding-bottom: 0;
}

p > a:link, p > a:visited {
	color: #FF35C3;
}

.demo {
	padding: 30px;
}

/* CONTACT */
form {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 350px;
	padding: 40px;
	margin: auto;
}

.required {
	color: red;
}

.recommendation {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
/*	margin: 40px;*/
	padding: 40px;
}

fieldset {
	display: flex;
	flex-direction: column;
}

.main:hover {
	cursor: pointer;
}

.submit {
  background-color: #FF35C3; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: flex;
  margin-left: auto;
  font-size: 24px;
  font-family: 'Pixel Operator';
}

.submit:hover {
	cursor: pointer;
	opacity: 50%;
	transition-property: opacity;
	transition-duration: 1s;
}

.envelope {
	width: 70%;
	height: auto;
	margin: auto;
	/*display: flex;
	justify-content: center;*/
}

section {
	display: flex;
	flex-direction: column;
}

section > div {
	margin: auto;
}

.share {
	margin: auto;
	text-align: center;
	padding: 40px;
}

figure {
	margin: auto;
}

figcaption {
	padding-bottom: 40px;
}

/* MEDIA QUERIES */

@media (min-width: 750px) {
	.browse {
		grid-template-columns: repeat(4, 1fr);
		grid-template-areas: 
		'a b c .'
		'. d e f'
		'g h i .'
		'. j k l'
		'm n o .'
		'. p q r';
	}
}

@media (min-width: 900px) {
	.index {
		flex-direction: row;
	}

	.paragraph {
		width: 30%;
		margin-right: auto;
	}

	.figure {
		margin-left: auto;
		width: 40%;
	}

	svg.menu {
		display: none;
	}

	header {
		flex-direction: row;
		justify-content: space-between;
	}

	nav {
		display: flex;
		flex-direction: row;
		margin-top: auto;
		margin-bottom: auto;
		gap: 90px;
	}

	video {
		width: 60%;
	}

	h1 {
		font-size: 2em;
	}

	.c, .d, .i, .j, .o, .p {
		margin: 30px;
	}

	section {
		flex-direction: row;
		justify-content: center;
		gap: 40px;
		padding: 20px;
	}

	.envelope {
		width: 30%;
		height: auto;
		margin: 0;
	}

	section > div {
		margin: 0;
		margin-top: auto;
		margin-bottom: auto;
	}

	figure {
		margin: 0;
	}

	.recommendation {
		flex-direction: row;
	}

	.article {
		width: 20%;
		text-align: right;
		margin-right: 40px;
	}

	.story {
		flex-direction: row;
		padding: 40px;
		gap: 7%;
		justify-content: center;
	}

	.demo {
		width: 25%;
		padding: 0;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #383838;
	}

	.browse {
		background-color: #383838;
	}

	header, nav {
		background-color: #1469e0;
	}

	h2, p, nav > a, form, ul, figcaption {
		color: white;
	}

	footer > a:link, footer > a:visited, footer > a:active, footer > a:hover {
		color: white;
	}
}