/* 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." */

/* Page Defaults */
body {
  display: inline;
  background-color: transparent;
  color: black;
  font-family: "Freckle Face", system-ui;
  font-size: 122px;
}

h1 {
  font-size: 38px; 
}

p {
  font-size: 28px; 
}

ul {
  font-size: 36px; 
}

li {
  list-style-type: none;
}

/* Page Content */

/* Content Positioning */
.top {
  position: absolute;
  top: -100px;
}

.right {
  position: absolute;
  top: 50%;
  right: 0%;
  max-width: 300px; 
}

.left {
 position: absolute;
 top: 50%;
 margin: 0 80% 0 0;
 max-width: 150px;
 max-height: 150px;
}

/* Style the tab */
.tab {
  position: relative;
  overflow: hidden;
  width: 70%;
  border: 2px solid;
  background-color: #FFB7FF;
}
/* Style the buttons inside the tab */
.tab button {
  position: relative;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 32px;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button:active {
  background-color: #FF46FF;
}

/* Style the tab content */
.tabcontent {
  display: none;
  width: 70%;
  border: 1px solid;
  border-top: none;
  background-color: #FFB7FF;
}

/* Backgrounds */ 
.leaveCumzone {
  background-image: url("backgrounds/errorBackground.png");
  background-repeat: repeat;
}

.gradient {
  background: linear-gradient(to right, #A962E0, #FF74DA, #ffffff);
  background-attachment: fixed;
}

/* Image Settings */
.locked {
  background-attachment: fixed;
}

/* Image Animations */
.spin{ 
  animation-play-state:paused; 
}

.spin:hover {
  overflow:hidden;
  animation: rotateFrames 3s linear 0s infinite;
}

.breathe:hover {
 animation: breatheFrames 1s linear 0s infinite;
}

.pokeLeft:hover {
  animation: pokeLeftFrames 3s linear 0s infinite; 
}

/* Marquee styles */
.marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-evenly;
  gap: var(--gap);
  min-width: 100%;
}

.marquee:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}


/* Enable animation */
.marquee__content {
  animation: scroll 60s linear infinite;
}

/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
  animation-play-state: paused;
}

/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
  max-width: fit-content;
}

/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

/* Enable position absolute animation on the duplicate content (last-child) */
.marquee--pos-absolute .marquee__content:last-child {
  animation-name: scroll-abs;
}

@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}

/* Image Keyframes */
@keyframes breatheFrames {
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes pulseFrames {
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes rotateFrames {
  100% { transform: rotate(720deg); }
}

@keyframes saturateFrames {
  100% { filter: saturate(1); } 
}

@keyframes pokeLeftFrames {
   0%{
    left: 0;
  }
  50%{
    left: 50%;
  }
  100%{
    left: 0;
  }
}

/* CRT Keyframes */ 

@keyframes textShadow {
  0%   { text-shadow: 0.110px 0 1px rgba(0,30,255,0.5), -0.110px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  5%   { text-shadow: 0.698px 0 1px rgba(0,30,255,0.5), -0.698px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  10%  { text-shadow: 0.001px 0 1px rgba(0,30,255,0.5), -0.001px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  15%  { text-shadow: 0.100px 0 1px rgba(0,30,255,0.5), -0.100px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  20%  { text-shadow: 0.870px 0 1px rgba(0,30,255,0.5), -0.870px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  25%  { text-shadow: 0.403px 0 1px rgba(0,30,255,0.5), -0.403px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  30%  { text-shadow: 0.175px 0 1px rgba(0,30,255,0.5), -0.175px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  35%  { text-shadow: 0.974px 0 1px rgba(0,30,255,0.5), -0.974px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  40%  { text-shadow: 0.968px 0 1px rgba(0,30,255,0.5), -0.968px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  45%  { text-shadow: 0.558px 0 1px rgba(0,30,255,0.5), -0.558px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  50%  { text-shadow: 0.020px 0 1px rgba(0,30,255,0.5), -0.020px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  55%  { text-shadow: 0.594px 0 1px rgba(0,30,255,0.5), -0.594px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  60%  { text-shadow: 0.551px 0 1px rgba(0,30,255,0.5), -0.551px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  65%  { text-shadow: 0.716px 0 1px rgba(0,30,255,0.5), -0.716px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  70%  { text-shadow: 0.122px 0 1px rgba(0,30,255,0.5), -0.122px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  75%  { text-shadow: 0.474px 0 1px rgba(0,30,255,0.5), -0.474px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  80%  { text-shadow: 0.021px 0 1px rgba(0,30,255,0.5), -0.021px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  85%  { text-shadow: 0.025px 0 1px rgba(0,30,255,0.5), -0.025px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  90%  { text-shadow: 0.861px 0 1px rgba(0,30,255,0.5), -0.861px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  95%  { text-shadow: 0.546px 0 1px rgba(0,30,255,0.5), -0.546px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  100% { text-shadow: 0.655px 0 1px rgba(0,30,255,0.5), -0.655px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
}


/* CRT animation */
/* http://aleclownes.com/2017/02/01/crt-display.html */
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 1px 100%;
  pointer-events: none;
}

.crt {
  animation: textShadow 2s infinite;
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1); /* #12101019 */
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}


/* Cursors */

/* Mobile Device Styling */
@media all and (max-width: 620px) {
  /* For mobile phones: */
  /* Style the buttons inside the tab */
  .tab button {
    font-size: 24px;
  }

  h1 {
    font-size: 30px; 
  }
  
  p {
    font-size: 25px; 
  }

  .left {
   top: 15%;
  }
    
  .right {
    top: 15%;
    right: -25px
  }

  .tabcontent {
    max-width: 300px;
  }

}