@font-face {
  font-family: 'HackerChaos';
  src: url('font/SF TransRobotics.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Art';
  src: url('font/Mechsuit.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* CURSOR RGB :) */
* {
  cursor: url('cursors/Cursor_Black.png'), auto;
}

p,
span {
  cursor: url('cursors/Select_Black.png'), auto;
}

a {
  cursor: url('cursors/Click_Black.png'), pointer;
}

/*========================================================================*/


body {
  background: #111 url('img/background.jpg') repeat center top;
  background-size: contain, cover;
  font-family: 'Georgia', serif;
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: 5rem;
  margin: 0;
}

/*--- BACKGROUND RGB ANIMADO ---*/
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  background-size: 400%;
  animation: bg-scroll 10s linear infinite;
  background-size: 400% 400%;
  animation: bg-rgb-animation 20s linear infinite;
  z-index: -1;
  opacity: 0.05;
  pointer-events: none;
}

@keyframes bg-scroll {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

@keyframes bg-rgb-animation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/*========================================================================*/


/* --- TELA PRINCIPAL ---- */
#jar-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  background-color: white;
}

#jar-header::before {
  content: '';
  position: absolute;
  height: 200%;
  width: 200%;
  background-image: conic-gradient(from var(--angle),
      rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0),
      rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 0));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  filter: blur(4rem);
  opacity: 0.10;
  animation: spin 6s linear infinite;
}

#jar-header::after {
  content: '';
  position: absolute;
  width: 80vh;
  height: 80vh;
  background-image: url(img/GOD_GAMER.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: float 4s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes float {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-20px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}

#jar-header h1,
#jar-header h2 {
  margin: 0;
  transform: translateY(-40px);
  z-index: 2;
  position: relative;
}

#jar-header h1 {
  margin-bottom: 10px;
}

#jar-header h1 span {
  font-size: 5rem;
  text-transform: uppercase;
  letter-spacing: 10px;
}

#jar-header h2 span {
  font-size: 2.7vh;
  font-weight: 600px;
  line-height: 10px;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }

  to {
    --angle: 360deg;
  }
}



/* --- TEXTOS | TAMANHOS/FONTES ---*/
h1 {
  font-family: 'Art', sans-serif;

}

h2,
h3 {
  font-family: 'Art', sans-serif;

}

p,
.wrapper {
  font-family: 'HackerChaos', sans-serif;
}

h1,
h2 {
  filter: drop-shadow(0 0 2px rgb(0, 0, 0));
  filter:
    drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px -1px 0 black);
}

/*========================================================================*/


h1,
h2,
h3,
p,
.wrapper {
  background: linear-gradient(to right, red, yellow, lime, cyan, blue, red);
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 5s linear infinite;
  z-index: 100;
}

@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

h1,
h2,
h3 {
  text-align: center;
  font-weight: bold;
  margin-bottom: 1rem;
}

p {
  text-align: justify;
  margin-bottom: 1.5rem;
}

a {
  font-family: 'HackerChaos', sans-serif;
  background: linear-gradient(to right, rgb(0, 200, 255), blue, rgb(0, 200, 255));
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 4s linear infinite;
  text-decoration: none;
  text-align: center;
}

.footer {
  text-align: center;
}

.wrapper {
  text-align: center;
  margin-bottom: 0;

}

/*========================================================================*/


/*--- FUNDO DE CADA BOX ANIMADO (& Blur) RGB  ----*/
.summary,
.preamble,
.explanation,
.benefits,
.requirements,
.footer {
  max-width: 100vh;
  margin: 5rem auto 0 auto;
  padding: 2vh;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 20px;
  position: relative;
}

/*========================================================================*/

.participation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 6rem;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  background-image: url(img/GOD_GAMER2.png);
  background-repeat: no-repeat;
  padding-right: 45vh;
  padding-left: 60vh;
  background-size: 60vh;
  background-position: left bottom;
  text-align: center;
  position: relative;
}

.participation-content {
  max-width: 100vh;
  width: 100%;
  max-width: 100vh;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 20px;
  padding: 2rem;
  z-index: 2;
  position: relative;


}

.participation h3,
p {
  filter: drop-shadow(3px 3px 5px rgb(190, 190, 190));
  filter: drop-shadow(1px 1px 0 rgb(0, 0, 0));

}


.participation-content::before,
.participation-content::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle),
      red, yellow, lime, cyan, blue, red);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 20px;
  animation: spin 3s linear infinite;
}

.participation-content::before {
  filter: blur(1.5rem);
  opacity: 0.5;
}

.participation::before,
.participation::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0),
      rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 0));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px 0 3px 0;
  border-radius: 0px;
  animation: 3s spin linear infinite;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6rem;
  height: 20vh;
  background: rgba(255, 255, 255, 0.90);
  background-image: url(img/back.png);
  background-repeat: no-repeat;
  background-size: 100vh;
  background-position: right center;
  position: relative;
  gap: 4vh;
}

.footer a {
  filter: drop-shadow(3px 3px 5px rgb(190, 190, 190));
  filter: drop-shadow(1px 1px 0 rgb(0, 0, 0));
  text-transform: uppercase;
}

.summary::before,
.summary::after,
.preamble::before,
.preamble::after,
.explanation::before,
.explanation::after,
.benefits::before,
.benefits::after,
.requirements::before,
.requirements::after,
.footer::before,
.footer::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0),
      rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 0));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 20px;
  animation: 3s spin linear infinite;
}

.intro::before,
.summary::before,
.preamble::before,
.explanation::before,
.participation::before,
.benefits::before,
.requirements::before,
.footer::before {
  filter: blur(1.5rem);
  opacity: 0.5;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }

  to {
    --angle: 360deg;
  }
}

/*========================================================================*/



/*--- SIDEBAR HOVEAR REVEAL ---*/
.sidebar {
  position: fixed;
  top: 50%;
  right: -268px;
  transform: translateY(-50%);
  width: 250px;
  padding: 6rem 1rem 6rem 3rem;
  border-radius: 30px 0 0 30px;
  background: url('img/ram.png') no-repeat center center;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.8;
  z-index: 1000;
  transition: right 0.8s ease, opacity 1.2s ease-in;

  overflow: visible;
}

.sidebar::before,
.sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 100%;
  clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 0 100%);
  background: linear-gradient(to top,
      rgb(255, 0, 0), rgb(255, 166, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), magenta,
      rgb(255, 0, 0), rgb(255, 166, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), magenta,
      red);
  background-size: 100% 200%;
  animation: rgb-top 2s linear infinite;
  z-index: -v;
  pointer-events: none;
}

.sidebar {
  border-radius: 30px 0 0 30px;
  overflow: hidden;
}

.sidebar::before {
  filter: blur(2rem);
  opacity: 0.4;
  z-index: -2;
}

.sidebar::after {
  opacity: 1;
  z-index: -3;
}

.sidebar:hover {
  right: 0;
  opacity: 1;
  transition: right 0.6s ease, opacity 0.2s ease-in;
}

.sidebar h3 span {
  font-size: 1.3rem;
  margin-bottom: 6rem;
}

.sidebar ul {
  list-style: none;
  padding-left: 0;
}

.sidebar li {
  margin-bottom: 0.8rem;
  font-size: 1rem;
}

@keyframes rgb-top {
  0% {
    background-position: 0% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

/*========================================================================*/



/*--- IMAGENS FINAIS DIVS EXTRAS ---*/
#extraDiv1::before,
#extraDiv1::after,
#extraDiv2::before,
#extraDiv2::after,
#extraDiv3::before,
#extraDiv3::after,
#extraDiv4::before,
#extraDiv4::after,
#extraDiv5::before,
#extraDiv5::after,
#extraDiv6::before,
#extraDiv6::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0),
      rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 0));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 20px;
  animation: 3s spin linear infinite;
  transition: transform 0.3s ease;
}


#extraDiv2,
#extraDiv3,
#extraDiv4,
#extraDiv5,
#extraDiv6 {
  position: absolute;
  left: 60px;
  width: 280px;
  height: 160px;
  z-index: 999;
  opacity: 0;
  animation: fly-in-left 1.5s ease-out forwards;
}

#extraDiv1 {
  position: absolute;
  left: 55px;
  width: 280px;
  height: 120px;
  z-index: 999;
  opacity: 0;
  animation: fly-in-left 1.5s ease-out forwards;
}

#extraDiv1 {
  animation-delay: 1s;
  top: 110vh;
}

#extraDiv2 {
  animation-delay: 2s;
  top: 140vh;
}

#extraDiv3 {
  animation-delay: 3s;
  top: 185vh;
}

#extraDiv4 {
  animation-delay: 5s;
  top: 332vh;
}

#extraDiv5 {
  animation-delay: 6s;
  top: 365vh;
}

#extraDiv6 {
  animation-delay: 7s;
  top: 390vh;
}


#extraDiv1 span {
  background-image: url('img/setup1.jpeg');
}

#extraDiv2 span {
  background-image: url('img/setup2.jpeg');
}

#extraDiv3 span {
  background-image: url('img/setup3.jpeg');
}

#extraDiv4 span {
  background-image: url('img/setup4.jpeg');
}

#extraDiv5 span {
  background-image: url('img/setup5.jpeg');
}

#extraDiv6 span {
  background-image: url('img/setup6.jpeg');
}


#extraDiv1 span,
#extraDiv2 span,
#extraDiv3 span,
#extraDiv4 span,
#extraDiv5 span,
#extraDiv6 span {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  backdrop-filter: blur(1px);
  transition: transform 0.3s ease, filter 0.3s ease;
}


@keyframes fly-in-left {
  0% {
    opacity: 0;
    transform: translateX(-200px) scale(0.9) rotate(-8deg);
  }

  80% {
    transform: translateX(20px) scale(1.03) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
  }
}

#extraDiv1 span:hover,
#extraDiv3 span:hover,
#extraDiv5 span:hover {
  transform: scale(1.1) rotate(-5deg);
  filter: brightness(1.2);
}

#extraDiv2 span:hover,
#extraDiv4 span:hover,
#extraDiv6 span:hover {
  transform: scale(1.1) rotate(5deg);
  filter: brightness(1.2);
}

#extraDiv1:hover::before,
#extraDiv3:hover::before,
#extraDiv5:hover::before,
#extraDiv1:hover::after,
#extraDiv3:hover::after,
#extraDiv5:hover::after {
  transform: scale(1.1) rotate(-5deg);
  filter: brightness(1.2);
}

#extraDiv2:hover::before,
#extraDiv4:hover::before,
#extraDiv6:hover::before,
#extraDiv2:hover::after,
#extraDiv4:hover::after,
#extraDiv6:hover::after {
  transform: scale(1.1) rotate(5deg);
  filter: brightness(1.2);
}

/*========================================================================*/

/*--------------------
    * CONTATOS: *
Instagram: @jaosandrin
Steam: id/jackdoveneno 
GitHub: @jaosandrin
---------------------*/

/*--------------------
* MATERIAL DE AJUDA: *

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images
https://www.w3schools.com/css/css_positioning.asp
https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity-pt
https://origamid.com/projetos/flexbox-guia-completo/
https://github.com/HoanghoDev/youtube_v2/tree/main/scroll_animation
https://www.devmedia.com.br/css-opacity/38106
https://github.com/Amir-Ranjbr/glowyTextButton/tree/main
https://prismic.io/blog/css-animation-examples
https://csszengarden.com/pages/alldesigns

https://www.youtube.com/watch?v=0TnO1GzKWPc
https://www.youtube.com/watch?v=pFtxR-O78sY
https://www.youtube.com/watch?v=J6R9XAAgiUc&list=PLg1AQTV52KyjbQ0nMEWrq-iqvPNLW-g32&index=6
https://www.youtube.com/watch?v=ezP4kbOvs_E
https://www.youtube.com/watch?v=phWxA89Dy94
https://www.youtube.com/watch?v=xdap5e3-DwM
https://www.youtube.com/watch?v=dIUOWdwwZBw
https://www.youtube.com/watch?v=IuZdN381w9E
https://www.youtube.com/watch?v=XeOtvhjjHWY

---------------------*/