:root {
  --base: #fdf0db;
  --primary: #7c2209;
  --secondary: #f46607;
  --base-var: #f2c4a5;
}


.darkmode {
  --base: #080b33;
  --primary: #9fa1f5;
  --secondary: #6972c2;
  --base-var: #161e5c;
}

body {
  background: var(--base);
  
}
p {
  color: var(--primary);  
  text-align: center; 
  font-family: comic; 
  font-size: 20;
}
h1, h2, h3 {
  font-weight: bold; font-family: comic; color: var(--secondary); text-align: center;
}


li {color: var(--primary);   
  font-family: comic; 
  font-size: 25; }

a { text-decoration-color: var(--primary);
}



table, th, td {
    background-color: var(--secondary);
    border: solid;
    border-color: var(--primary);
    margin: 4px 2px;
    font-family: comic; 
    padding: 4px 2px;
    margin-left: auto;
    margin-right: auto;
}


.button {
  margin: 4px 2px;
  background-color: var(--secondary);
  border: double;
  color: var(--base);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  font-family: comic; 
}

.txtbox {
  margin: 6px 4px;
  background-color: var(--base-var);
  border: solid;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: default;
  border-radius: 6px;
  font-family: comic; 
  border-color: var(--primary);
}

.thumbnail { 
  cursor: pointer; 
  transition-property: all; 
  transition-duration: 0.4s; 
  transition-timing-function: ease; } 
.thumbnail:hover { 
  transform: scale(1.05); }
  
  
  #ross2{
  display:none;
}

#thewholeross:hover #ross1{
  display:none;
}

#thewholeross:hover #ross2{
  display:block;
}

  
  
  /* slider for portfolio */
    .container {
	padding: 2rem;
}

.slider-wrapper {
	position: relative;
	max-width: 48rem;
	margin: 0 auto;
}

.slider {
	display: flex;
	aspect-ratio: 16 / 9;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
	border-radius: 0.5rem;
	-ms-overflow-style: none; /* Hide scrollbar IE and Edge */
	scrollbar-width: none; /* Hide scrollbar Firefox */
}

.slider::-webkit-scrollbar {
	display: none;
}

.slider img {
	flex: 1 0 100%;
	scroll-snap-align: start;
	object-fit: contain;
}

.slider-nav {
	display: flex;
	column-gap: 1rem;
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.slider-nav a {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: #fff;
	opacity: 0.75;
	transition: opacity ease 250ms;
}

.slider-nav a:hover {
	opacity: 1;
}
  
  
  
  
  
/* pk shit... ahhh! */
  .pkfronters--member-list--pronouns,
.pkfronters--member-card--pronouns
{
	word-break: break-word;
}

.pkfronters--member-list--pronouns::before,
.pkfronters--member-card--pronouns::before
{
	content: '\0020(';
}

.pkfronters--member-list--pronouns::after,
.pkfronters--member-card--pronouns::after
{
	content: ')\0020';
}

.pkfronters--member-card-container
{
  margin-left: auto;
  margin-right: auto;
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
	max-width: fit-content;
}

.pkfronters--member-card
{
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	max-width: 8em;
	color: var(--secondary);
	font-family: comic;
}

.pkfronters--member-card--avatar
{
	min-width: 6rem;
	width: 6rem;
	min-height: 6rem;
	height: 6rem;
	margin: 0 0 0.5rem 0;
	border-radius: 4px;
	border: 4px solid transparent;
}

.pkfronters--member-card--name
{
	text-align: center;
	font-family: comic;
}



@font-face {font-family: comic; src: url('COMIC.ttf');}