* {
  box-sizing:border-box;
}

:root {

  --feature-color-red: #de2952;
  --feature-color-red2: #d05742;
  --feature-color-red3: #a91a00;

  --feature-color-orange: #ef7542;

  --feature-color-yellow: #e6ad31;
  --feature-color-yellow2: #f4be36;

  --feature-color-green: #99cd52;
  --feature-color-olive: #99ab26;

  --feature-color-teal: #00b4a5;
  --feature-color-teal2: #3ab2b5;

  --feature-color-blue: #638cd6;
  --feature-color-blue2: #428fcd;
  --feature-color-navy: #5a4e99;
  --feature-color-navy2: #3955a4;
  
  --feature-color-purple: #b175c1;
  --feature-color-pink: #d671a5;
  
  --feature-color-gray: #a0a0a0;
  

  --feature-color-paper: #d6d5c2;
  --feature-color-white: #e0e1e0;
  --feature-color-paper2: #e9e9d8;
  --feature-color-paper3: #999889;

  --folder-color1: #f4be36;
  --folder-color2: #947521;
  
  --sticky-color1: #ffeca2;
  --sticky-color2: #ffd200;

  --background-color-mezz: #FF817C;
  --background-color-clyde: #23a59f;
  --background-color-advcat: #a06cb9;
  --background-color-kai: #f086ad;
  --background-color-robot: #64a57d;

  --scroll-color-blue: #345381;
  --scroll-color-green: #4f9675;

  --background-start-color: var(--background-color-mezz);
  --background-end-color: var(--background-color-mezz);

  --color-games: var(--feature-color-red);
  --color-assets: var(--feature-color-blue);
  --color-voice: var(--feature-color-yellow);
  --color-ps4: var(--feature-color-green);
  --color-art: var(--feature-color-orange);
  --color-3d: var(--feature-color-purple);
  --color-characters: var(--feature-color-teal);
  --color-web: var(--background-color-robot);
  --color-other: var(--feature-color-gray);

  --next-char-src: "";

  --gutter: 16px;
  --card-gap: 8px;
} 

@keyframes spinThatThang {
    from { --active-gradient-angle: 0deg; }
    to { --active-gradient-angle: 360deg; }
}

@keyframes slide128 {
  from { background-position: 0 0; }
  to { background-position: 128px 128px }
}
@keyframes slide64 {
  from { background-position: 0 0; }
  to { background-position: 64px 64px }
}

@keyframes annoying {
  from { transform:rotate(-1deg); }
  to { transform:rotate(1deg); }
}

@keyframes annoying2 {
  0% {transform: rotate(0deg) scale(1.0);}
  33% {transform: rotate(-5deg) scale(1.033);}
  67% {transform: rotate(2.5deg) scale(1.067);}
  100% {transform: rotate(0deg) scale(1.1);}
}

@keyframes annoying3 {
  0% { transform:rotate(0deg); }
  25% { transform:rotate(-3deg); }
  50% { transform:rotate(0deg); }
  75% { transform:rotate(1deg); }
  100% { transform:rotate(0deg); }
}

@keyframes rainbowText {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

@keyframes wavyText {
  from { transform: translateY(4px); }
  to { transform: translateY(-4px); }
}

@keyframes fadeCol {
  from { background-color: var(--background-start-color); }
  to { background-color: var(--background-end-color); }
}


@keyframes flip {
  /*become invisible*/
  0% { transform: perspective(384px) rotateY(0deg); }
  50% { transform: perspective(384px) rotateY(90deg); }
  100% { transform: perspective(384px) rotateY(90deg); }
}

@keyframes unflip {
  /*become visible*/
  0% { transform: perspective(384px) rotateY(270deg) ; }
  50% { transform: perspective(384px) rotateY(270deg) ; }
  100% { transform: perspective(384px) rotateY(360deg); }
}



html, body {
	margin: 0px;
	font-family:Geom, sans-serif;
	
	font-size: 18px;

	overflow-x:hidden;
	
	background: url("img/bg-loop-3.png") repeat;
  background-color: var(--background-end-color);
	animation: slide64 15s linear infinite,fadeCol 0.25s linear 0s 1 forwards;
}

.main-content {
  /*allow absolute positioning on children to work*/
  position: relative;
  padding-left: 4px;
  color:black;
	max-width: 768px;
  margin:auto;
  margin-top:24px;
}

.hover-wobble{
  transition: animation 0.3s ease-in-out;
}
.hover-wobble:hover{
  animation: annoying3 0.6s ease-in-out 0s 1 forwards;
}
.hover-grow {
  transition: transform 0.2s ease-out;
}
.hover-grow:hover {
  transform: scale(1.1);
}

@media screen and (max-width: 768px){
  .main-content{
    padding-left: 8px;
  }
}

/* h1 {
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 52px;
} */
h1 {
  font-family: "Mochiy Pop One", sans-serif;
	font-size: 56px;
	font-weight:100;
	margin-top: -12px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom:0px;
  color: white;
  text-align: center;
}

h2 {
  font-family: "Mochiy Pop One", sans-serif;
	font-size: 48px;
	font-weight:100;
	margin-top: -12px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom:0px;
}
@media screen and (max-width: 768px){
  h2{
    margin-top: -4px;
    font-size: 40px;
  }
}

h3 {
  font-family: "Mochiy Pop One", sans-serif;
	font-size: 36px;
	font-weight:100;
	margin-top: -12px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom:0px;
}
@media screen and (max-width: 768px){
  h3{
    margin-top: -4px;
    font-size: 28px;
  }
}

ul {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 0px;
  margin-bottom: 10px;
}


/* .overlay {
	position:fixed;
	inset:0;

	--mouse-x: 0px;
	--mouse-y: 0px;

	background: radial-gradient(circle,rgba(253, 133, 159, 1) 0%, rgba(97, 184, 171, 1) 50%, rgba(72, 65, 99, 1) 100%);
	background-position: var(--mouse-x) var(--mouse-y);
	background-repeat: repeat;
	
	background-size: cover;
	z-index:9000;
	pointer-events:none;
	
	mix-blend-mode: multiply;
} */


.header {
	order: 3;
	/*margin-left:auto;
	position:sticky;
	top:50px;*/
	
	width: 100%;
  height: 256px;
  /*background-color: aquamarine;*/
  display: flex;
  justify-content: center;
}

.logo {
	/*font-size: 80px;
	margin-bottom:50px;*/
	margin: 0px;
	width: 256px;
  height: 100%;
  /*background-color: gray;*/
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.logo img {
  max-width:100%;
  max-height: 216px;
  height: auto;
  object-fit: contain;
  display: block;
}

.logo h1 {
  /*background-color: pink;*/

  font-family: "Mochiy Pop One", sans-serif;
  font-size: 40px;
  margin: -32px;
}

a {
  text-decoration: underline;
  position: relative;
  
	background-clip: initial;
	background-attachment: fixed;
	background-size: 100%;
}

/* button {
  background: white;
  border: none;
  color: #161616;
  padding: 8px 16px;
  font-family: "Itim", cursive;
  font-size: 20px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  /* flex-grow: 1;
  flex-basis: 100px;
  margin: 8px 8px;
}
button.selected {
  background-color: mediumvioletred;
}
button.selected[id="radio-games"] {
  background-color: red;
}
button.selected[id="radio-assets"] {
  background-color: blue;
}
button.selected[id="radio-voice"] {
  background-color: yellow;
}
button.selected[id="radio-other"] {
  background-color: purple;
}
button.selected[id="radio-mygames"] {
  background-color: red;
}
button.selected[id="radio-jamgames"] {
  background-color: darkred;
}
button.selected[id="radio-friendgames"] {
  background-color: indianred;
}
button.selected[id="radio-othergames"] {
  background-color: orangered;
} */
.spread {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}


.gentle-tilt {
  animation: annoying 1s ease-in-out 0s infinite alternate;
  /*inherit so it can be set by JS*/
  animation-delay: inherit; 
  animation-duration: inherit;

  width: 100%;
  height: 100%;
}


.box {
  color: white;
  background: #161616;
  border: solid 4px var(--active-gradient-color-0);
  margin: 8px;
  padding: 20px;
}

.scrolling-box {
  color: white;
	/*margin: 8px;*/
	padding: 16px;
	background: url("img/bg-loop-1.png") repeat;
	border: ridge 8px grey;
	border-radius: 8px;
	/*30 is what each of the 4 corners get*/
	border-image: url("img/9-slice.png") 30 / 16px;
	overflow: clip;
	transform: translate(0);
	animation: slide128 15s linear infinite;
}
/* @media screen and (max-width: 768px){
  .scrolling-box{
    padding: 16px;
  }
} */

.indent2 {
  padding-left:8px;
  padding-right:8px;
}

.wow-text {
  /*put text over speech bubble:*/
  position: absolute;
  left: 10%;
  top: 40%;
  margin: 0;
  
  font-family: "Itim", cursive;
  font-size: 50px;
  
  text-align: center;
  z-index: 3;
}

@media screen and (max-width: 768px){
	.wow-text {
	  font-size: 6.5vw;
	}
}


.wow-text span {
  display:inline-block;
  transform: translateY(0px);
  /*animation: wavyText 0.5s ease-in-out 0s infinite alternate;*/
  /*this has to be on each letter cause chrome hates it on the parent.*/
  background: repeating-linear-gradient(to right, #FF0000 0%, #FFFF00 8.33%, #00FF00 16.67%, #00FFFF 25%, #0000FF 33.33%, #FF00FF 41.66%, #FF0000 50%);
  background-size: 1000% 1000%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /* filter: drop-shadow(2px 2px #000) drop-shadow(2px -2px #000) drop-shadow(-2px -2px #000) drop-shadow(-2px 2px #000); */
  animation: rainbowText 2s linear 0s infinite, wavyText 0.5s ease-in-out 0s infinite alternate;
}
.wow-text.bg span {
  -webkit-text-stroke: 8px black;
  animation: wavyText 0.5s ease-in-out 0s infinite alternate;
  background: none;
}
@media screen and (max-width: 768px){
	.wow-text.bg span {
    -webkit-text-stroke: 1vw black;
	}
}
.wow-text span:nth-child(2) { animation-delay: -0.1s; }
.wow-text span:nth-child(3) { animation-delay: -0.2s; }
.wow-text span:nth-child(4) { animation-delay: -0.3s; }
.wow-text span:nth-child(5) { animation-delay: -0.4s; }
.wow-text span:nth-child(6) { animation-delay: -0.5s; }
.wow-text span:nth-child(7) { animation-delay: -0.6s; }
.wow-text span:nth-child(8) { animation-delay: -0.7s; }
.wow-text span:nth-child(9) { animation-delay: -0.8s; }
.wow-text span:nth-child(10) { animation-delay: -0.9s; }
.wow-text span:nth-child(11) { animation-delay: -1.0s; }
.wow-text span:nth-child(12) { animation-delay: -1.1s; }
.wow-text span:nth-child(13) { animation-delay: -1.2s; }
.wow-text span:nth-child(14) { animation-delay: -1.3s; }



.speech-bubble {
  position: relative;
  width: 80%;
}
.speech-bubble img {
  image-rendering: smooth;
  width: 100%;
  height:auto;
  object-fit: contain;
  display: block;
  /*animation: annoying s ease-in-out 0s infinite alternate;*/
}
.speech-bubble p {
  font-family: "Itim", cursive;
  font-size: 32px;
  color: black;
  position: absolute;
  left: 10%;
  top: 25%;
  margin: 0;
}

@media screen and (max-width: 768px){
	.speech-bubble p {
	  font-size: 4vw;
	}
}
.animate-flip {
  /* transform-style: preserve-3d; */
  animation: flip 0.25s ease-in 0s  1 forwards;
}
.animate-unflip {
  /* transform-style: preserve-3d; */
  animation: unflip 0.25s ease-out 0s 1 forwards;
}
.floating-character {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50%;
  aspect-ratio: 1;
  
  /*animation: annoying 1s ease-in-out 0s infinite alternate;*/
  /*animation-delay: inherit; */
  /*animation-duration: inherit;*/
  z-index: 10;
  
}
.floating-character img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;

  transform: perspective(512px) rotateY(0deg);
  cursor: pointer;

}

.socials {
  font-family: "Itim", cursive;
  font-size: 16px;
  
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  
  /*max-width: calc(30% + (20px / 3));*/
  max-width: 50%;
  margin: 10px;
}

.socials .social {
  position: relative;
  
  text-align: center;
  
  /*width: 48px;*/
  /*height:auto;*/
  
  flex-basis: 48px;
  /*flex-basis: 32px;*/
}
.socials .social img {
  width: 100%;
  height: auto;
  display: block;
}
.socials .social a {
  color: black;
  text-decoration: none;
}
.socials .social p {
   display: block;
   /* margin: -2px 0; */
   margin: 0;
}

@media screen and (max-width: 768px){
	.socials .social p {
	  display: none;
	}
}

.fill-area {
  position: absolute;
  width: 100%;
  height: 100%;
}

.image-drop-shadow {
  filter: drop-shadow(8px 8px #000000AA);
  width: 100%;
  height: 100%;
}

.box-drop-shadow,
.paper-box.drop-shadow,
.card-area-style.drop-shadow,
.scrolling-box.drop-shadow,
.tab.drop-shadow {
  box-shadow: 8px 8px 0px 0px #000000AA;
}

.card.drop-shadow {
  box-shadow: 4px 4px 0px 0px #000000AA;
}

.tab-drop-shadow {
  filter: drop-shadow(8px 8px #000000AA);
}

h1.drop-shadow {
  /*position: inherit;*/
  filter: drop-shadow(4px 4px #000000DD);
}

.half-drop-shadow {
  /*position: inherit;*/
  filter: drop-shadow(2px 2px #000000DD);
}

.spacer-box {
  height: 50px;
  margin-bottom: 0px;
  /*margin: 8px;*/
	background: transparent;
}
.split-box {
  height: 0px;
  margin: 0px;
  /*margin: 8px;*/
	background: transparent;
}
/*@media screen and (max-width: 768px){*/
/*	.spacer-box {*/
/*	  display: none;*/
/*	}*/
/*}*/

.cut-thru-box {
  /*margin: 8px;*/
	padding: 16px;
  padding-bottom: 4px;
	background: var(--feature-color-paper);
	border-radius: 16px;
	/*border-image: url("9-slice.png") 30 / 16px;*/
	box-shadow: 10px 10px 10px 0px inset #726d4f;
}
@media screen and (max-width: 768px){
  .cut-thru-box{
    padding: 12px;
    padding-bottom: 8px;
  }
}
.cut-thru-box a {
  color: black;
}
.cut-thru-box p {
  margin-left: 20px;
}

.paper-box{
  
  /*margin: 20px;*/
  padding: 16px;
  background: var(--feature-color-white);
  height:auto;
}
@media screen and (max-width: 768px){
  .paper-box{
    padding: 10px;
  }
}

.links-box {
  column-count: 2;
}
@media screen and (max-width: 768px){
  .links-box{
    column-count: 3;
  }
}
.links-box a {
  break-inside: avoid;
}

.polaroid {
  width: 512px;
  background: var(--feature-color-white);
  height:auto;

  text-align: center;

  /* display: block; */
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;

  

  box-shadow: 8px 8px 0px 0px #000000AA;
}
.polaroid img {
  width: 90%;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  margin-bottom: 0;
  /* display: block; */
  box-shadow: 0px 0px 4px 0px #000000AA;
}
.polaroid p {
  font-style: italic;
  color:#161616;
  margin-top: 0px;
  margin-bottom: 4px;
  font-size: 24px;
  font-family: "Itim", cursive;
  /* line-height: 20px; */
}
.polaroid a {
  color: #161616;
}

.masonry {
  /*display: flex;*/
  /*gap: 10px;*/
  
  padding: 0px;
  margin: 0px;
  
  
  /*flex-wrap:wrap;*/
  /*flex-direction: row;*/
  /*align-items: flex-start;*/
  width: 760px;
}
@media screen and (max-width: 768px){
  .masonry{
    width: calc(100% - 8px);
  }
}


.masonry-sizer {
  width: calc((760px / 4) - (var(--gutter)) / 4 * 3); 
}
@media screen and (max-width: 768px){
  .masonry-sizer{
    width: calc(50% - (var(--gutter) / 2));
  }
}


.masonry-brick {
  
  float:left;
  margin-bottom: var(--gutter);
  
  width: calc((760px / 4) - (var(--gutter) / 4 * 3));
  
}

/*become half the size...*/
@media screen and (max-width: 768px){
  .masonry-brick{
    width: calc(50% - (var(--gutter) / 2));
  }
}

.masonry-gutter {
  width: var(--gutter);
}


.masonry-brick--width2 {
  /*width: 50%;*/
  /*flex-basis: calc(50% - (10px / 2));*/
  /*flex-basis: calc(50% - (10px * 1 / 2));*/
  width: calc((760px / 2) - (var(--gutter) / 2));

}
/*become width 1... so half the size*/
@media screen and (max-width: 768px){
  .masonry-brick--width2{
   width: 100%;
  }
}

.masonry-brick--width2-2 {
  width: calc((760px / 2) - (var(--gutter) / 2));
}
/*become width 1... so half the size*/
@media screen and (max-width: 768px){
  .masonry-brick--width2-2{
    /*become same size as smallest*/
   width: calc(50% - (var(--gutter) / 2));
  }
}

.masonry-brick--width3 {
  width: calc((760px * 0.75) - (var(--gutter) / 3.0 * 1.0));
}
@media screen and (max-width: 768px){
  .masonry-brick--width3{
   width: 100%;
  }
}

.masonry-brick--width4 {
  /*width: 100%;*/
  /*grid-template-columns: repeat(4, 1fr);*/
  width: 760px;
}
@media screen and (max-width: 768px){
  .masonry-brick--width4{
   width: 100%;
  }
}

.card-area-style {
  background: rebeccapurple;
  border-radius: 8px;
  
  /*padding: 10px;*/
  
  color:white;
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 24px;
  text-align: center;
}

.card-area-style p {
  margin: 0;
  margin-top: 5px;
  padding: 0;

  
  font-family:Geom, sans-serif;
  font-size: 16px;
  text-align: center;
  filter: drop-shadow(1px 1px #000000DD);
}
.card-area-style a {
  color:white;
}

.card-area {
  
  display: grid;
  /* padding originally 8px */
  padding: var(--card-gap);
  gap: var(--card-gap);
  grid-template-columns: repeat(1, 1fr);
}
.card-area--width2 {
  
  display: grid;
  padding: var(--card-gap);
  gap: var(--card-gap);
  grid-template-columns: repeat(2, 1fr);
}
.card-area--width3 {
  
  display: grid;
  padding: var(--card-gap);
  gap: var(--card-gap);
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px){
  .card-area--width3{
   grid-template-columns: repeat(2, 1fr);
  }
}
.card-area--width4 {
  
  display: grid;
  padding: var(--card-gap);
  gap: var(--card-gap);
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 768px){
  .card-area--width4{
   grid-template-columns: repeat(2, 1fr);
  }
}
.card {
  position: relative;
  border-radius: 8px;
  /*flex-basis: calc(25% - (30px / 4));*/
  aspect-ratio: 7/5;
  height:auto;
  overflow: clip;
  
  transition: transform 300ms ease-out;
/* 
  border-style: solid;
  border-width: 4px;
  border-color: var(--feature-color-blue); */
}
.card-border {
  border-style: solid;
  border-width: 4px;
  border-color: var(--feature-color-blue);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*apply this to more images...*/
  display: block;
}

.card:hover {
  transform: scale(1.05);
  z-index: 2;
}

.card .info {
  position: absolute;
  left:0;
  bottom:0;
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  background: #000000CC;
  color:white;
  opacity: 0;
  visibility: hidden;
  
  
  transition: all 300ms ease-out;
}

.card:hover .info {
  opacity: 1;
  visibility: visible;
}
/*also need to make link not work unless hovered...*/
.card .info a {
  /*pointer-events: none;*/
  color:inherit;
  text-decoration: inherit;
}

.card .info .info1 {
  font-family:Geom, sans-serif;
  font-size: 18px;
  text-align: left;
}
.card .info .info2 {
  font-family:Geom, sans-serif;
  font-size: 12px;
  text-align: right;
}


.tab-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
button.tab {
  /* border: 15px solid white;
  border-image-source: url("img/folder-tab.png");
  border-image-repeat: stretch;
  border-image-slice:  30;
  border-image-outset: 0;
  border-image-width: auto; */
  /* background: url("img/folder-tab.png"); */
  /* background-color: transparent; */
  background: var(--folder-color2);
  border: none;
  color: black;
  /* padding: 8px 16px; */
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 18px;
  text-align: center;
  /* line-height: 36px; */
  display: inline-block;
  cursor: pointer;
  /* margin: 8px 8px; */
  /* padding: 0; */
  margin: 0px;

  padding: 8px 8px;

  /* border-bottom: 36px solid var(--folder-color2);
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 0px solid transparent;
  height: 0; */
}
.tab.selected {
  background-color: var(--feature-color-paper2);
  /* shrink for border */
  padding-top: 1px; 
  padding-bottom: 1px;
  padding-left: 4px;
  padding-right: 4px;
  /* border: var(--folder-color1) solid 6px; */
  border-top: 7px;
  border-bottom: 7px;
  border-left: 4px;
  border-right: 4px;
  border-style: solid;
  border-color: var(--folder-color1);
  /* border-bottom-color: var(--folder-color1); */
}

@media (prefers-reduced-motion:reduce) {
  html, body{
    animation: none;
  }
  .scrolling-box{
    animation: none;
  }
  .wow-text span{
    animation-play-state: paused;
  }
  .gentle-tilt{
    animation: none;
  }
}