@font-face {
	font-family: "Terminal Grotesque";
	src: url("content/fonts/terminal-grotesque-webfont.woff") format("woff"),
		url("content/fonts/terminal-grotesque-webfont.woff2") format("woff2"),
		url("content/fonts/terminal-grotesque-webfont.ttf") format("ttf");
}

@font-face {
	font-family: "Terminal Grotesque Open";
	src: url("content/fonts/terminal-grotesque_open.woff") format("woff"),
		url("content/fonts/terminal-grotesque_open.ttf") format("ttf");
}

/* - GLOBAL - */

*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0;
	scroll-margin-top: 1rem;
	scroll-snap-margin-top: 1rem;
}

:root {
	--text: black;
	--bg: #dfc9b8;
	--special:
		/*#edff00*/
		#ffdd00;
	--sunshine:
		/*#ceef13*/
		#ffcc00;
	--shadow: 0 0 10px rgba(0, 0, 0, 0.17);
	--border:
		/*#ff4015*/
		black;
	--dash: 10px dashed #ffdd00;
	--dash2: 10px dashed;
	--red: #ff4014;
	--blue: #0061e6;
	--green: #00a339;
	--pink: #ff9cbd;
	--test: 0 0 10px rgba(58, 58, 58, 0.034);
}

::selection,
::-moz-selection {
	background-color: var(--text);
	color: var(--bg);
}

html,
body {
	height: 100%;
	overflow-x: hidden;
	font-family:
		/* I use FreeSerif to make the page display as intended on Linux, 
	but I can't get it to work unless I put it first in the stack. Do you have
	another solution for this? Send me an email! */
		"FreeSerif", "Times New Roman", times, serif;
	background: var(--bg);
	color: var(--text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
	letter-spacing: -0.06em;
	border-color: var(--text);
	/* transition: 1s font-size; */
	font-feature-settings: 'kern';
	-moz-font-feature-settings: 'kern';
}


/*
div {
	outline: 2px dotted #edff00;
}
*/

.hidden {
	display: none;
}

/* – TYPOGRAPHY – */

h1,
h2 {
	font-weight: normal;
	margin-block-start: 0;
	margin-block-end: 1rem;
	font-size: 2.5rem;
}

h3 {
	all: unset;
}

p,
ul {
	line-height: 1.1;
	font-size: 1.8rem;
}


a {
	color: inherit;
	text-decoration: none;
	letter-spacing: 0;
}

p a,
.information-list a {
	text-decoration: underline;
}

p a:hover,
.information-list a:hover {
	text-shadow: 0 0 5px var(--sunshine);
	color: var(--special);
}

.indent {
	text-indent: 1em;
}

small {
	font-size: .5em;
}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}


li {
	margin: 0 1em 1em 0;
}


.gap {
	width: 1.5rem;

}


/* – SITE ELEMENTS – */

header {
	/* padding: 1rem;
	width: 100%;
	display: flex;
	justify-content: space-between; */
	padding: 1rem 1rem 3rem;
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-flow: column nowrap;
	height: calc(100vh + 2rem);
	background: var(--bg);
	margin-bottom: .6rem;
	position: relative;
	z-index: 200;
}

footer {
	position: absolute;
	bottom: 0;
	padding: 10px;
	right: 0;
	z-index: 500;
}

/*footer p{
    bottom: 0;
    width: 100%;
    background: inherit;
    padding: 10px;
    border-top: 1px solid var(--border);
    text-align: center;
}*/

#logo {
	/*padding: 2.5rem;*/
	/* background: url("content/logo/Sunday-Sites_Variable-Logo-Sun.svg") center center no-repeat;
	background-size: contain;
	margin: -1rem -3rem 0 0; */
	width: 100%;
	margin-top: 1rem;
}
/*
#logo p {
	font-size: 8.25rem;
	line-height: 0.8;
	opacity: 0;
}
*/
/* .logo {
	width: 100%;
	margin-top: 1rem;
} */

#menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	margin: 0 auto;
}

#menu a {
	/* margin: 0 0 1rem 1rem;
	padding: .5em;
	display: block;
	font-size: 4vw;
	background: var(--special);
	border-radius: 4em 3em 5em / 2.5em 3em;
	transition: .3s border-radius; */
	/* margin: 0 0 1rem 1rem; */
	padding: .5em;
	display: block;
	font-size: 1.8rem;
	border-radius: 4em 3em 5em / 2.5em 3em;
	transition: .3s border-radius;
	font-style: italic;
	letter-spacing: -0.06em;
}

#menu a:hover {
	box-shadow: 0 0 4vw 1.3vw var(--sunshine);
	border-radius: 4em 4.5em 5em / 2.5em 3em;
	transition: 1s;
	background: var(--special);
}


.page {
	padding: 1rem;

}

#a404,
#no-user {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	max-width: 1000px;
	margin: auto;
	height: 80vh;
}

#gallery {
	display: flex;
	flex-flow: wrap;
	align-content: space-between;
	width: 100%;
	gap: 7rem;
	margin: 3rem 0;
}



/* - IFRAMES - */


iframe {
	margin: 0;
	padding: 0;
	border: none;
}



/* - LANDING - */

.join {
	margin: .6rem;
	font-style: italic;
	text-align: center;
	padding: .8em;
	font-size: 2.5rem;
	line-height: .8;
	letter-spacing: -0.06em;
	/*background: var(--green);*/
	color: var(--green);
	border-radius: 50%;
	border: 1px solid var(--green);
	display: table;
	transition: .5s;
	transform: rotate(-20deg);
}

.join:hover {
	/*box-shadow: 0 0 1em var(--green);*/
	transform: rotate(-10deg);
	transition: .5s;
}


.call {
	margin: 0 1rem;
}

#landing {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#landing div {
	max-width: 38rem;
}

#intro {
	margin-bottom: 2rem;
}

#manifest {
	margin-top: 3rem;
}

#manifest ul {
	margin: 1em;
	padding: 0;
	list-style-type: decimal;
}

details {
	margin-bottom: 1rem;
}

summary {
	cursor: pointer;
	font-size: 1.5rem;
}


summary:hover {
	text-shadow: 0 0 5px var(--sunshine);
	color: var(--special);
}

.special-session {
	font-family: 'Terminal Grotesque', 'FreeSans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
	line-height: 1.2;
}


#event {
	display: block;
	/*outline: var(--dash);
	padding: 1rem;*/
	margin-bottom: 2rem;
	margin-top: -1rem;
}

#event div {
	padding: 1rem;
}

.next {
	outline: var(--dash);
}

.archive {
	margin-top: 1rem;
}

#event ul {
	font-size: 1rem;
	line-height: 2rem;
	margin-bottom: 2rem;
}

#event li {
	margin: 1em 0;
}

details p {
	margin-top: .5em;
}

#event a {
	border: 1px solid var(--border);
	border-radius: .3em;
	padding: .5rem;
	font-size: 1rem;
	background: var(--bg);
}

#event a:hover {
	background: var(--special);
	transition: .3s;
}

/* - LIVEVIEW - */

/* .onoff {
	display: none;
} */

label {
	line-height: 2;
}

input {
	background: inherit;
	border: none;
	border-bottom: 1px solid var(--border);
	padding: 3px 6px 0.5px;
	margin-left: 0.3rem;
	font-family: inherit;
	color: inherit;
	font-size: 1.5rem;
	border-radius: 0;
	width: fit-content;
}


textarea:focus,
input:focus {
	border-bottom: 2px solid var(--pink);
	/*border-color: var(--special);
	box-shadow: 0 0 1rem var(--sunshine);
	background: var(--special);*/
}

select {
	/* appearance: none; */
	outline: 0;
	background: inherit;
	font-family: inherit;
	font-size: 1.5rem;
	color: inherit;
	cursor: pointer;
	border: 1px solid var(--border);
	border-radius: 4px;
	width: 10em;
	padding: 4px;
	margin: .5em 0;
}

form button {
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 4px 10px;
	background: inherit;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	transition: .3s;
	margin-top: 1rem;
}

form button:hover {
	background: var(--pink);
}


#liveview {
	margin: 0 1rem .6rem;
	box-shadow: 0 0 0 10px var(--bg);
	outline: var(--dash2) var(--pink);
	padding: 1rem 1rem 2rem;
	text-align: center;
	position: relative;
	z-index: 500;
	background: var(--bg);
}

.liveframes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 3rem;
	position: relative;
	z-index: 500;
	background: var(--bg);
}

.livesite {
	margin: 3rem 2vw 2vw;
	width: 46vw;
}

.livesite iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 100%;
	height: 31vw;
	background: white;
}

.livesite a {
	border: 1px solid var(--border);
	border-radius: .8em;
	padding: .5rem;
	font-size: 1rem;
	margin: 0 .5rem 0 0;
	line-height: 3.5rem;
}

.livesite a:hover {
	background: var(--pink);
	transition: .3s;
}




/* - SITES - */

#sites {
	display: flex;
	flex-wrap: wrap;
	margin: -10px;
}

#sites-nodes {
	width: 100%;
	height: 100%;
	position: static;
	z-index: 100;
}



.node {
	line-height: 0;
	font-size: 6rem;
	position: fixed;
}

.node img {
	width: .8rem;
}

.node:hover .hoveritem {
	display: table;
}


.hoveritem {
	position: absolute;
	display: none;
	top: 1%;
	transform: translate(-50%, -105%);
	left: 50%;
	box-sizing: border-box;
	z-index: 100;
	box-shadow: var(--shadow);
}


.sites-item {
	width: 220px;
	/*border: 1px solid var(--border);*/
	border-radius: .5em;
	padding: 15px 10px 10px;
	margin: 10px;
	font-size: 1rem;
	line-height: 1;
	background: var(--bg);
}

.sites-item a {
	font-style: italic;
}


.smalliframe {
	width: 100%;
	height: 68%;
	margin: 0;
	margin: 6% 0;
	padding: 0;
	border: none;
	display: block;
}

.hoveritem img {
	width: 100%;
	margin: 0;
	margin: 6% 0;
	padding: 0;
	border: none;
	display: block;
}

/* .hoveritem img {
	width: 200px;
} */

/* .hoveritem a:not(.user)::after {
	content: attr(href);
} */

.user {
	text-align: right;
	border: 1px solid var(--border);
	border-radius: .3em;
	padding: 3px;
	padding-bottom: 0.5px;
	font-style: normal !important;
	height: max-content;
}

.user::before {
	content: "~";
}

.user:hover {
	background: var(--special);
	transition: .3s;
}

#_1 {
	top: 47%;
	right: 38%;
}

#_2 {
	top: 30%;
	left: 38%;
}

#_3 {
	top: 27%;
	right: 15%;
}

#_4 {
	top: 69%;
	left: 39%;
}

#_5 {
	top: 84%;
	left: 34%;
}

#_6 {
	top: 50%;
	left: 30%;
}

#_7 {
	top: 60%;
	left: 50%;
}

#_8 {
	top: 45%;
	left: 80%;
}

#_9 {
	bottom: 4%;
	right: 23%;
}


#_10 {
	bottom: 10%;
	right: 40%;
}

#_11 {
	bottom: 22%;
	right: 47%;
}

#_12 {
	bottom: 25%;
	left: 25%;
}

#_13 {
	bottom: 45%;
	left: 45%;
}

#_14 {
	bottom: 15%;
	left: 15%;
}

#_15 {
	bottom: 3%;
	right: 47%;
}

#_16 {
	top: 51%;
	right: 45%;
}

#_17 {
	top: 62%;
	right: 42%;
}

#_18 {
	top: 35%;
	right: 50%;
}

#_19 {
	bottom: 13%;
	right: 47%;
}

#_20 {
	bottom: 22%;
	right: 38%;
}

#_21 {
	bottom: 8%;
	right: 57%;
}

#_22 {
	top: 34%;
	right: 44%;
}

#_23 {
	top: 44%;
	right: 48%;
}

#_24 {
	top: 62%;
	right: 56%;
}

#_25 {
	bottom: 12%;
	right: 52%;
}

#_26 {
	top: 45%;
	right: 57%;
}

#_27 {
	bottom: 30%;
	left: 34%;
}

#_28 {
	bottom: 18%;
	left: 40%;
}

#_29 {
	bottom: 26%;
	left: 45%;
}

#_30 {
	bottom: 17%;
	right: 44%;
}

#_31 {
	right: 7%;
	bottom: 33%;
}

#_32 {
	right: 37%;
	bottom: 30%;
}

#_33 {
	right: 41%;
	bottom: 41%;
}

#_34 {
	right: 46%;
	bottom: 32%;
}

#_35 {
	right: 55%;
	bottom: 5%;
}

#_36 {
	right: 40%;
	top: 28%;
}

#_37 {
	right: 35%;
	top: 40%;
}

#_37 {
	right: 35%;
	top: 40%;
}

#_38 {
	right: 40%;
	top: 42%;
}

#_39 {
	left: 20%;
	bottom: 30%;
}

#_40 {
	left: 35%;
	bottom: 20%;
}

#_41 {
	left: 40%;
	top: 35%;
}

#_42 {
	bottom: 5%;
	right: 60%;
}

#_43 {
	top: 54%;
	right: 61%;
}

#_44 {
	bottom: 37%;
	right: 36%;
}

#_45 {
	top: 40%;
	left: 33%;
}

#_46 {
	bottom: 48%;
	right: 40%;
}

#_47 {
	top: 50%;
	right: 50%;
}

#_48 {
	bottom: 5%;
	left: 26%;
}

#_49 {
	top: 59%;
	left: 40%;
}

#_50 {
	bottom: 20%;
	right: 51%;
}

#_51 {
	top: 86%;
	left: 28%;
}

#_52 {
	top: 42%;
	right: 53%;
}

#_53 {
	top: 55%;
	left: 49%;
}

#_54 {
	top: 66%;
	right: 50%;
}

#_55 {
	bottom: 19%;
	right: 56%;
}

#_56 {
	top: 41%;
	left: 37%;
}

#_57 {
	top: 32%;
	left: 37%;
}

#_58 {
	top: 23%;
	left: 80%;
}

#_59 {
	top: 25%;
	left: 46%;
}

#_60 {
	top: 31%;
	left: 62%;
}

#_61 {
	top: 56%;
	left: 52%;
}

#_62 {
	top: 46%;
	left: 57%;
}

#_63 {
	top: 26%;
	left: 52%;
}

#_64 {
	top: 31%;
	left: 54%;
}

#_65 {
	top: 33%;
	left: 45%;
}

#userlist a {
	line-height: 2.5;
}

/* - howto - */

#howto {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0;
}

/*

.guide {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border-top: var(--dash2) var(--green);
	padding-top: 1rem;
}

*/

.guide {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background: var(--bg);
	border-radius: 1rem;
	margin: 1rem;
	padding: 2rem 1rem;
	align-items: center;
	box-shadow: var(--shadow);
}

#useful-info {
	background: var(--bg);
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 1rem;
	align-items: center;

}

.information-list {
	box-shadow: var(--shadow);
	border-radius: 1rem;
	max-width: 58rem;
	padding: 2rem;
	line-height: 1.2;
}

.information-list h2 {
	text-align: center;
	margin-bottom: 2rem;
}

.information-list li {
	font-size: 1.8rem;
}

.explanation {
	padding: 1rem;
	max-width: 38rem;
	margin-left: 2rem;
}

code {
	color: var(--bg);
	letter-spacing: 0;
	/*font-size: .8rem;*/
	font-family: 'Menlo', 'DejaVu Sans Mono', 'Monaco', 'IBM Plex Mono', 'Roboto Mono', 'Consolas', monospace;
}

code::selection,
code::-moz-selection {
	background-color: var(--bg);
	color: var(--text);
}

.code-block {
	min-width: 50%;
	/*max-width: 38rem;*/
	background: var(--text);
	padding: 0 2rem;
	margin: 1rem;
	overflow: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	border-radius: 1rem;
}

.code-block::-webkit-scrollbar {
	display: none;
}

.code-comment {
	opacity: 0.5;
}

/* – LINKS – */

#links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#links div {
	max-width: 38rem;
}

.about {
	/*border-bottom: var(--dash2) var(--green);*/
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	display: table;
}


#links li a {
	background: var(--special);
	color: var(--text);
	border-radius: .3em;
	padding: .5rem;
	line-height: 1.5;
}

#links li a:hover {
	box-shadow: 5px 5px 1em var(--sunshine);
}

/* - MEDIA QUERIES - */
@media all and (max-width: 1515px) {

	.explanation {
		width: 43%;
	}

	.code-block {
		width: 43%;
	}
}

@media all and (max-width: 1350px) {


	.guide {
		width: calc(100% - 2rem);
		padding: 1rem;
	}

	#useful-info {
		margin: 0;
	}

	.information-list {
		padding: .5em;
		width: calc(100% - 2rem);
	}

	.explanation {
		width: 100%;
		margin: -.5rem auto 1rem 0;
	}

	.code-block {
		margin: auto;
		width: 100%;
	}
}

@media all and (max-width: 1246px) and (min-width: 566px) {

	#landing div {
		margin-left: auto;
		margin-right: auto;
	}

	#event div {
		padding: 0;
	}

	.next {
		outline-offset: 1rem;
		margin-bottom: 3rem;
		margin-top: 2rem;
	}

	/*
		#intro *:not(h2), #manifest *:not(h2){
			font-size: 4.5vw;
		}

		#intro h2, #manifest h2{
			font-size: 7vw;
		}

		#landing div:not(#event) {
			max-width: 100%;
		}

		#event {
			margin: -1rem auto 1rem;
		}
*/
}

@media all and (max-width: 768px) {


	html,
	body {
		font-size: 14px;
	}

	header {
		height: auto;
		padding: 1rem;
		margin: 0;
	}

	#menu {
		margin-bottom: 5rem;
	}

	#menu a {
		padding: 0 0 .5em .5em;
	}

	#sites-nodes {
		display: none;
	}

	#event div:not(.next) {
		padding: 1em 0 0 0;
	}

	.join {
		font-size: 1.5rem;
	}

	#logo p {
		font-size: 6rem;
	}

	.livesite a {
		font-size: .9rem;
		display: table;
		line-height: normal;
		margin-top: .5em;
	}

	footer p {
		font-size: 1.5rem;
	}


}


/* @media (prefers-color-scheme: dark) {
	:root {
		--text: #765e4c;
		--bg: #151515;
		--special: #765e4c;
		--sunshine: #dfc9b8;
		--shadow: 0 0 10px rgba(0, 0, 0, 0.17);
		--border: #765e4c;
		--dash: 10px dashed #765e4c;
		--dash2: 10px dashed;
		--red: #765e4c;
		--blue: #765e4c;
		--green: #765e4c;
		--pink: #765e4c;
		--test: 0 0 10px rgba(58, 58, 58, 0.034);
}
} */