@charset "UTF-8";
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

header.header-mobile {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
header.header-mobile nav div.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px 18px 25px;
  border-bottom: 1px solid #26262f;
  background-color: #0a0a0f;
  position: fixed;
  z-index: 999;
  width: 100%;
}
header.header-mobile nav div.header-container div.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
header.header-mobile nav div.header-container div.icon-container img {
  width: 35px;
  height: 35px;
}
header.header-mobile nav div.header-container div.icon-container h1 {
  color: white;
  font-size: 22px;
}
header.header-mobile nav div.header-container img.menu-icon {
  transform: rotate(90deg);
  width: 25px;
  height: 20px;
  cursor: pointer;
  transition: 0.5s ease;
}
header.header-mobile nav div.header-container img.menu-icon.closed {
  transform: rotate(0deg);
}
header.header-mobile nav ul.mobile-menu {
  position: fixed;
  z-index: 998;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateY(71px);
}
header.header-mobile nav ul.mobile-menu a {
  list-style: none;
  font-style: none;
  text-decoration: none;
}
header.header-mobile nav ul.mobile-menu a li {
  padding: 12px 25px 12px 25px;
  background-color: #1a1a24;
  color: #8b8997;
  border: 1px solid #26262f;
  transition: 0.2s ease;
}
header.header-mobile nav ul.mobile-menu a li:hover {
  color: white;
}
header.header-mobile nav ul.mobile-menu a li:active {
  background-color: #7a1962;
  border: 1px solid rgb(255, 45, 176);
  color: #ff2db0;
}
header.header-mobile nav ul.mobile-menu {
  transition: 0.5s ease;
}
header.header-mobile nav ul.mobile-menu.closed {
  transform: translateY(-159px);
}
@media (min-width: 1200px) {
  header.header-mobile {
    display: none;
  }
}

header.header-pc {
  border-right: 1px solid #26262f;
  width: 250px;
  height: 100vh;
  padding: 20px;
  position: fixed;
  left: 0;
  top: 0;
}
header.header-pc nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
  height: 100%;
}
header.header-pc nav div.header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  gap: 40px;
}
header.header-pc nav div.header-container div.icon-container {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 10px;
}
header.header-pc nav div.header-container div.icon-container img {
  width: 30px;
}
header.header-pc nav div.header-container div.icon-container h1 {
  font-size: 24px;
  color: white;
  font-weight: 500;
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
header.header-pc nav div.header-container ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
header.header-pc nav div.header-container ul a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  list-style: none;
  font-style: none;
  text-decoration: none;
  border: 1px solid transparent;
  transition: 0.3s ease;
}
header.header-pc nav div.header-container ul a li.ul-item {
  color: #8b8997;
  font-size: 15px;
  transition: 0.2s ease;
  font-weight: 600;
}
header.header-pc nav div.header-container ul a li.ul-item:hover {
  color: white;
}
header.header-pc nav div.header-container ul a li.ul-mark {
  font-size: 10px;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #8b8997;
}
header.header-pc nav div.header-container ul a:hover {
  background-color: #13131b;
}
header.header-pc nav div.header-container ul a:hover li {
  color: white;
}
header.header-pc nav div.header-container ul a:active {
  background-color: rgba(255, 45, 176, 0.08);
  border: 1px solid #ff2db0;
}
header.header-pc nav div.header-container ul a:active li {
  color: #ff2db0;
}
header.header-pc nav div.version-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #26262f;
  padding-top: 14px;
}
header.header-pc nav div.version-container p {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #8b8997;
  font-size: 12px;
}
@media (max-width: 1200px) {
  header.header-pc {
    display: none;
  }
}

/*

<header class="header-pc">
    <nav>
        <div class="header-container">
            <div class="icon-container">
                <img src="./img/icons/favicon.png" alt="Picode">
                <h1>Picode</h1>
            </div>

            <ul>
                <a href="index.html">
                    <li>Início</li>
                    <li>~/</li>
                </a>
                <a href="./pages/encoder.html">
                    <li>Encoder</li>
                    <li>->01</li>
                </a>
                <a href="./pages/decoder.html">
                    <li>Decoder</li>
                    <li>01-></li>
                </a>
                <a href="./pages/generate_pid.html">
                    <li>Gerar PID</li>
                    <li>key</li>
                </a>
                <a href="./pages/dev.html">
                    <li>DEV</li>
                    <li>π</li>
                </a>
            </ul>
        </div>

        <div class="version-container">
            <p>picode</p>
            <p>v1.0</p>
        </div>
    </nav>
</header>

*/
section.hero {
  padding: 100px 20px 80px 20px;
}
@media (min-width: 1200px) {
  section.hero {
    padding: 0;
  }
}
section.hero div.section-header-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
section.hero div.section-header-container p.section-label {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #28e0d6;
  font-size: 14px;
  font-weight: 400;
}
section.hero div.section-header-container h2.section-title {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: clamp(30px, 7vw, 60px);
  color: white;
  font-weight: 800;
}
section.hero div.section-header-container p.section-description {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #eceaf2;
  line-height: 28px;
  font-size: clamp(16px, 2.5vh, 32px);
}
section.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}
section.hero div.buttons-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  margin-bottom: 80px;
}
section.hero div.buttons-container a {
  width: 100%;
}
section.hero div.buttons-container a button {
  cursor: pointer;
  width: 100%;
  border-radius: 50px;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: white;
  font-weight: 500;
  padding: 14px;
  font-size: 16px;
  transition: 0.2s ease;
}
section.hero div.buttons-container a button.generate-pid {
  cursor: pointer;
  width: 100%;
  border-radius: 50px;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: white;
  font-weight: 500;
  padding: 14px;
  font-size: 16px;
  transition: 0.2s ease;
  background-color: #ff2db0;
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
}
section.hero div.buttons-container a button.generate-pid:hover {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.6);
  transform: translateY(-2px);
}
section.hero div.buttons-container a button.generate-pid:active {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
  transform: translateY(0px);
}
section.hero div.buttons-container a button.encoder {
  background-color: transparent;
  border: 1px solid #26262f;
}
section.hero div.buttons-container a button.encoder:hover {
  border: 1px solid white;
  transform: translateY(-2px);
}
section.hero p.sentences {
  margin-top: 20px;
  color: #5e5c69;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: 14px;
  margin-bottom: 80px;
}
section.hero div.info-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
section.hero div.info-container div.info h3 {
  color: white;
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: 32px;
  font-weight: 700;
}
section.hero div.info-container div.info p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #5e5c69;
  font-size: 14px;
  font-weight: 300;
}
@media (min-width: 1200px) {
  section.hero div.buttons-container {
    grid-template-columns: repeat(2, 1fr);
  }
  section.hero p.sentences {
    text-align: center;
  }
  section.hero div.info-container {
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
  }
}

section.encoder div.section-header-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
section.encoder div.section-header-container p.section-label {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #28e0d6;
  font-size: 14px;
  font-weight: 400;
}
section.encoder div.section-header-container h2.section-title {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: clamp(30px, 7vw, 60px);
  color: white;
  font-weight: 800;
}
section.encoder div.section-header-container p.section-description {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #eceaf2;
  line-height: 28px;
  font-size: clamp(16px, 2.5vh, 32px);
}
section.encoder {
  padding: 100px 20px 80px 20px;
}
@media (min-width: 1200px) {
  section.encoder {
    padding: 0;
  }
}
section.encoder div.encoder-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
section.encoder div.encoder-container div.input-container, section.encoder div.encoder-container div.output-container {
  background-color: #13131b;
  border: 1px solid #26262f;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
section.encoder div.encoder-container div.input-container div.information-container, section.encoder div.encoder-container div.output-container div.information-container {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-weight: 300;
}
section.encoder div.encoder-container div.input-container div.information-container p, section.encoder div.encoder-container div.output-container div.information-container p {
  color: #8b8997;
  font-size: 14px;
}
section.encoder div.encoder-container div.input-container label.send-file-button, section.encoder div.encoder-container div.output-container label.send-file-button {
  background-color: transparent;
  border: 1px dashed #26262f;
  color: #8b8997;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
}
section.encoder div.encoder-container div.input-container label.send-file-button label, section.encoder div.encoder-container div.output-container label.send-file-button label {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  cursor: pointer;
  font-weight: 500;
}
section.encoder div.encoder-container div.input-container label.send-file-button input, section.encoder div.encoder-container div.output-container label.send-file-button input {
  display: none;
}
section.encoder div.encoder-container div.input-container label.send-file-button img, section.encoder div.encoder-container div.output-container label.send-file-button img {
  width: 12px;
  cursor: pointer;
}
section.encoder div.encoder-container div.input-container label.send-file-button:hover, section.encoder div.encoder-container div.output-container label.send-file-button:hover {
  border: 1px dashed #28e0d6;
}
section.encoder div.encoder-container div.input-container textarea.encoder-input, section.encoder div.encoder-container div.output-container textarea.encoder-input, section.encoder div.encoder-container div.output-container textarea.encoder-output {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  background-color: #0a0a0f;
  border: 1px solid #26262f;
  border-radius: 8px;
  padding: 14px;
  height: 200px;
  font-weight: 200;
  color: #eceaf2;
  transition: 0.3s ease;
}
section.encoder div.encoder-container div.input-container textarea.encoder-input:hover, section.encoder div.encoder-container div.output-container textarea.encoder-input:hover, section.encoder div.encoder-container div.output-container textarea.encoder-output:hover {
  border: 1px solid #ff2db0;
}
section.encoder div.encoder-container div.input-container textarea.encoder-input::-moz-placeholder, section.encoder div.encoder-container div.output-container textarea.encoder-input::-moz-placeholder, section.encoder div.encoder-container div.output-container textarea.encoder-output::-moz-placeholder {
  color: #5e5c69;
}
section.encoder div.encoder-container div.input-container textarea.encoder-input::placeholder, section.encoder div.encoder-container div.output-container textarea.encoder-input::placeholder, section.encoder div.encoder-container div.output-container textarea.encoder-output::placeholder {
  color: #5e5c69;
}
section.encoder div.encoder-container div.input-container a, section.encoder div.encoder-container div.output-container a {
  list-style: none;
  font-style: none;
  text-decoration: none;
}
section.encoder div.encoder-container div.input-container a button.encode-button, section.encoder div.encoder-container div.output-container a button.encode-button {
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: white;
  font-weight: 500;
  padding: 14px;
  font-size: 16px;
  transition: 0.2s ease;
  background-color: #ff2db0;
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
}
section.encoder div.encoder-container div.input-container a button.encode-button:hover, section.encoder div.encoder-container div.output-container a button.encode-button:hover {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.6);
  transform: translateY(-2px);
}
section.encoder div.encoder-container div.input-container a button.encode-button:active, section.encoder div.encoder-container div.output-container a button.encode-button:active {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
  transform: translateY(0px);
}
section.encoder div.encoder-container div.output-container {
  justify-content: space-between;
}
section.encoder div.encoder-container div.output-container div.save-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
section.encoder div.encoder-container div.output-container div.save-buttons-container button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px;
  font-size: 16px;
  background-color: transparent;
  border: 1px solid #26262f;
  border-radius: 8px;
  color: #8b8997;
  transition: 0.3s ease;
  cursor: pointer;
}
section.encoder div.encoder-container div.output-container div.save-buttons-container button img {
  width: 14px;
}
section.encoder div.encoder-container div.output-container div.save-buttons-container button:hover {
  border: 1px solid white;
}
section.encoder div.encoder-container div.output-container div.save-buttons-container button:active {
  border: 1px solid #26262f;
}
@media (min-width: 1200px) {
  section.encoder div.encoder-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

div.popup-bg {
  opacity: 1;
  pointer-events: auto;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s ease;
}
div.popup-bg div.popup-container {
  transform: scale(1);
  width: 90%;
  max-width: 600px;
  background-color: #1a1a24;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #26262f;
  box-shadow: 0 0 10px 0 black;
  transition: 0.5s ease;
}
div.popup-bg div.popup-container h2 {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-weight: 700;
  color: white;
  font-size: 27px;
}
div.popup-bg div.popup-container p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #8b8997;
  font-weight: 400;
  text-align: center;
  font-size: 16px;
}
div.popup-bg div.popup-container div.buttons-container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}
div.popup-bg div.popup-container div.buttons-container button.generate-pid-button {
  cursor: pointer;
  width: 100%;
  border-radius: 50px;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: white;
  font-weight: 500;
  padding: 14px;
  font-size: 16px;
  transition: 0.2s ease;
  background-color: #ff2db0;
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
}
div.popup-bg div.popup-container div.buttons-container button.generate-pid-button:hover {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.6);
  transform: translateY(-2px);
}
div.popup-bg div.popup-container div.buttons-container button.generate-pid-button:active {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
  transform: translateY(0px);
}
div.popup-bg div.popup-container div.buttons-container button.maybe-later-button {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border-radius: 50px;
  background-color: transparent;
  border: 1px solid #26262f;
  color: #8b8997;
  cursor: pointer;
  transition: 0.2s ease;
}
div.popup-bg div.popup-container div.buttons-container button.maybe-later-button:hover {
  border: 1px solid white;
  color: white;
}
div.popup-bg div.popup-container div.buttons-container button.maybe-later-button:active {
  border: 1px solid #26262f;
  color: #8b8997;
}
@media (min-width: 1200px) {
  div.popup-bg div.popup-container h2 {
    font-size: 46px;
  }
}

div.popup-bg.closed {
  opacity: 0;
  pointer-events: none;
}
div.popup-bg.closed div.popup-container {
  transform: scale(0.5);
}

section.decoder div.section-header-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
section.decoder div.section-header-container p.section-label {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #28e0d6;
  font-size: 14px;
  font-weight: 400;
}
section.decoder div.section-header-container h2.section-title {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: clamp(30px, 7vw, 60px);
  color: white;
  font-weight: 800;
}
section.decoder div.section-header-container p.section-description {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #eceaf2;
  line-height: 28px;
  font-size: clamp(16px, 2.5vh, 32px);
}
section.decoder {
  padding: 100px 20px 80px 20px;
}
@media (min-width: 1200px) {
  section.decoder {
    padding: 0;
  }
}
section.decoder div.decoder-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
section.decoder div.decoder-container div.input-container, section.decoder div.decoder-container div.output-container {
  background-color: #13131b;
  border: 1px solid #26262f;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
section.decoder div.decoder-container div.input-container div.information-container, section.decoder div.decoder-container div.output-container div.information-container {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-weight: 300;
}
section.decoder div.decoder-container div.input-container div.information-container p, section.decoder div.decoder-container div.output-container div.information-container p {
  color: #8b8997;
  font-size: 14px;
}
section.decoder div.decoder-container div.input-container label.send-file-button, section.decoder div.decoder-container div.output-container label.send-file-button {
  background-color: transparent;
  border: 1px dashed #26262f;
  color: #8b8997;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
}
section.decoder div.decoder-container div.input-container label.send-file-button label, section.decoder div.decoder-container div.output-container label.send-file-button label {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  cursor: pointer;
  font-weight: 500;
}
section.decoder div.decoder-container div.input-container label.send-file-button input, section.decoder div.decoder-container div.output-container label.send-file-button input {
  display: none;
}
section.decoder div.decoder-container div.input-container label.send-file-button img, section.decoder div.decoder-container div.output-container label.send-file-button img {
  width: 12px;
  cursor: pointer;
}
section.decoder div.decoder-container div.input-container label.send-file-button:hover, section.decoder div.decoder-container div.output-container label.send-file-button:hover {
  border: 1px dashed #28e0d6;
}
section.decoder div.decoder-container div.input-container textarea.decoder-input, section.decoder div.decoder-container div.output-container textarea.decoder-input, section.decoder div.decoder-container div.output-container textarea.decoder-output {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  background-color: #0a0a0f;
  border: 1px solid #26262f;
  border-radius: 8px;
  padding: 14px;
  height: 200px;
  font-weight: 200;
  color: #eceaf2;
  transition: 0.3s ease;
}
section.decoder div.decoder-container div.input-container textarea.decoder-input:hover, section.decoder div.decoder-container div.output-container textarea.decoder-input:hover, section.decoder div.decoder-container div.output-container textarea.decoder-output:hover {
  border: 1px solid #ff2db0;
}
section.decoder div.decoder-container div.input-container textarea.decoder-input::-moz-placeholder, section.decoder div.decoder-container div.output-container textarea.decoder-input::-moz-placeholder, section.decoder div.decoder-container div.output-container textarea.decoder-output::-moz-placeholder {
  color: #5e5c69;
}
section.decoder div.decoder-container div.input-container textarea.decoder-input::placeholder, section.decoder div.decoder-container div.output-container textarea.decoder-input::placeholder, section.decoder div.decoder-container div.output-container textarea.decoder-output::placeholder {
  color: #5e5c69;
}
section.decoder div.decoder-container div.input-container a, section.decoder div.decoder-container div.output-container a {
  list-style: none;
  font-style: none;
  text-decoration: none;
}
section.decoder div.decoder-container div.input-container a button.decode-button, section.decoder div.decoder-container div.output-container a button.decode-button {
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: white;
  font-weight: 500;
  padding: 14px;
  font-size: 16px;
  transition: 0.2s ease;
  background-color: #ff2db0;
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
}
section.decoder div.decoder-container div.input-container a button.decode-button:hover, section.decoder div.decoder-container div.output-container a button.decode-button:hover {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.6);
  transform: translateY(-2px);
}
section.decoder div.decoder-container div.input-container a button.decode-button:active, section.decoder div.decoder-container div.output-container a button.decode-button:active {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
  transform: translateY(0px);
}
section.decoder div.decoder-container div.output-container {
  justify-content: space-between;
}
section.decoder div.decoder-container div.output-container div.save-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
section.decoder div.decoder-container div.output-container div.save-buttons-container button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px;
  font-size: 16px;
  background-color: transparent;
  border: 1px solid #26262f;
  border-radius: 8px;
  color: #8b8997;
  transition: 0.3s ease;
  cursor: pointer;
}
section.decoder div.decoder-container div.output-container div.save-buttons-container button img {
  width: 14px;
}
section.decoder div.decoder-container div.output-container div.save-buttons-container button:hover {
  border: 1px solid white;
}
section.decoder div.decoder-container div.output-container div.save-buttons-container button:active {
  border: 1px solid #26262f;
}
@media (min-width: 1200px) {
  section.decoder div.decoder-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

div.popup-bg {
  opacity: 1;
  pointer-events: auto;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s ease;
}
div.popup-bg div.popup-container {
  transform: scale(1);
  width: 90%;
  max-width: 600px;
  background-color: #1a1a24;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #26262f;
  box-shadow: 0 0 10px 0 black;
  transition: 0.5s ease;
}
div.popup-bg div.popup-container h2 {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-weight: 700;
  color: white;
  font-size: 27px;
}
div.popup-bg div.popup-container p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #8b8997;
  font-weight: 400;
  text-align: center;
  font-size: 16px;
}
div.popup-bg div.popup-container div.buttons-container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}
div.popup-bg div.popup-container div.buttons-container button.generate-pid-button {
  cursor: pointer;
  width: 100%;
  border-radius: 50px;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: white;
  font-weight: 500;
  padding: 14px;
  font-size: 16px;
  transition: 0.2s ease;
  background-color: #ff2db0;
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
}
div.popup-bg div.popup-container div.buttons-container button.generate-pid-button:hover {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.6);
  transform: translateY(-2px);
}
div.popup-bg div.popup-container div.buttons-container button.generate-pid-button:active {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
  transform: translateY(0px);
}
div.popup-bg div.popup-container div.buttons-container button.maybe-later-button {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border-radius: 50px;
  background-color: transparent;
  border: 1px solid #26262f;
  color: #8b8997;
  cursor: pointer;
  transition: 0.2s ease;
}
div.popup-bg div.popup-container div.buttons-container button.maybe-later-button:hover {
  border: 1px solid white;
  color: white;
}
div.popup-bg div.popup-container div.buttons-container button.maybe-later-button:active {
  border: 1px solid #26262f;
  color: #8b8997;
}
@media (min-width: 1200px) {
  div.popup-bg div.popup-container h2 {
    font-size: 46px;
  }
}

div.popup-bg.closed {
  opacity: 0;
  pointer-events: none;
}
div.popup-bg.closed div.popup-container {
  transform: scale(0.5);
}

section.pid div.section-header-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
section.pid div.section-header-container p.section-label {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #28e0d6;
  font-size: 14px;
  font-weight: 400;
}
section.pid div.section-header-container h2.section-title {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: clamp(30px, 7vw, 60px);
  color: white;
  font-weight: 800;
}
section.pid div.section-header-container p.section-description {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #eceaf2;
  line-height: 28px;
  font-size: clamp(16px, 2.5vh, 32px);
}
section.pid {
  padding: 100px 20px 80px 20px;
}
@media (min-width: 1200px) {
  section.pid {
    padding: 0;
  }
}
section.pid div.pid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
section.pid div.pid-container div.input-container, section.pid div.pid-container section.encoder div.encoder-container div.output-container, section.encoder div.encoder-container section.pid div.pid-container div.output-container, section.pid div.pid-container section.decoder div.decoder-container div.output-container, section.decoder div.decoder-container section.pid div.pid-container div.output-container {
  background-color: #13131b;
  border: 1px solid #26262f;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
section.pid div.pid-container div.input-container div.information-container, section.pid div.pid-container section.encoder div.encoder-container div.output-container div.information-container, section.encoder div.encoder-container section.pid div.pid-container div.output-container div.information-container, section.pid div.pid-container section.decoder div.decoder-container div.output-container div.information-container, section.decoder div.decoder-container section.pid div.pid-container div.output-container div.information-container {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-weight: 300;
}
section.pid div.pid-container div.input-container div.information-container p, section.pid div.pid-container section.encoder div.encoder-container div.output-container div.information-container p, section.encoder div.encoder-container section.pid div.pid-container div.output-container div.information-container p, section.pid div.pid-container section.decoder div.decoder-container div.output-container div.information-container p, section.decoder div.decoder-container section.pid div.pid-container div.output-container div.information-container p {
  color: #8b8997;
  font-size: 14px;
}
section.pid div.pid-container div.input-container textarea.pid-input, section.pid div.pid-container section.encoder div.encoder-container div.output-container textarea.pid-input, section.encoder div.encoder-container section.pid div.pid-container div.output-container textarea.pid-input, section.pid div.pid-container section.decoder div.decoder-container div.output-container textarea.pid-input, section.decoder div.decoder-container section.pid div.pid-container div.output-container textarea.pid-input {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  background-color: #0a0a0f;
  border: 1px solid #26262f;
  border-radius: 8px;
  padding: 14px;
  height: 200px;
  font-weight: 200;
  color: #eceaf2;
  transition: 0.3s ease;
}
section.pid div.pid-container div.input-container textarea.pid-input:hover, section.pid div.pid-container section.encoder div.encoder-container div.output-container textarea.pid-input:hover, section.encoder div.encoder-container section.pid div.pid-container div.output-container textarea.pid-input:hover, section.pid div.pid-container section.decoder div.decoder-container div.output-container textarea.pid-input:hover, section.decoder div.decoder-container section.pid div.pid-container div.output-container textarea.pid-input:hover {
  border: 1px solid #ff2db0;
}
section.pid div.pid-container div.input-container textarea.pid-input::-moz-placeholder, section.pid div.pid-container section.encoder div.encoder-container div.output-container textarea.pid-input::-moz-placeholder, section.encoder div.encoder-container section.pid div.pid-container div.output-container textarea.pid-input::-moz-placeholder, section.pid div.pid-container section.decoder div.decoder-container div.output-container textarea.pid-input::-moz-placeholder, section.decoder div.decoder-container section.pid div.pid-container div.output-container textarea.pid-input::-moz-placeholder {
  color: #5e5c69;
}
section.pid div.pid-container div.input-container textarea.pid-input::placeholder, section.pid div.pid-container section.encoder div.encoder-container div.output-container textarea.pid-input::placeholder, section.encoder div.encoder-container section.pid div.pid-container div.output-container textarea.pid-input::placeholder, section.pid div.pid-container section.decoder div.decoder-container div.output-container textarea.pid-input::placeholder, section.decoder div.decoder-container section.pid div.pid-container div.output-container textarea.pid-input::placeholder {
  color: #5e5c69;
}
section.pid div.pid-container div.input-container button.pid-button, section.pid div.pid-container section.encoder div.encoder-container div.output-container button.pid-button, section.encoder div.encoder-container section.pid div.pid-container div.output-container button.pid-button, section.pid div.pid-container section.decoder div.decoder-container div.output-container button.pid-button, section.decoder div.decoder-container section.pid div.pid-container div.output-container button.pid-button {
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: white;
  font-weight: 500;
  padding: 14px;
  font-size: 16px;
  transition: 0.2s ease;
  background-color: #ff2db0;
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
}
section.pid div.pid-container div.input-container button.pid-button:hover, section.pid div.pid-container section.encoder div.encoder-container div.output-container button.pid-button:hover, section.encoder div.encoder-container section.pid div.pid-container div.output-container button.pid-button:hover, section.pid div.pid-container section.decoder div.decoder-container div.output-container button.pid-button:hover, section.decoder div.decoder-container section.pid div.pid-container div.output-container button.pid-button:hover {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.6);
  transform: translateY(-2px);
}
section.pid div.pid-container div.input-container button.pid-button:active, section.pid div.pid-container section.encoder div.encoder-container div.output-container button.pid-button:active, section.encoder div.encoder-container section.pid div.pid-container div.output-container button.pid-button:active, section.pid div.pid-container section.decoder div.decoder-container div.output-container button.pid-button:active, section.decoder div.decoder-container section.pid div.pid-container div.output-container button.pid-button:active {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
  transform: translateY(0px);
}
section.pid div.pid-container div.save-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
section.pid div.pid-container div.save-buttons-container button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px;
  font-size: 16px;
  background-color: transparent;
  border: 1px solid #26262f;
  border-radius: 8px;
  color: #8b8997;
  transition: 0.3s ease;
  cursor: pointer;
}
section.pid div.pid-container div.save-buttons-container button img {
  width: 14px;
}
section.pid div.pid-container div.save-buttons-container button:hover {
  border: 1px solid white;
}
section.pid div.pid-container div.save-buttons-container button:active {
  border: 1px solid #26262f;
}

div.popup-bg {
  opacity: 1;
  pointer-events: auto;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s ease;
}
div.popup-bg div.popup-container {
  transform: scale(1);
  width: 90%;
  max-width: 600px;
  background-color: #1a1a24;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #26262f;
  box-shadow: 0 0 10px 0 black;
  transition: 0.5s ease;
}
div.popup-bg div.popup-container h2 {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-weight: 700;
  color: white;
  font-size: 27px;
}
div.popup-bg div.popup-container p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #8b8997;
  font-weight: 400;
  text-align: center;
  font-size: 16px;
}
div.popup-bg div.popup-container div.buttons-container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}
div.popup-bg div.popup-container div.buttons-container button.generate-pid-button {
  cursor: pointer;
  width: 100%;
  border-radius: 50px;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: white;
  font-weight: 500;
  padding: 14px;
  font-size: 16px;
  transition: 0.2s ease;
  background-color: #ff2db0;
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
}
div.popup-bg div.popup-container div.buttons-container button.generate-pid-button:hover {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.6);
  transform: translateY(-2px);
}
div.popup-bg div.popup-container div.buttons-container button.generate-pid-button:active {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
  transform: translateY(0px);
}
div.popup-bg div.popup-container div.buttons-container button.maybe-later-button {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border-radius: 50px;
  background-color: transparent;
  border: 1px solid #26262f;
  color: #8b8997;
  cursor: pointer;
  transition: 0.2s ease;
}
div.popup-bg div.popup-container div.buttons-container button.maybe-later-button:hover {
  border: 1px solid white;
  color: white;
}
div.popup-bg div.popup-container div.buttons-container button.maybe-later-button:active {
  border: 1px solid #26262f;
  color: #8b8997;
}
@media (min-width: 1200px) {
  div.popup-bg div.popup-container h2 {
    font-size: 46px;
  }
}

div.popup-bg.closed {
  opacity: 0;
  pointer-events: none;
}
div.popup-bg.closed div.popup-container {
  transform: scale(0.5);
}

section.dev div.section-header-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
section.dev div.section-header-container p.section-label {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #28e0d6;
  font-size: 14px;
  font-weight: 400;
}
section.dev div.section-header-container h2.section-title {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: clamp(30px, 7vw, 60px);
  color: white;
  font-weight: 800;
}
section.dev div.section-header-container p.section-description {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: #eceaf2;
  line-height: 28px;
  font-size: clamp(16px, 2.5vh, 32px);
}
section.dev {
  padding: 100px 20px 80px 20px;
}
@media (min-width: 1200px) {
  section.dev {
    padding: 0;
  }
}
section.dev div.dev-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
  margin-bottom: 30px;
}
section.dev div.dev-container img {
  width: 100%;
  aspect-ratio: 0.8/1;
  border-radius: 8px;
  border: 1px solid #26262f;
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.3);
}
section.dev div.dev-container div.content-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}
section.dev div.dev-container div.content-container h3 {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: white;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
}
section.dev div.dev-container div.content-container p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-weight: 300;
  color: #8b8997;
  text-align: justify;
}
section.dev div.contact-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
section.dev div.contact-container a {
  list-style: none;
  font-style: none;
  text-decoration: none;
}
section.dev div.contact-container a button.talk-with-me-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px;
  font-size: 16px;
  background-color: transparent;
  border: 1px solid #26262f;
  border-radius: 50px;
  color: #8b8997;
  transition: 0.3s ease;
  cursor: pointer;
}
section.dev div.contact-container a button.talk-with-me-button img {
  width: 14px;
}
section.dev div.contact-container a button.talk-with-me-button:hover {
  border: 1px solid white;
}
section.dev div.contact-container a button.talk-with-me-button:active {
  border: 1px solid #26262f;
}
section.dev div.contact-container a button.pay-coffee-button {
  cursor: pointer;
  width: 100%;
  border-radius: 50px;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color: white;
  font-weight: 500;
  padding: 14px;
  font-size: 16px;
  transition: 0.2s ease;
  background-color: #ff2db0;
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
}
section.dev div.contact-container a button.pay-coffee-button:hover {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.6);
  transform: translateY(-2px);
}
section.dev div.contact-container a button.pay-coffee-button:active {
  box-shadow: 0 6px 10px 0 rgba(255, 45, 176, 0.2);
  transform: translateY(0px);
}
@media (min-width: 1200px) {
  section.dev div.dev-container img {
    width: 60%;
    align-self: center;
    justify-self: center;
  }
  section.dev div.dev-container {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 60px;
  }
  section.dev div.contact-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*

<div class="dev-container">
    <img src="../img/dev/Pierry.png" alt="Pierry Savio">

    <div class="content-container">
        <h3>Pierry Savio</h3>
        <p>Oi! Sou o criador deste projeto. O Picode surgiu como uma simples ideia de manter textos, senhas e arquivos confidenciais
            mais seguros. Pensei em usar alguma cifra já existente, mas havia um grande problema nisso - alguém poderia decodificá-la.
            Então senti a necessidade de criar o Picode, minha própria cifra. Utilizando a PID (chave única de codificação), é possível
            criar codificações únicas que só poderão ser decifradas com a respectiva chave.
            <br>
            Se esse projeto te agradou ou te ajudou de alguma forma, considere deixar um café ou me mandar uma mensagem.
            <br>
            Obrigado!
        </p>

        <div class="contact-container">
            <button class="talk-with-me-button">Falar comigo</button>
            <button class="pay-coffee-button">☕ Pagar um café</button>
        </div>
    </div>
</div>

*/
div.line {
  background-color: transparent;
  border-bottom: 1px solid #26262f;
  width: 100%;
  height: 0;
}

span.highlight {
  color: #ff2db0;
  animation: colorAnimation 5s linear infinite;
}

@keyframes colorAnimation {
  0% {
    filter: hue-rotate(300deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
  100% {
    filter: hue-rotate(300deg);
  }
}
body {
  padding-left: 0;
  background-color: #0a0a0f;
  background-image: linear-gradient(135deg, rgba(255, 45, 176, 0.03), rgba(40, 224, 214, 0.05));
  background-size: 400% 400%;
  min-height: 100vh;
  height: -moz-fit-content;
  height: fit-content;
}
@media (min-width: 1200px) {
  body {
    padding: 60px 60px 60px 310px;
  }
}

@keyframes gradientWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}/*# sourceMappingURL=index.css.map */