:root {
	--nav-height: 65px;
	--copyright-height: 13px;
	--select-border: white;
	--select-focus: blue;
	--select-arrow: var(--select-border);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	min-height: 100%;
}

body {
	font-family: 'Pinkend';
	margin: 0px;
}

div.hide {
	display: none;
}

figure {
	padding: 0;
	margin: 0;
	border: 0;
}

select {
	/* A reset of styles, including removing the default dropdown arrow */
	appearance: none;
	/* Additional resets for further consistency */
	background-color: transparent;
	border: none;
	padding: 0 1em 0 0;
	margin: 0;
	width: 100%;
	font-family: inherit;
	font-size: inherit;
	cursor: inherit;
	line-height: inherit;
}

.select {
	color: white;
	width: 100%;
	min-width: 15ch;
	border: 1px solid var(--select-border);
	border-radius: 5px;
	padding: 0.25em 0.5em;
	font-size: 1.25rem;
	cursor: pointer;
	line-height: 1.1;
	display: grid;
}

.select::after {
	content: "";
	width: 0.8em;
	height: 0.5em;
	background-color: var(--select-arrow);
	clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

.select {
  /* ...existing styles */
  grid-template-areas: "select";
}

select,
.select:after {
	grid-area: select;
}

.select {
	align-items: center;
}

.select:after {
	justify-self: end;
}

#calendars {
	color: white;
}

.crossfade {
	height: 100%;
	width: 100%;
	display: grid;
}

.crossfade > figure {
	animation: imageAnimation 48s linear infinite 0s;
	backface-visibility: hidden;
	background-size: cover;
	background-position: center center;
	color: transparent;
	height: 100%;
  	grid-column: 1;
	grid-row: 1;
	opacity: 0;
	width: 100%;
	z-index: 0;
}
			  
@keyframes imageAnimation {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
	}

	8% {
		animation-timing-function: ease-out;
		opacity: 1;
	}

	17% {
		opacity: 1
	}

	25% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
}

.container {
	height: 100%;
	width: 100%;
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
}

ul {
	padding: 0px;
}

.parent {
	width: auto;
	height: auto;
	overflow: hidden;
	white-space: nowrap;
}

.say-no-to-social {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 25px;
	padding-top: 30px;
}

.social.image {
	width: 4.5vmin;
	text-align: right;
}

.social.text {
	text-align: center;
	font-size: 5vmin;
}

.email .spacer {
	text-align: right;
}

.email {
	text-align: center;
	color: #ffffff
}

.anti-social {
	width: 5vmin;
	height: 5vmin;
	font-size: 5vmin;
}

.copyright {
	position: fixed;
	width: 100%;
	text-align: center;
	bottom: 10px;
	color: #ffffff;
	font-size: 10px;
}

.center-text {
	width: 100%;
	text-align: center;
}

.shit {
	color: #ffffff;
	font-size: clamp(1.125rem, 0.8693rem + 0.6818vw, 3rem);
	text-shadow: 2px 2px black;
	margin: auto;
	width: 100%;
}

.list {
	display: flex;
	flex-direction: row;
}

.spacer {
	width: 100%;
	justify-items: center;
}

@media only screen and (max-width: 600px) {
	div.shit {
		display: none;
	}
}

@media only screen and (max-width: 600px) {
	div.image-text {
		display: none;
	}
}

.imageContainer {
	max-width: 100%;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.image {
	max-width: 100%;
	height: auto;
}

.image-text {
	text-align: center;
	color: #ffffff;
	text-shadow: 2px 2px black;
}

div.shit li + li {
	margin-top: 5px;
}

section {
	height: 100dvh;
	scroll-snap-align: start;
	display: flex;
}

div.section {
	height: 100%;
	width: 90%;
	padding-top: calc(var(--nav-height) + 3vh);
	padding-bottom: calc(var(--copyright-height) + 3vh);
	min-height: 0;
}

#about .content {
	display: flex;
	flex-direction: column;
}

#about img {
	object-fit: contain;
	min-height: 0;
}

.responsive-text {
	height: 100%;
	max-height: 100%;
}

div.section .content {
	height: 100%;
	width: 100%;
}

div.heading .title {
	font-size: 6vmin;
	color: #e0e0e0;
}

section:nth-child(1) {
	background-size: cover;
	background-color: rgba(10, 10, 10, .5);
	background-blend-mode: multiply;
}

@media screen and (orientation: portrait) {
	section:nth-child(1) {
	}

	.crossfade > figure:nth-child(1) {
		background-image: url('images/show_us_what_democracy_looks_like_portrait.jpg');
	}

	.crossfade > figure:nth-child(2) {
		animation-delay: 6s;
		background-image: url('images/did_you_really_portrait.jpg');
	}

	.crossfade > figure:nth-child(3) {
		animation-delay: 12s;
		background-image: url('images/hands_off_portrait.jpg');
	}

	.crossfade > figure:nth-child(4) {
		animation-delay: 18s;
		background-image: url('images/rivian_is_hiring_portrait.jpg');
	}

	.crossfade > figure:nth-child(5) {
		animation-delay: 24s;
		background-image: url('images/weather_app_portrait.jpg');
	}

	.crossfade > figure:nth-child(6) {
		animation-delay: 30s;
		background-image: url('images/stop_firing_veterans_portrait.jpg');
	}

	.crossfade > figure:nth-child(7) {
		animation-delay: 36s;
		background-image: url('images/stop_ice_portrait.jpg');
	}

	.crossfade > figure:nth-child(8) {
		animation-delay: 42s;
		background-image: url('images/this_is_what_democracy_looks_like_portrait.jpg');
	}

	section:nth-child(2) {
		background-image: url('images/about_background_portrait.jpg');
	}
	
	section {
		flex-direction: column;
		justify-content: center;
		align-items: center; 
	}
	
	div.section {
		display: flex;
		flex-direction: column;
	}

	div.section .heading {
		padding-bottom: 4vh;
	}
	
	div.section .content {
		min-height: 0;
		align-content: center;
	}

	div.description {
		display: none;
	}
	
	.heading {
	}
	
	.menu-item {
		font-size: 3.0vmin;
	}
	
	.event > .event-time,
	.event > .event-time::before {
		font-size: 4vmin;
	}
}

@media screen and (orientation: landscape) { 
	section:nth-child(1) {
	}

	.crossfade > figure:nth-child(1) {
		background-image: url('images/tell_us_what_democracy_looks_like_landscape.jpg');
	}

	.crossfade > figure:nth-child(2) {
		animation-delay: 6s;
		background-image: url('images/social_security_landscape.jpg');
	}

	.crossfade > figure:nth-child(3) {
		animation-delay: 12s;
		background-image: url('images/people_landscape.jpg');
	}

	.crossfade > figure:nth-child(4) {
		animation-delay: 18s;
		background-image: url('images/without_science_landscape.jpg');
	}

	.crossfade > figure:nth-child(5) {
		animation-delay: 24s;
		background-image: url('images/immigrants_landscape.jpg');
	}

	.crossfade > figure:nth-child(6) {
		animation-delay: 30s;
		background-image: url('images/defend_democracy_landscape.jpg');
	}

	.crossfade > figure:nth-child(7) {
		animation-delay: 36s;
		background-image: url('images/no_human_is_illegal_landscape.jpg');
	}

	.crossfade > figure:nth-child(8) {
		animation-delay: 42s;
		background-image: url('images/this_is_what_democracy_looks_like_landscape.jpg');
	}

	section:nth-child(2) {
		background-image: url('images/about_background_landscape.jpg');
	}

	section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	div.section {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	div.section .title {
		padding-bottom: 4vh;
	}
	
	section:nth-child(even) div.section {
		flex-direction: row;
	}

	section:nth-child(odd) div.section {
		flex-direction: row-reverse;
	}

	div.section .heading,
	div.section .content {
		flex: 1 1 0px;
		min-height: 0;
		width: 0;
	}
	
	section:nth-child(even) div.heading,
	section:nth-child(odd) div.content {
		margin-right: 2vw;
	}

	section:nth-child(odd) div.heading,
	section:nth-child(even) div.content {
		margin-left: 2vw;
	}

	div.heading {
		flex-basis: 50%;
		flex-grow: 1;
	}

	div.content {
		flex-basis: 50%;
		flex-grow: 1;
		align-content: center;
	}

	div.description {
		display: block;
		color: white;
		font-size: 3.5vh;
		line-height: 1.5;
	}

	.menu-item,
	.text {
		font-size: 2.6dvmin;
	}

	.event > .event-time,
	.event > .event-time::before {
		font-size: 2vmin;
	}
}

section:nth-child(2) {
	background-size: cover;
	background-color: rgba(10, 10, 10, .8);
	background-blend-mode: multiply;
}

section:nth-child(2) .parent {
	width: 100%;
	height: 100%;
	display: flex;
}

section:nth-child(3) {
	background-image: url('billionaires.jpg');
	background-size: cover;
	background-color: rgba(10, 10, 10, .8);
	background-blend-mode: multiply;
}

section:nth-child(4) {
	background-image: url('protest-articles.jpg');
	background-size: cover;
	background-color: rgba(10, 10, 10, .8);
	background-blend-mode: multiply;
}

section:nth-child(5) {
	background-image: url('wolves-calendar.jpg');
	background-size: cover;
	background-color: rgba(10, 10, 10, .8);
	background-blend-mode: multiply;
}

div.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#articles div.spacer.right {
	max-height: calc(100% - 125px);
}

.spacer {
	justify-items: center;
	height: 100%;
	width: 100%;
	align-content: center;
	margin-left: 5px;
	margin-right: 5px;
	color: white;
}

.spacer.left,
.spacer.right {
	margin-left: 5%;
	margin-right: 5%;
	height: 75vh;
	max-height: 75vh;
	flex: 1 1 0px;
	width: 0;
}

.about {
	background-color:  rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(5px);
	background-size: cover;
	border-radius: 10px;
	margin: 0px;
	border: 0px;
	padding: 10px;
	text-shadow: 1px 1px black;
	line-height: 1.5;
	font-size: 18px;
}

.calendar {
	height: 100%;
	width: 100%;
	padding: 0px;
	margin-bottom: 2vh;
	backdrop-filter: blur(5px);
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	overflow-x: hidden;
	border-width: 2px;
	border-color: silver;
	scrollbar-color: silver;
	border-radius: 0px 0px 5px 5px;
	border-style: solid;
}

.date {
	background-color: transparent;
	color: white;
	border-radius: 5px;
	margin-left: 5px;
	margin-right: 5px;
	text-align: center;
	font-weight: bold;
	border-width: 1px;
	border-color: white;
}

.event.ours {
	background-color: #85C6D8;
	color: black;
}

.event.not_ours {
	background-color: #426AA2;
}

.event {
	border-radius: 5px;
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	cursor: pointer;
}

.event > .event-title {
	white-space: nowrap;
	text-overflow: ellipsis;
	width: calc(98%);
	overflow: hidden;
	margin-left: 10px;
	margin-right: 5px;
	margin-top: 10px;
	margin-bottom: 5px;
	font-weight: bold;
}

.tesla::before {
	content: "🧟";
	margin-right: 3px;
}

.climate::before {
	content: "⛈️";
	margin-right: 3px;
}

.pollution::before {
}

.online::before {
	content: "💻";
	margin-right: 3px;
}

.protest::before {
	content: "✊";
	margin-right: 3px;
}

.event > .event-time {
	white-space: nowrap;
	text-overflow: ellipsis;
	width: calc(100%);
	overflow: hidden;
	margin-left: 5px;
	margin-right: 5px;
	margin-left: 10px;
	margin-bottom: 5px;
}

.event > .event-time::before {
	content: "🕐";
	margin-right: 3px;
}

	color: #a6a6a6;
}

.heading {
	font-size: 7vmin;
}

.menu-item {
	color: #ffffff;
}

.menu-item[href="#home"] {
	position: fixed;
	left: 20px;
}

.text {
	color: #ffffff;
	line-height: 1.5;
}

div.our-events, div.our-allday-events {
	background-color: palegreen;
	color: black;
	padding-left: 5px;
	border-radius: 3px;
}

div.other-events {
	color: white;
}

div.other-allday-events {
	color: white;
	border-radius: 3px;
	background-color: #3788d8;
}

div.legend-spacer {
	height: 15px;
}

a.thankyou-link:link,
a.thankyou-link:visited,
a.thankyou-link:hover,
a.thankyou-link:active,
a.download-link:link,
a.download-link:visited,
a.download-link:hover,
a.download-link:active {
	color: lightblue;
}

fieldset {
	margin-bottom: 50px;
}

.fc-theme-standard .fc-popover {
	background-image: url('event.jpg');
	background-size: cover;
	overflow-y: scroll;
	height: 80%;
	width: 80%;
	border-width: 2px;
	border-radius: 5px;
}
	
.popup {
	position: fixed;
	overflow: auto;
	padding: 0px;
	margin: 0px;
	background-image: url('event.jpg');
	background-size: cover;
	border-color: lightgray;
	color: white;
	max-height: 80%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 5px;
	overflow-y: scroll;
	font-weight: bold;
}

.popup-content {
	margin: 10px 10px 10px 10px;
}

div#popup-alarm-content {
	line-height: 1.5;
	text-align: center;
}

.popup-row {
	display: flex;
	margin-bottom: 5px;
}

.popup-icon {
	height: 16px;
	min-width: 16px;
	max-width: 16px;
	width: 16px;
	margin-right: 10px;
}

.popup-icon.title {
	margin-top: 3px;
}

.popup-title {
	font-weight: bold;
	font-size: 3.0vmin;
	margin-right: 20px;
}

#popup-description-container {
	overflow-x: hidden;
}

#popup-description {
	line-height: 1.25;
	white-space: pre-wrap;
	min-width: 0;
}

dialog a:any-link,
dialog a:any-link:link,
dialog a:any-link:visited,
dialog a:any-link:hover,
dialog a:any-link:active {
	color: lightblue;
}

#popup-description a:link,
#popup-description a:visited,
#popup-description a:hover,
#popup-description a:active {
	color: lightblue;
}

.popup-exit {
	top: 8px;
	right: 8px;
	position: fixed;
	color: red;
	font-size: 20px;
}

input:focus,
textarea:focus,
select:focus,
a:focus,
textarea:focus,
input:focus,
*:focus {
	outline: none;
}

.articles {
	border-style: solid;
	border-width: 2px;
	border-radius: 5px;
	border-color: lightgray;
	border-width: 2px;
	border-style: solid;
	overflow-y: scroll;
	max-height: 100%;
}

article {
	padding: 10px;
}

article div.horiz {
	align-items: stretch;
}

article div.vert {
	align-items: stretch;
}

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

article div.title {
	font-size: 3vmin;
	font-weight: bold;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	margin-bottom: 5px;
}

article div.description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin-bottom: 10px;
	color: #cccccc;
}

article div.url {
	color: lightblue;
	
}

img.article {
	width: 20vmin;
	height: 20vmin;
	margin-left: 5px;
	border-color: lightgray;
	border-style: solid;
	border-width: 1px;
}

@font-face {
	font-family: Pinkend;
	src: url("./Pinkend.otf") format("opentype");
}

@font-face {
	font-family: 'icomoon';
	src:  url('fonts/icomoon.eot?6swhhz');
	src:  url('fonts/icomoon.eot?6swhhz#iefix') format('embedded-opentype'),
	  url('fonts/icomoon.ttf?6swhhz') format('truetype'),
	  url('fonts/icomoon.woff?6swhhz') format('woff'),
	  url('fonts/icomoon.svg?6swhhz#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  
  .icon-tiktok:before {
	content: "\e900";
	color: #fff;
  }
  .icon-pinterest:before {
	content: "\e901";
	color: #fff;
  }
  .icon-facebook:before {
	content: "\e902";
	color: #fff;
  }
  .icon-map-marker:before {
	content: "\e903";
	color: #fff;
  }
  .icon-mail-envelope:before {
	content: "\e904";
	color: #fff;
  }
  .icon-instagram:before {
	content: "\e905";
	color: #fff;
  }
  .icon-x:before {
	content: "\e906";
	color: #fff;
  }
  
  .icon-x::after,
  .icon-tiktok::after,
  .icon-instagram::after,
  .icon-facebook::after,
  .icon-pinterest::after {
	content: "";
	width: 3px;
	height: 141.421356%;
	top: -20.710678%;
	display: block;
	background: red;
	left: 50%;
	transform: translate(250%, -90%) rotate(45deg);
}

fieldset {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
  border: none;
  min-width: 0;
  background-color: transparent;
}

fieldset legend {
  margin: 0 0 1.5rem;
  padding: 0;
  width: 100%;
  float: left;
  display: table;
  font-size: 1.5rem;
  line-height: 140%;
  font-weight: 600;
  color: #333;
}

fieldset legend + * {
	clear: both;
}

body:not(:-moz-handler-blocked) fieldset {
	display: table-cell;
}

.toggle {
	margin: 0;
	box-sizing: border-box;
	font-size: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
}

.toggle input {
	width: 0;
	height: 0;
	position: absolute;
	left: -9999px;
}

.toggle input + label {
	width: 100%;
	margin: 0;
	padding: 0.5rem 2rem;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	border: solid #C0C0C0;
	background-color: transparent;
	font-size: 1rem;
	line-height: 140%;
	font-weight: 600;
	color: white;
	text-align: center;
	box-shadow: 0 0 0 rgba(255, 255, 255, 0);
	transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.toggle input + label:first-of-type {
	border-radius: 5px 0 0 0;
	border-width: 2px 1px 0px 2px;
}

.toggle input + label:last-of-type {
	border-radius: 0 5px 0 0;
	border-width: 2px 2px 0px 1px;
}

.toggle input:checked + label {
	color: #FFF;
	border-color: #C0C0C0;
}

.toggle input:checked + label:first-of-type {
	background-color: #85C6D8;
}

.toggle input:checked + label:last-of-type {
	background-color: #426AA2;
}

.toggle input:focus + label {
	outline: dotted 1px #CCC;
	outline-offset: 0.45rem;
}

@media (max-width: 800px) {
	.toggle input + label {
		padding: 0.75rem 0.25rem;
		flex: 0 0 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

#logo {
	height: 6vmin;
	min-height: 30px;
	width: 6vmin;
	min-width: 30px;
}

.navbar {
	position: absolute;
	top: 0;
	background-color: transparent;
	color: #FFF;
	height: 75px;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding-left: 2vw;
	padding-right: calc(var(--scrollbar-width) + 2vw);	
}

div.logo {
	display: contents;
}

div.logo > a {
	display: contents;
}

div.logo > a > img {
	z-index: 99;
}

.menu {
    position: absolute;
    top: 0;
    left: 0;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
    width: 100%;
}

.menu > li {
	margin: 0 1rem;
	overflow: hidden;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0.5em 0;
	width: 100%;
	color: white;
	background-color: #222;
}

.menu-button-container {
    display: flex;
	height: 100%;
	width: 30px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#menu-toggle {
	display: none;
}

#menu-toggle ~ .menu li {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-button,
.menu-button::before,
.menu-button::after {
	display: block;
	background-color: #fff;
	position: absolute;
	height: 3px;
	width: 30px;
	transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
	border-radius: 2px;
	z-index: 99;
}

.menu-button::before {
	content: '';
	margin-top: -8px;
}

.menu-button::after {
	content: '';
	margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
	margin-top: 0px;
	transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
	background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
	margin-top: 0px;
	transform: rotate(-405deg);
}

#menu-toggle:checked ~ .menu li {
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu > li > a {
	text-decoration: none;
}

#hidden-outer-div {
    width:100%;
    position: absolute;
    overflow-y: scroll;
    visibility: hidden;
}

div.fist {
	position: fixed;
	bottom: 15px;
	right: calc(var(--scrollbar-width) + 2vw);
	cursor: pointer;
}

div.fist > img {
	width: auto;
	height: 38px;
}