@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* =======| TEST AREA |======= */

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

:root {
  /* Dark || https://coolors.co/09040b-580d91-6f23a9-c591ed-f3ecf8 */
  --text-dark: #f3ecf8;
  --background-dark: #09040b;
  --background-dark-80-opct: rgba(9, 4, 11, 0.8);
  --primary-dark: #c591ed;
  --secondary-dark: #580d91;
  --acent-dark: #6f23a9;

  /* Light || https://coolors.co/0e0713-46126e-a256dc-b96ef2-f9f4fb */
  --text-light: #0e0713;
  --background-light: #f9f4fb;
  --primary-light: #46126e;
  --secondary-light: #b96ef2;
  --acent-light: #a256dc;
}

/* Breakpoints */

/* Extra small */
@media (max-width: 575px) {
}

/* Small */
@media (min-width: 576px) {
}

/* Medium */
@media (min-width: 768px) {
}

/* Large */
@media (min-width: 992px) {
}

/* Extra Large */
@media (min-width: 1200px) {
}

/* Extra Extra Large */
@media (min-width: 1400px) {
}

/* ####### */

body {
  font-family: "Poppins", sans-serif;
  color: var(--text-dark);

  height: 100vh;

  background-color: var(--acent-dark);
  background: linear-gradient(
    135deg,
    #5124c0 0%,
    #6f23a9 12.5%,
    #b62070 25%,
    #6f23a9 37.5%,
    #5124c0 50%,
    #6f23a9 62.5%,
    #b62070 75%,
    #6f23a9 87.5%,
    #5124c0 100%
  );

  /* backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px); */

  background-size: 200% 200%;
  animation: gradient-animation 20s linear infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

#inner-body {
  --margin_size: 0.6rem;
  --full_vh: calc(100vh - calc(var(--margin_size) * 2));
  --full_vw: calc(100vw - calc(var(--margin_size) * 2));

  position: absolute;
  height: var(--full_vh);
  width: var(--full_vw);
  top: var(--margin_size);
  left: var(--margin_size);

  background-color: var(--background-dark);

  /* Shadow */

  /* box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.35); */
  /* border: 3px solid rgba(255, 255, 255, 0.15); */

  /* Glass */
  /* 
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 4px 2px rgba(255, 255, 255, 0.2);
  */

  border-radius: 8px;

  overflow: scroll;
}

.home-img-background {
  height: var(--full_vh);

  background-color: var(--background-dark);

  background-image: linear-gradient(
      180deg,
      var(--background-dark-80-opct) 75%,
      var(--background-dark)
    ),
    url("../images/pexels-sora-shimazaki-5926382.jpg"); /* TODO Alterar para outra foto SEM UM MAC */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
}

.div-home-main-title {
  display: flex;
  width: fit-content;
  overflow: hidden;
}

.home-main-title-name,
.home-main-title-dev {
  --title-font-size: 10vw;
  font-size: var(--title-font-size);
  font-family: "Poppins", sans-serif;
  font-weight: 600;

  margin: 0;
  padding: 0;
  width: 100%;

  text-align: center;

  cursor: default;

  mix-blend-mode: screen;
  color: black;
  background-color: white;

  transition: 0.3s ease-in-out;
}

/* Large */
@media (min-width: 992px) {
  .home-main-title-name,
  .home-main-title-dev {
    --title-font-size: 9vw;
  }
}

/* Extra Large || Extra Extra Large */
@media (min-width: 1200px) {
  .home-main-title-name,
  .home-main-title-dev {
    --title-font-size: 7vw;
  }
}

.home-main-title-dev {
  transform: translateY(98%);
}

.div-home-main-title:hover .home-main-title-name {
  transform: translateY(-98%);
}

.div-home-main-title:hover .home-main-title-dev {
  transform: translateY(0%);
}

.chevron-down-icon {
  --icon-size: 75px;
  padding: 0.75rem;

  display: flex;
  border-radius: 100px;
  width: var(--icon-size);
  height: var(--icon-size);

  mix-blend-mode: screen;
  color: black;
  background-color: var(--primary-dark);

  animation: grow 4s infinite ease-in-out;
}

/* Medium || Large || Extra Large || Extra Extra Large */
@media (min-width: 768px) {
  .chevron-down-icon {
    --icon-size: 65px;
    padding: 0.75rem;
  }
}

.chevron-down-icon svg {
  width: max-content;
  height: max-content;

  margin: auto;
  justify-content: center;
  align-items: center;
}

.circle-grow {
  position: relative;
  z-index: 1;
}

.circle-grow::after {
  content: "";
  /* display: inline-block; */
  height: 100%;
  width: 100%;
  border-radius: 100px;
  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;

  border: solid 1px var(--primary-dark);
  box-shadow: inset 0 0 10px var(--primary-dark);
  /* border: solid 1px white;
  box-shadow: inset 0 0 10px white; */

  animation: grow-halo 4s infinite ease-in;
}

@keyframes grow {
  0% {
    /* transform: scale(95%); */
    background-color: var(--primary-dark);
  }

  50% {
    /* transform: scale(103%); */
    background-color: #dcbff3;
  }

  100% {
    /* transform: scale(95%); */
    background-color: var(--primary-dark);
  }
}

@keyframes grow-halo {
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.content {
  background-color: var(--background-dark);
}

.main-box {
  flex: 1 0 auto;
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
  max-width: 1400px;
}

/* Small */
@media (min-width: 576px) {
  .main-box {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Medium */
@media (min-width: 768px) {
  .main-box {
    padding-left: 66px;
    padding-right: 66px;
  }
}

/* Large || Extra Large || Extra Extra Large */
@media (min-width: 992px) {
  .main-box {
    padding-left: 125px;
    padding-right: 125px;
  }
}

.destaques-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.destaques-col:nth-child(odd) .project-img-destaques {
  margin-right: 1rem;
}

.destaques-col:nth-child(even) {
  flex-direction: row-reverse;
}

.destaques-col:nth-child(even) .project-img-destaques {
  margin-left: 1rem;
}

.project-img-destaques {
  float: left;

  border-radius: 15px;

  min-width: 300px;
  height: auto;
}

.project-img-destaques img {
  max-width: 300px;
  height: auto;

  border-radius: 15px;
}

.project-link-card {
  text-decoration: none;
  color: unset;
}

.card {
  /* transition: all 0.3s ease-in-out; */
  /* background-color: #1a1a1a27; */
  background-color: transparent;
  transition: all 400ms ease-in-out;
  /* box-shadow: 0px 5px 20px hsla(240, 7%, 22%, 0.365); */
  color: #f4f4f4;
}

.card.enable:hover {
  /* box-shadow: 0px 5px 10px 5px rgba(255, 255, 255, 0.35); */
  /* background-position-x: 0%; */
  transform: scale(1.01);
  box-shadow: 0px 5px 25px hsla(266, 100%, 60%, 0.15);
}

a.disable {
  pointer-events: none;
}

.project-text-destaques {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dark-box {
  background-color: #1a1a1a;
  color: #f4f4f4;
  border-radius: 25px;
  overflow: hidden;

  height: 100%;
}

.dark-box img {
  width: 100%;
}

.iframe-json iframe {
  width: 100%;
}

#divImg {
  padding: 10px;
}

#divImg img {
  border-radius: 15px;
}

#divJson pre {
  word-wrap: break-word;
  white-space: pre-wrap;
}