@import url('https://fonts.googleapis.com/css2?family=Handlee&family=Lacquer&display=swap');

/* Defaults */
* {
	margin: 0;
	padding: 0;
	font-size: 12pt;
}

h1 {
	font-size: 30pt;
}

h2 {
	font-size: 24pt;
}

sub {
	font-size: 75%;
}

a {
	text-decoration: none;
	color: #000;
}

ul {
	list-style: none;
}

body {
	font-family: 'Courier New', monospace;
}

nav {
	background-color: #000;
	display: grid;
	grid-template-areas: "home zone .";
	grid-template-columns: 1fr 2fr 1fr;
	padding: 0.5% 2%;
}

#nav-home {
	grid-area: home;
}

#nav-home-dev {
	font-size: 30pt;
}

#nav-zone {
	font-style: italic;
	grid-area: zone;
	text-align: center;
}

.nav-text {
	color: #fff;
	font-size: 45pt;
}

.nav-text span {
	font-size: 45pt;
}

#wrapper {
	padding: 0% 2%;
}

#wrapper a {
	text-decoration: underline;
}

.section h1, .section h2 {
	text-align: center;
}

.section {
	padding: 12pt;
}

.section:nth-child(even) {
	border: 3pt solid #000;
}

.section-panel ul {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	row-gap: 16pt;
	column-gap: 16pt;
}

.section-panel li {
	padding: 12pt;
	font-size: 16pt;
	background-color: #BBB;
	border-radius: 10pt;
}

#wrapper .section-panel a {
	font-size: 16pt;
	padding: 12pt;
	text-decoration: none;
}

iframe {
	width: 75%;
	padding: 0 12.5%;
}

img {
	border: 3pt solid #BBB;
}

.img-caption {
    grid-area: img;
    font-style: italic;
	padding: 12pt;
}

.img-caption p {
	font-size: 10pt;
}

.img-caption a {
	font-size: 10pt;
}

/* Danger */

.danger-font {
	font-family: "Lacquer";
}

/* Indie */

.indie-font {
	font-family: "Handlee", cursive;
	font-weight: bold;
}

.indie-artist {
        display: grid;
        grid-template-areas:
                "title title"
                "text img";
}

.indie-artist h1 {
        grid-area: title;
}

.indie-artist p {
        grid-area: text;
}

/* Writing */

.writing-font {
	font-family: cursive;
	font-weight: bold;
}

#writing-piece {
	border: none;
}