/*
 * Name: twilight
 * Author: Solaria
 * Website: https://solaria.neocities.org/ 
 * /

/* overall document stuff */

  /* fonts */
@import url('https://fonts.googleapis.com/css?family=Arima&display=swap');
@import url('https://fonts.googleapis.com/css?family=Livvic&display=swap');

  /* color variables
	bg1 = dark background blue
	bg2 = lighter background blue
	acc = accent */
:root {
	--bg1: midnightblue;
	--bg2: #214BCA;
	--text: lightyellow;
	--link: rgb(255,215,40);
	--acc: orange;}
* {
	box-sizing: border-box;}


/* html elements (and those inside of classes)*/

body {
	background: var(--bg2);
	background-image: linear-gradient(var(--bg1), var(--bg2));
	background-attachment: fixed;
	color: var(--text);
	font-family: 'Livvic', arial, sans-serif;
	font-size: 1.1rem;
	line-height: 1.4em;
	margin: 0% 2%;
	padding: 0% 1%;}

i, b, em, strong {
	color: var(--acc);}

  /* lists */
ul {
	display: inline-block;
	list-style: none;
	margin: 0px 15px;
	padding: 0px;}
li {
	padding: 0.25rem 0.75rem 0.25rem 0.25rem;}
li:before {
	content: "🟄";
	padding: 0rem 0.25rem 0rem 0.5rem;}
li:nth-child(odd) {
	background: var(--bg1);
	border-radius: 1em;}
.sidebar ul {
	margin: 0px;}
.sidebar li {
	padding: 0rem 0.75rem 0rem 0.25rem;}

  /* headings */
h2, h3, h4, h5, h6 {
	margin: 0px;
	margin-top: 1em;
	font-family: arima;}

.main h3, .main h4, .main h5, .main h6 {
	margin-top: 2em;}

h1 {
	font-family: arima;
	margin: 0.6rem 0rem;
	text-align: center;
	font-size: 2.5rem;
	display: block;
	position: static;
	height: inherit;}

.main h2 {
	border-bottom: 1.5px solid var(--link);}

.main h2, .main h3 {
	color: var(--link);}

.main h4, .main h5, .main h6 {
	color: var(--acc);}

  /* table stuff */
table {
	border: 1.5px dotted var(--link);
	border-collapse: collapse;
	border-radius: 15px;
	display: inline-block;
	max-width: 100%;
	overflow: auto;}

th, tr:nth-child(even) {
	background: var(--bg1);}
td, th {
	padding: 0.1rem 1rem;}
th {
	text-align: center;
	padding: 0.5rem;}

  /* links */
a {
	font-family: arima;
	display: inline-block;
	color: var(--link);
	text-decoration: underline dotted;
	text-shadow: 1px 1px 0px var(--bg1);
	border: 1.5px solid var(--link);
	outline-offset: -2px;
	padding: 0.1em 0.5em;
	border-radius: 1em;}

a:hover, a:focus, #navigation a:hover, #navigation a:focus {
	color: var(--text);
	text-decoration: underline solid;
	outline: 3px double var(--link);
	outline-offset: 0px;
	box-shadow: 0px 0px 0.5em var(--acc) inset;
	text-shadow: 0px 0px 0.5em var(--link);}

.sidebar a, .main a, .footer a {
	padding: 0em 0.5em;
	border: 1.5px solid transparent;}

#navigation a {
	background-color: var(--bg1);
	font-size: 1.1rem;
	color: var(--link);
	text-decoration: underline dotted;
	text-shadow: 1px 1px 0px var(--bg1);
	border: 1.5px solid var(--link);
	outline: 1px solid var(--bg1);
	outline-offset: -2px;
	padding: 0.1em 0.5em;
	border-radius: 1em;
	display: inline-block;
	float: none;
	clear: both;
	margin: 0px 5px;}

h1 a {
	display: block;
	max-width: 25rem;
	margin: 0 auto;
	text-align: center;
	text-decoration: none;
	padding: 0.5em;
	border-style: none;
	box-shadow: none;
	color: var(--text);
	text-shadow: 0px 0px 0.3rem var(--link);
	letter-spacing: 0.1rem;
	font-size: 2.5rem;
	position: static;}
h1 a:before {
	content: "🟄 ";}
h1 a:after {
	content: " 🟄";}

  /* button styles */
button, select, input {
	display: inline;
	color: var(--acc);
	background: #1c309a;
	font-family: 'Arima', garamond, serif;
	font-size: 1em;
	text-shadow: 1px 1px 0px var(--bg1);
	border: 1.5px solid var(--acc);
	outline: 1px solid var(--bg1);
	outline-offset: -2px;
	padding: 0em 0.5em;
	border-radius: 1em;}

button:hover, button:focus, select:hover, select:focus, input:hover, input:focus {
	color: var(--link);
	outline: 3px double var(--link);
	outline-offset: 0px;
	box-shadow: 0px 0px 0.5em var(--acc) inset;
	text-shadow: 0px 0px 0.5em var(--acc);}

/* classes and ids */
.container {
  	position: static;
  	top: 0%;
  	left: 0%;
  	transform: none;
  	width: 100%;}

.header {
	padding: 5px;
	float: none;
	display: block;
	text-align: center;
	width: 100%;
	height: initial;
	white-space: normal;}
#navigation {
	width: 100%;
	margin: 0px;
	padding: 0px;
	overflow: visible;}

.main, .sidebar {
	text-align: left;
	background: rgba(25,25,112,0.5);
	box-shadow: 0px 0px 2rem var(--bg1) inset;
	border: 3px double var(--link);
	border-radius: 15px;}
.footer {
	float: none;
	display: block;
	text-align: left;
	margin: 0% auto;
	padding: 0px;
	width: 100%;
	max-width: 25rem;
	clear: both;
	background: transparent;}
.footer-text {
	font-size: 1.1rem;}

.row {
	display: block;
	width: 100%;}


/* title for extra narrow screens */
@media screen and (max-width: 420px) {
	.header h1 a {
		letter-spacing: 0rem;
		font-size: 2.1rem;}
}

/* phones and tablets, one column */
@media screen and (max-width: 950px) {
body {
	margin: 1% 2%;}
.header h1 {
	text-align: center;
	float: none;}
#navigation {
	text-align: center;
	width: 100%;
	display: block;
	padding: 0px;
	margin: 0px;}
#navigation h2 {
	margin: 0px;
	padding: 0px;}
#navigation a {
	display: inline-block;
	margin: 1px 2px;}
.row {
	display: block;
	width: 100%;}
.sidebar, .main {
	display: block;
	width: 100%;
	padding: 5px 20px;
	margin: 5px 0px;}
}
.column.main {
	width: 100%;}

/* computer screens and wider, two columns */
@media screen and (min-width: 950px) {
.main, .sidebar {
	float: left;
	margin: 1%;
	margin-bottom: 10px;
	overflow: auto;
	min-height: 75vh;
 	max-height: 75vh;}
.column.main {
	width: 74%;
	max-width: 900px;
	padding: 0.5rem 2rem;}
.column.sidebar {
	width: 22%;
	padding: 0.5rem 1rem;}

.header h1 {
	position: static;
	margin: 0px;
	max-height: none;}
#navigation {
	position: static;
	display: block;
	text-align: center;}
#navigation a {
  	position: static;
  	text-align: center;
	display: inline-block;}
.footer {
	display: block;
	clear: both;
	float: none;}
.mobile-only {
  	display: none;}
}

/* space */