hr,
div#header,
[role="contentinfo"] {
  display: none;
}
/**Fonts**/
.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.arimo-regular-400 {
  font-family: "Arimo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.arimo-medium-500 {
  font-family: "Arimo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.arimo-bold-700 {
  font-family: "Arimo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 2px;
}

.font-italic {
  font-style: italic;
}

/**Geral**/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

a {
  text-decoration: none;
  color: white;
}

body.page-template-template-me .sobre-mim-texto a {
  color: #000;
  font-weight: bold;
}

ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

body {
  transition: background-color 0.5s ease;
  background-color: black;
  font-family: "Arimo", sans-serif;
  font-weight: 400;
  color: white;
}

body:not(.home):not(.error404) {
  transition: background-color 0.5s ease;
  background-color: white;
  color: black;
}

.dark-mode {
  background-color: #2d5420;
  color: #fff;
}

.light-content {
  display: block;
}

.dark-content {
  display: none;
}

.dark-mode .light-content {
  display: none;
}

.dark-mode .dark-content {
  display: block;
}

/* Quando o modo claro está ativado, exibe o conteúdo do tema claro */
.light-mode .light-content {
  display: block;
}

.light-mode .dark-content {
  display: none;
}

.light-mode > .container-slide.dark-content {
  display: none !important;
}

.portuguese-content,
.english-content {
  display: none;
}

/**Barra de Rolagem**/
/* Estilos para a barra de rolagem */
::-webkit-scrollbar {
  width: 7px;
  background: transparent;
  border: 1px solid #fff;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 20px;
}

/* Estilo para a alça da barra de rolagem */
::-webkit-scrollbar-thumb {
  background: #666f70;
  border-radius: 20px;
  border: 1px solid #fff;
}

/**Header**/

body.home > header {
  position: fixed;
}
body:not(.home) > header {
  position: absolute;
  background-color: transparent;
}
header {
  transition: background-color 0.5s ease;
  background-color: black;
  width: 100%;
  min-width: 100%;
  height: 150px;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px;
  z-index: 2;
}
body:not(.home):not(.error404) > header a,
body:not(.home):not(.error404) > header .navigation,
body:not(.home):not(.error404) > header .idiomas button,
body:not(.home):not(.error404) > header .navigation .menuToggle::before,
body:not(.home):not(.error404) .div-footer a {
  color: #000;
}
.dark-mode header {
  transition: background-color 0.5s ease;
  background-color: #2d5420;
}

#logoNousk {
  font-size: 6rem;
  margin-right: auto;
  margin-left: auto;
  letter-spacing: 3px;
}

/* Menu do Header */
.navigation {
  color: white;
  position: absolute;
  top: 60px;
  right: 25px;
  height: 50px;
  width: 50px;
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: width 0.5s, height 0.5s;
  transition-delay: 0s, 0.75s;
}

.navigation.active {
  width: 200px;
  height: 150px;
  transition: height 0.5s, width 0.5s;
  transition-delay: 0s, 0.75s;
}

.navigation .menuToggle {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition: 0.5s;
  cursor: pointer;
}

.navigation .menuToggle.active {
  background: transparent;
}

.navigation .menuToggle::before {
  content: "=";
  font-size: 2em;
  display: flex;
  justify-content: center;
  color: #fff;
  width: 100%;
  height: 50px;
  font-weight: 400;
  transition: 0.5s;
}

.navigation .menuToggle.active::before {
  transform: rotate(180deg);
}

.navigation ul {
  position: absolute;
  left: 0;
  width: 100%;
}

.navigation ul li {
  position: relative;
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.navigation ul li a {
  text-decoration: none;
}

.navigation ul li a .title {
  position: relative;
  display: block;
  line-height: 50px;
  white-space: nowrap;
}

.navigation ul li:hover a .title {
  color: #fff;
}

.navigation .menu-buttons {
  justify-content: center;
}

/**Fim**/

/**Botão PT / EN**/
.idiomas button {
  border: none;
  background-color: transparent;
  color: white;
  cursor: pointer;
  padding: 15px;
}

body.home .active-language,
body.error404 .active-language {
  border: 2px solid white !important;
}

.active-language {
  border: 2px solid black !important;
}

/**Botão de Tema**/
/* Estilo do botão de alternância de tema */
input[type="checkbox"] {
  position: relative;
  width: 90px;
  height: 20px;
  margin: 10px;
  outline: none;
  background: #000;
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: -5px -5px 20px rgba(255, 255, 255, 0.1),
    5px 5px 10px rgba(255, 255, 255, 0.1),
    inset -2px -2px 5px rgba(255, 255, 255, 0.1),
    inset 2px 2px 5px rgba(255, 255, 255, 0.5), 0 0 0 2px #1f1f1f;
  transition: 0.5s;
}

input[type="checkbox"]:checked {
  background-color: #00ff00;
  box-shadow: -5px -5px 20px rgba(0, 255, 0, 0.5),
    5px 5px 10px rgba(0, 255, 0, 0.5), inset -2px -2px 5px rgba(0, 255, 0, 0.5),
    inset 2px 2px 5px rgba(0, 255, 0, 0.5), 0 0 0 2px #00ff00;
  transition: 0.5s;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 20px;
  background: linear-gradient(to top, #000, #555);
  border-radius: 20px;
  box-shadow: 0 0 0 1px #000;
  transform: scale(0.98, 0.96);
  transition: 0.5s;
}

input[type="checkbox"]:checked::before {
  left: 30px;
}

/** Fim **/

section:not(section > section) {
  width: 100%;
  height: 100vh;
  padding-top: 20vh;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

section .efeito {
  width: 100%;
  height: 30vh;
  padding-top: 50vh;
}

.grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 80vw;
  align-items: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  max-width: 80vw;
  align-items: center;
}

/** Fonts Gerais**/
#chamada.bebas-neue-regular,
#projetos.bebas-neue-regular,
#blog .bebas-neue-regular {
  font-size: 4rem;
  letter-spacing: 2px;
}
/** Fim - Fonts Gerais**/

/**Profile **/
#profile {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  row-gap: 5px;
}

#profile img {
  margin: 10px auto;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  object-fit: cover;
}

#profile .arimo-bold-700 {
  font-size: 1.2rem;
}

body.home #profile:hover {
  padding: 50px 0;
  box-shadow: 0 0 10px #aaff7e, 0 0 50px #aaff7e;
}

#profile p {
  font-size: 1rem;
  line-height: 20px;
  letter-spacing: 2px;
}
@media only screen and (max-width: 970px) {
  header {
    top: 0;
  }
  body.home #profile {
    padding: 10px;
    border: 1px solid transparent;
    box-shadow: 0 0 10pxrgba (170, 255, 126, 0), 0 0 50px rgba(170, 255, 126, 0);
    animation: pulseProfile 8s ease-in-out infinite;
  }
  @keyframes pulseProfile {
    0% {
      border-color: transparent;
      box-shadow: 0 0 10px rgba(170, 255, 126, 0),
        0 0 50px rgba(170, 255, 126, 0);
    }
    50% {
      border-color: #fff;
      box-shadow: 0 0 10px #aaff7e, 0 0 50px #aaff7e;
    }
    100% {
      border-color: transparent;
      box-shadow: 0 0 10px rgba(170, 255, 126, 0),
        0 0 50px rgba(170, 255, 126, 0);
    }
  }

  .navigation {
    top: 100px;
  }
}

/** Slide-2 **/
.slide img {
  display: block;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  max-width: 100%;
}

.slide-wrapper {
  overflow: hidden;
}

.slide {
  display: flex;
}

.slide:hover {
  will-change: transform;
}

.slide li {
  flex-shrink: 0;
  height: 70vh;
  width: 80vw;
  max-width: 800px;
  margin: 0 20px;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0.8;
  transform: scale(0.8);
  transition: 0.4s;
}
.conteudo-slide {
  display: grid;
}
.conteudo-slide img {
  grid-column: 1;
  grid-row: 1/3;
}

.conteudo-slide div {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  grid-column: 1;
  grid-row: 2;
}

.conteudo-slide div > p {
  font-family: "Arimo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
}

.conteudo-slide div > a {
  font-family: "Arimo", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.2rem;
  border: 3px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
}

.slide li.active {
  opacity: 1;
  transform: scale(1);
}

.slide li.active > .conteudo-slide div {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 50px;
  transition: 0.5s;
}

.slide li.active > .conteudo-slide a {
  background-color: rgba(255, 255, 255, 0.1);
}

.slide li.active > .conteudo-slide a:hover {
  background-color: #aaff7e;
  box-shadow: 0 0 10px #aaff7e, 0 0 50px #aaff7e;
  border: 1px solid #000;
  color: black;
}

/** Fim- Slide2 **/

/** Blog **/
#blog {
  grid-template-columns: 1fr;
}

#blog p,
#blog ul li {
  font-size: 1rem;
  line-height: 20px;
  letter-spacing: 2px;
}

/**NOISE-EFFECT**/
.noise-effect {
  max-width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  position: relative;
  width: 100%;
  height: 40vh;
  background-image: url("<?php echo get_template_directory_uri(); ?>/noise-nousk.jpg");
  animation: animate 1s steps(10) infinite;
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }

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

.background-overlay {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  animation: fadeInOut 30s ease-in-out infinite;
  /* Animação para alterar a opacidade em 30 segundos */
}

@keyframes fadeInOut {
  0%,
  100% {
    background-color: rgba(0, 0, 0, 0.2);
    /* Começa e termina com opacidade 0.4 */
  }

  33.33% {
    background-color: rgba(0, 0, 0, 0.8);
    /* No meio, opacidade é 1 */
  }

  66.66% {
    background-color: rgba(0, 0, 0, 0.8);
    /* Opacidade permanece em 1 */
  }
}

/** Fim - Noise Effect **/

/** Liquid Effect **/
.liquid-effect {
  background-color: transparent;
  width: 100%;
  height: 70vh;
  max-width: 100%;
  margin-top: 50px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: url(#gooey);
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: linear-gradient(
    90deg,
    #420420,
    #420420,
    #420420,
    #bd698f,
    #bdffa0
  );
  border-radius: 50%;
}

.particles {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    #420420,
    #420420,
    #420420,
    #dba7bf,
    #bd698f,
    #bdffa0
  );
}

@keyframes liquidAnimate {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(var(--x), var(--y));
  }
}

svg {
  width: 0;
  height: 0;
}

/** Fim - Liquid Effect **/

/**Redes Sociais **/
#redes-sociais,
#contact-form {
  height: 100%;
  width: 100%;
  display: grid;
  align-content: center;
  row-gap: 50px;
}

#redes-sociais > div.redes-sociais {
  display: flex;
  justify-content: center;
  gap: 10px;
}

body.home > .redes-sociais a {
  display: flex;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 30px;
  border: 2px solid white;
  border-radius: 50%;
  background-color: transparent;
}

body.home > .redes-sociais a:hover {
  transition: 0.5s;
  background-color: #aaff7e;
  box-shadow: 0 0 10px #aaff7e, 0 0 50px #aaff7e;
  color: #000;
  border-color: #000;
}

/** Fim - Redes Sociais **/

/** Contact Form**/

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

.box {
  position: relative;
  width: 100%;
  height: 100px;
  background: repeating-conic-gradient(
    from var(--a),
    #9df2b9 0%,
    #9df2b9 5%,
    transparent 5%,
    transparent 40%,
    #9df2b9 50%
  );
  filter: drop-shadow(0 15px 50px #000);
  border-radius: 20px;
  animation: rotating 4s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

.box:hover {
  width: 100%;
  height: 500px;
}

@keyframes rotating {
  0% {
    --a: 0deg;
  }

  100% {
    --a: 360deg;
  }
}

.box::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(
    from var(--a),
    #9df2b9 0%,
    #9df2b9 5%,
    transparent 5%,
    transparent 40%,
    #9df2b9 50%
  );
  filter: drop-shadow(0 15px 50px #000);
  border-radius: 20px;
  animation: rotating 4s linear infinite;
  animation-delay: -1s;
}

.box::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: transparent;
  border-radius: 15px;
  border: 8px solid transparent;
}

.login {
  position: absolute;
  inset: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
  box-shadow: inset 10px 20px rgba(0, 0, 0, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transition: 0.5s;
  color: #fff;
  overflow: hidden;
  height: 60%;
}

.box:hover .login {
  inset: 30px;
  height: 80%;
}

.loginBx {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: 70%;
  transform: translateY(140px);
  transition: 0.5s;
}

.box:hover .loginBx {
  transform: translateY(0px);
  padding-top: 20px;
}

.loginBx span {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  margin-top: 15px;
  margin-bottom: 15px;
}

.loginBx input,
.loginBx textarea {
  font-family: "Arimo", sans-serif;
  width: 100%;
  padding: 10px 20px;
  outline: none;
  border: none;
  font-size: 1em;
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid #fff;
  border-radius: 30px;
}

.loginBx input::placeholder {
  color: #999;
}

.loginBx input[type="submit"] {
  font-family: "Arimo", sans-serif;
  background: #aaff7e;
  border: none;
  font-weight: 500;
  color: #111;
  cursor: pointer;
  transition: 0.5s;
}

.loginBx input[type="submit"]:hover {
  border: 1px solid #000;
  box-shadow: 0 0 10px #aaff7e, 0 0 50px #aaff7e;
}

/** Fim - Contact Form**/

/**Footer**/
footer > div > div {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

footer .redes-sociais {
  display: flex;
  justify-content: center;
  gap: 10px;
}
body:not(.single-post):not(.page-template-template-blog)
  > footer
  .redes-sociais
  a {
  color: #000;
  display: flex;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 30px;
  font-size: 1rem;
  border: 2px solid black;
  border-radius: 50%;
  background-color: transparent;
}

body:not(.single-post):not(.page-template-template-blog)
  > footer
  .redes-sociais
  a:hover {
  transition: 0.5s;
  background-color: white;
  box-shadow: 0 0 50px #024024, 0 0 50px #024024;
  color: #000;
  border-color: #000;
}

body.single-post > footer .redes-sociais a,
body.page-template-template-blog > footer .redes-sociais a {
  transition: 1s;
  display: grid;
  justify-content: center;
  align-content: center;
  color: transparent;
  background-color: #000;
  width: 20px;
  height: 20px;
  border: 2px solid black;
  border-radius: 50%;
}

body.single-post > footer .redes-sociais a:hover,
body.page-template-template-blog > footer .redes-sociais a:hover {
  transition: 0.5s;
  background-color: transparent;
  display: grid;
  justify-content: center;
  align-content: center;
  width: 40px;
  height: 4px;
  padding: 40px;
  border-radius: 50%;
  box-shadow: 0 0 50px #024024, 0 0 50px #024024;
  font-size: 0.8rem;
  color: #000;
  margin-left: 10px;
  margin-right: 10px;
}

main:not(body.home) {
  margin: 100px auto;
}

.page-template-template-me #intro {
  margin-top: 50px;
}

@media only screen and (max-width: 970px) {
  .page-template-template-home #projetos .slide li {
    height: 50vh;
  }
  .page-template-template-home #contato {
    padding-top: 50px;
  }
}