/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*This is for the basic properties of html. I mean, super basic.*/

body {
  background: black url(/bg.png);
  color: white;
  background-attachment: scroll;
  font-family: arial;
  font-size: 11px;
  background-position-x: center;
}

p {
  padding: 0px 20px;
  font-family: courier;
  font-size: 18px;
}

li {
	padding: 8px 20px;
	font-family: courier;
	font-size: 18px;
}

h1 {
  font-size: 3em;
  font-weight: bolder;
  font-style: oblique;
  margin: 10px 10px;
  color: #ffffff;
}

h2 {
    font-size: 2em;
    margin: 10px 10px;
    color: #ffffff;
}    
    
h3 {
    font-size: 1.5em;
    margin: 5px;
}

menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  gap: 1em;
}

img {
    max-width: 100%;
    height: auto;
    width: auto;
}

/*These are for links.*/

a:link {
  text-decoration: none;
  color: #ffec00;
  transition: 
    color 0.2s;
}

a:visited {
  text-decoration: none;
  color: #cca600;
  transition: 
    color 0.2s;
}

a:hover, a:focus, a:active  {
  text-decoration: none;
  color: #fff622;
  transition: 
    color 0.2s;
}


/*This is for the title.*/
.geowaffle_title {
  display: block;
  margin: auto;
  width: 717px;
  position: relative;
  bottom: 0px;
  transition: bottom 0.1s;
}
.geowaffle_title:hover, .geowaffle_title:focus, .geowaffle_title:hover {
  bottom: 4px;
  transition: bottom 0.2s;
}

/*This is for the major content of a page.*/

.main_body {
  margin: 10px auto;
  max-width: 960px;
  width: auto;
}

/*This adds empty space.*/
.padding {
  padding: 0.2vmax;
}

/*This adds the unique border to a page element.*/
.bordered {
  padding: 0.2vmax;
  border-color: white;
  border-style: solid;
  border-width: 3;
  margin: 10px 10px;
  background: #000000ff;
  /*backdrop-filter: blur(10px);*/
}

/*This adds an alternate border to a page element.*/
.bordered1 {
  padding: 0.2vmax;
  border-color: #ffe600;
  border-style: dashed;
  border-width: 3;
  margin: 10px 10px
}

/*This adds an alternate border to a page element.*/
.bordered2 {
  padding: 0.2vmax;
  border-color: white;
  border-style: solid;
  border-width: 1px;
  margin: 10px 10px
}

/*This adds a decorative bar to a page.*/
.bar {
  padding: 0.2vmax;
  border-color: white;
  border-style: solid;
  border-width: 1px 0 0 0;
  margin: 10px 10px
}

/*This is for the flex containers of a page.*/

.basic_flex_container {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 5px;
  width: auto;
  margin: auto;
  max-width: 960px;
  flex-direction: row;
}
@media (max-width: 800px) {
  .basic_flex_container {
    flex-direction: column;
  }
}

/*This is for the inverto-flex containers of a page.*/

.inverto_flex_container {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 5px;
  width: auto;
  margin: auto;
  max-width: 960px;
  flex-direction: row-reverse;
}
@media (max-width: 800px) {
  .inverto_flex_container {
    flex-direction: column;
  }
}

/* ==================================== Home Page Nav */

.home_body {
  background: black url(/home_bg.png);
  color: white;
  background-attachment: fixed;
  font-family: arial;
  font-size: 11px;
  background-position-x: center;
}
@media (max-width: 800px) {
	.home_body {
		background-position-x: 50%;
		background-position-y: 0%;
		background-size: 960px 540px;
		/*animation: home_body_mobile_drift 20s;*/
		/*animation-iteration-count: infinite;*/
	}
}

/*Commented out*/
@keyframes home_body_mobile_drift {
	/*top*/
	0% {
		background-position-y: 20%;
	}
	/*bottom*/
	50% {
		background-position-y: 40%;
	}
	/*top, again*/
	100% {
		background-position-y: 20%;
	}
}

/* This is for the navbox on the homepage */
.home_main_body {
  margin: 10px auto;
  width: 800px;
  position: absolute;
  bottom: 2vmax;
  left: 50%;
  transform: translate(-50%, 0%);
  animation: home_main_body_fadein 2s;
}
@media (max-width: 800px) {
	.home_main_body {
		flex-direction: column;
		position: absolute;
		bottom: 2vmax;
		left: reset;
		transform:reset;
		width: 350px;
	}
}
@keyframes home_main_body_fadein {
  0% {
	  opacity: 0;
	  bottom: 0.5vmax;
	}
  100% {
	  opacity: 1;
	  bottom: 2vmax;
	}
}

.home_list {
  display: flex;
  flex: 1 1 0;
  width: auto;
  flex-flow: row wrap;
  margin: auto;
}
@media (max-width: 800px) {
	.home_list {
    flex-direction: column;
	align-items: stretch;
	flex: 1 1 auto;
	flex-flow: row;
  }
}

.home_bordered {
  padding: 0.2vmax;
  border-color: white;
  border-style: solid;
  border-width: 3;
  margin: 10px 10px;
  background: #00000088;
}

/* ==================================== Navbar */

/*This is for the flex containers containing the navbar.*/
.navbar_flex {
  display: flex;
  flex: auto;
  align-items: flex-start;
  gap: 5px;
  width: auto;
  margin: auto;
  flex-direction: row;
  padding-left: 10vmax;
  padding-right: 10vmax;
}
@media (max-width: 800px) {
  .navbar_flex {
    flex-direction: column;
	padding-left: 0;
	padding-right: 0;
	gap: 0;
  }
}

/*This is for the navbar content.*/
.navbar_content {
	width: 300px;
	position: sticky;
	top: 15px;
	left: 0;
}
@media (max-width: 800px) {
  .navbar_content {
	width: 100%;
	position: static;
  }
}

/*This is for the navbar list list.*/

.navbar_list {
  display: flex;
  flex: 1 1 0;
  width: auto;
  flex-flow: column;
  margin: auto;
}
@media (max-width: 800px) {
  .navbar_list {
	flex-flow: row wrap;
  }
}

/*This is for the front page socials list.*/


.socials_list {
  display: flex;
  flex: 1 1 0;
  width: auto;
  flex-flow: row wrap;
  margin: auto;
}

.socials_sectionheader {
  margin: auto;
  align-items: center;
  position: relative;
  display: flex;
  text-align:center;
  justify-content: center;
}

.socials_sectionheader_text {
  margin: 4px;
  position: relative;
  width: auto;
}

/*This is for the socials buttons.*/
.socials_button {
  display: flex;
  flex: 1;
  width: auto;
  flex-direction: row;
  align-items: center;
  gap: 0.5vmax;
  padding: 0.2vmax;
  border-color: #ffe600;
  border-style: solid;
  border-width: 3px 3px 8px 3px;
  margin: 4px;
  color: #ffe600;
  background-color: black;
  position: relative;
  bottom: 0px;
  transition:
		bottom 0.2s;
}
.socials_button:link, .socials_button:visited {
  color: #ffe600;
  transition:
		bottom 0.2s;
}

.socials_button:focus {
	text-decoration: none;
	background: #331100;
	color: #cca600;
	border-color: white;
	bottom: -2px;
	transition: 
		bottom 0.2s
}

.socials_button:hover {
  text-decoration: none;
  background: #331100;
  color: #bb5500;
  border-color: white;
  bottom: 5px;
  transition: 
		bottom 0.2s;
}

.socials_button:active {
	text-decoration: none;
	background-color: #441510;
	color: #000;
	bottom: 0px;
	transition: 
		bottom 0.2s;
}

/*This is for the iframe holding video embeds.*/
.frame_videoembed {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 800px) {
  .frame_videoembed {
    height: 50vw;
    width: 100%;
  }
}

/*This is for the pfp at the top of the page*/

.pfp {
  margin: 10px
}

/* ==================================== This is for elements exclusive to the DTF page*/

.dtf_body {
  background: black url(/dtf_assets/dtf_background.png);
  color: white;
  background-attachment: fixed;
  font-family: arial;
  font-size: 11px;
}


/*This is for the title.*/
.dtf_title {
  display: block;
  max-width: 800px;
  width: auto;
  margin: auto;
  position: absolute;
  left: 50%;
  top: -3%;
  transform: translate(-50%)
}
@media (max-width: 800px) {
  .dtf_title {
    max-width: 80vw;
    top: 0;
  }
}

/*This adds empty space.*/
.dtf_title_padding {
  padding: 6rem;
}
@media (max-width: 800px) {
  .dtf_title_padding {
    padding: 4rem;
  }
}


/*This is for the iframe holding the trailer.*/
.dtf_iframe_trailer {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 59vh;
}
@media (max-width: 800px) {
  .dtf_iframe_trailer {
    height: 50vw;
  }
}

/*This is for the stickers found across the page. Exact rotation and positioning is handled inline for each sticker.*/
.dtf_sticker {
  position: absolute;
  max-width: 150px;
}
@media (max-width: 800px) {
  .dtf_sticker {
    max-width: 0;
  }
}

/*This contains the stickers.*/
.dtf_stickerbound {
  position: relative
}

/* ==================================== This is for elements exclusive to the Portfolio page*/

/*This is for the title.*/
.portfolio_title {
  display: block;
  margin: auto;
  width: 717px;
}

/*This is for portfolio thumbnails.*/
.portfolio_thumbnail{
  overflow: hidden;
}

/*This is for the images inside the portfolio thumbnails.*/
.portfolio_thumbnail_image{
  object-fit: cover;
  flex: initial;
  width: 100%;
  height: 100%
}
@media (max-width: 800px) {
  .portfolio_thumbnail_image {
    max-height: 400px
  }
}

/*This is for the flex containers containing the smaller thumbnails.*/

.portfolio_flex_container {
  display: flex;
  flex: auto;
  align-items: stretch;
  gap: 0.2vmax;
  width: auto;
  margin: 0.2vmax;
  max-height: 400px;
  min-height: 300px;
  flex-direction: row;
  overflow: hidden
}
@media (max-width: 800px) {
  .portfolio_flex_container {
    flex-direction: column;
    max-height: 100%;
    margin: auto;
    flex: auto;
    object-position: 0 0;
  }
}

/*This is applied to spans around certain portfolio thumbnails to allow them to flex unusually when the screen size is larger than 800px*/
.portfolio_span_flex_exception1{
  flex: 1;
}
.portfolio_span_flex_exception2{
  flex: 2;
}
.portfolio_span_flex_exception3{
  flex: 3;
}
.portfolio_span_flex_exception4{
  flex: 4;
}
@media (max-width: 800px) {
  .portfolio_span_flex_exception1, .portfolio_span_flex_exception2, .portfolio_span_flex_exception3, .portfolio_span_flex_exception4 {
    flex: none
  }
}

/*This is for portfolio big portfolio thumbnails.*/
.portfolio_big-image{
  display: block;
  flex: auto;
  margin: 0.2vmax auto;
  height: auto;
  width: auto;
  object-fit: cover;
  background: none;
}

/*This is for the anchors containing the big images*/
.portfolio_big-image_anchor{
  background: none;
}
.portfolio_big-image_anchor:hover{
  background: none;
}

/*This is for the flex container holding the entire portfolio page.*/

.portfolio_flex {
  display: flex;
  flex: auto;
  align-items: flex-start;
  gap: 5px;
  max-width: 1900px;
  width: auto;
  margin: auto;
  flex-direction: row;
}
@media (max-width: 800px) {
  .portfolio_flex {
    flex-direction: column;
  }
}

/*This is for the flex container holding the portfolio gallery.*/

.portfolio_gallery_flex {
  display: flex;
  flex: auto;
  align-items: center;
  gap: 0.2vmax;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 800px) {
  .portfolio_gallery_flex {
    flex-direction: column;
  }
}

/*This is for the flex container holding the biography and its image contents.*/

.portfolio_biography_flex {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 5px;
  width: auto;
  margin: auto;
  flex-direction: column;
}


/*This is for the body div containing the portfolio contents*/

.portfolio_body {
  margin: 10px auto;
  background-color: #000000;
  border-color: white;
  border-style: solid;
  border-width: 3;
  max-width: 1200px;
  width: auto;
}
@media (max-width: 800px) {
  .portfolio_body {
    max-width: 960px;
  }
}

/*This is for the body div containing the portfolio biography contents*/

.portfolio_biography_body {
  margin: 10px auto;
  background-color: #000000;
  border-color: white;
  border-style: solid;
  border-width: 3;
  max-width: 960px;
  width: auto;
  position: sticky;
  position: -webkit-sticky;
  align-self: flex-start;
  top: 10px;
}
@media (max-width: 800px) {
  .portfolio_biography_body {
    max-width: 960px;
    position: static;
  }
}

/*This is for the animation affecting some of the above linked elements.*/
.portfolio_thumbnail_image:hover, .portfolio_big-image:hover {
  position: relative;
  overflow: visible;
  scale: 1.02;
  transition:
    all 0.2s
}

/* ==================================== This is for elements exclusive to the News page*/

/*This is for the flex container holding the entire news page.*/

.news_flex {
  display: flex;
  align-items: stretch;
  gap: 5px;
  max-width: 1600px;
  width: auto;
  margin: auto;
  flex-direction: row;
}
@media (max-width: 800px) {
  .news_flex {
    flex-direction: column;
  }
}

/*This is for the body sections holding the news. Both inherit the same properties, as well as gaining their own.*/

.news_body_latest {
  max-width: 960px;
  width: auto;
}

.news_body_archive {
	margin: 10px 10px;
	flex: auto;
	background-color: #000000;
	height: 800px;
	align-self: flex-start;
	top: 10px;
	border-color: white;
	border-style: solid;
	border-width: 3;
	position: sticky;
}
@media (max-width: 800px) {
  .news_body_archive {
    max-width: 960px;
    min-width: 0;
    height: auto;
    border-color: white;
    border-style: solid;
    border-width: 3;
	position: static;
  }
}

/*This contains the news archive list.*/

.news_archive_container {
  overflow: scroll;
  height: 800px;
}
@media (max-width: 800px) {
	.news_archive_container {
	  height: auto;
	}
}

/* ==================================== This is for elements exclusive to the Sticker Guide pages*/

.stickerguide_body {
  background: black url(/stickerguide/images/bg.png);
  color: white;
  background-attachment: fixed;
  font-family: arial;
  font-size: 11px;
}

/*This is for links accessed through character stickers*/
.stickerlink {
	display: block;
	margin: auto;
	position: relative;
	bottom: 0px;
	scale: 1;
	z-index: reset;
	transition:
		scale 0.2s,
		bottom 0.2s;
}
.stickerlink:hover, .stickerlink:focus, .stickerlink:active {
	bottom: 10px;
	scale: 1.2;
	z-index: 1;
	transition: 
		bottom 0.2s,
		scale 0.2s;
}@media (max-width: 800px) {
	.stickerlink:hover, .stickerlink:focus, .stickerlink:active {
		scale: 1.1;
		z-index: 1;
		transition: 
			bottom 0.2s,
			scale 0.2s;
	}
}