Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
 <div>
    <img src="https://tdn.totvs.com/download/attachments/731904073/CAPA4.png?version=1&modificationDate=1673616255015&api=v2" alt=""> </div>
HTML
<style>
img {
  max-width: 100%;
}
</style>
HTML
<p class="texto">O QUE HÁ DE NOVO? </p>
  
HTML
<style> 

 #title-text {
	display: none !important;} 

.grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.texto {
  position: relative;
  text-align: center;
  color: #353535;
  font-size: 30px;
  font-family: "lato", serif;
  font-weight: 800;
}

h3 {
  margin-right: 20px;
  background-color: #fff;
  border: 2px solid #0397e9;
  padding: 15px;
  margin: 0px;
  border-radius: 40px;
  text-align: center;
  font-family: LATO;
  color: #0397e9;
  font-size: 16px;
  box-shadow: 2px #636363;
  cursor: pointer;
text-decoration: none; }

a {
  text-decoration: none;
}


       </style>
HTML
   
  <div id="cd-timeline" class="cd-container">
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Webhooks no Workflow do TOTVS CRM: automação de processos integrada< </h2>
        <br>
        <span class="badge badge-novo">NOVO><strong>NOVO RECURSO</strong></span>
        <p align="justify"> Atualizar seus registros nunca foi tão fácil e rápido! O TOTVS CRM acaba de lançar uma nova ação de Workflow: o "webhook". Essa ação é a solução ideal para automatizar processos entre diferentes sistemas, permitindo que você crie uma "ponte" entre o TOTVS CRM e outras soluções. Com o webhook, você pode criar e atualizar registros no TOTVS CRM e automaticamente acionar processos em outros sistemas, como ERP, Automação de Marketing, entre outros. Imagine só, enviar informações atualizadas para outros sistemas sem precisar fazer isso manualmente, economizando tempo e aumentando a eficiência do seu negócio. Isso é incrível, não é mesmo?  </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=745140752'> <button class="button-2">SAIBA MAIS</button></a>
        </div>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Preços<h2> deOcultar itensColunas não são exibidos completamente<em Planejamento</h2>
        <br>
        <span class="badge badge-manutencaomelhoria">MANUTENÇÃO<>MELHORIA</span>
        <p>No<p>Com ambienteo móvelconfigurador dade solução,exibição osde preçoscolunas de itensmedidas, nãoagora apareciamvocê totalmenteterá quandomais acontrole descriçãosobre daas unidadeinformações dedo medidaseu tinhaplanejamento muitosde caracteresvendas. ParaCom tornaro suarecurso experiênciavocê melhor,poderá fizemosselecionar algunsas ajustesmedidas norelevantes catálogo, edição de itens, itens adicionados e informações de estoque, e agora os valores são exibidos corretamente.e ocultar as desnecessárias para uma visualização simplificada e personalizada. As configurações escolhidas serão salvas para acesso futuro, tornando a experiência ainda mais personalizada. </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=738260729745735087'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
         <h2>Tooltip nas descrições de filtros salvos<h2>Integração de leads: nova opção e facilidade de integração no marketplace </h2>
        <br>
        <span class="badge badge-manutencaomelhoria">MANUTENÇÃO<>MELHORIA</span>
        <p>Se<p>Aprimoramos vocêo precisacard visualizarde descriçõesIntegração completasde dosLeads filtrosdo salvos,nosso nãomarketplace separa preocupeoferecer mais!uma Agoraexperiência éainda possível através do recurso tooltip (pop-up de dica). A visualização pode ser feita tanto na página da listagem da funcionalidade, quanto nos filtros avançados. </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=738260750'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Ajuste tooltips em ordem de venda</h2>
        <br>
        <span class="badge badge-manutencao">MANUTENÇÃO</span>
        <p>Para tornar sua interação com a tela de ordens de venda mais agradável, nós mudamos nossa abordagem para a apresentação de tooltips (pop-up de dica). Agora, os tooltips não serão mais apresentados em campos em que os textos já estão completamente visíveis, eliminando assim a poluição visual. </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/display/TCGDC/Ajuste+tooltips+em+ordem+de+venda'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIA">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Janela de notificação não fecha ao clicar na opção "Cancelar"</h2>
        <br>
        <span class="badge badge-manutencao">MANUTENÇÃO</span>
        <p>Ao confirmar que a oportunidade foi ganha, a solução verifica se há alguma inconsistência relacionada à recorrência dos itens, alertando o usuário através de uma mensagem. No entanto, ao clicar na opção "cancelar", a janela não acatava o comando. Por essa razão, tomamos as devidas ações para que o comando "cancelar" seja respeitado e a tela volte para a aba produtos para que as correções necessárias sejam feitas.mais eficiente. Agora, o card conta com uma lista de ferramentas terceiras para integração. Basta selecionar a ferramenta desejada e copiar o token correspondente para garantir uma integração perfeita. Cada ferramenta tem seu próprio token, que pode ser facilmente copiado para garantir a integração correta.  Com essa atualização, você poderá integrar ferramentas externas ao TOTVS CRM de forma mais rápida e simples, o que permitirá uma maior eficiência na sua rotina de trabalho.  </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=738260819745735282'> <button class="button-2">SAIBA MAIS</button></a>

        </div>                   
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
  </div> <!-- cd-timeline -->
HTML
<style>  #title-text {
	display: none !important;}       body {
  font-size: 100%;
  font-family: "lato", serif;
  color: #363636;
  background-color: #ffffff;
}

a {
  color: #acb7c0;
  text-decoration: none;
  font-family: "lato";
  font-size: 16px;
}

img {
  max-width: 100%;
}

p {
  text-align:justify;
  font-family: "Lato", sans-serif;
}

h2
h5 {
  font-family: "lato", sans-serif;
  font-size: 90px ;
  font-weight: bold;
  
}

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

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

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

xnugget info 

-------------------------------- */
.cd-nugget-info {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  line-height: 50px;
  top: 0;
  left: 0;
}
.cd-nugget-info a {
  position: relative;
  font-size: 14px;
  color: #718ca1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
  opacity: 0.8;
}
.cd-nugget-info span {
  vertical-align: middle;
  display: inline-block;
}
.cd-nugget-info span svg {
  display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
  fill: #718ca1;
}

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

Main components 

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


#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08),
    0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
  display: block;
  width: 32px;
  height: 32px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -16px;
  margin-top: -16px;
}
.cd-timeline-img.cd-novo {
  background: #363636;
}
.cd-timeline-img.cd-melhoria {
  background: #363636;
}
.cd-timeline-img.cd-manutencao {
  background: #363636;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
  }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -moz-transform: scale(1.2);
  }

  100% {
    -moz-transform: scale(1);
  }
}
@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.cd-timeline-content {
  position: relative;
  margin-left: 50px;
  background: #f5f5fa;
  border-radius: 0.25em;
  max-width: 400px;
  padding: 1em;
  box-shadow: 0 3px 0 #363636;
}
.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-content h2 {
  color: #363636;
  font-weight: bold;
}
.cd-timeline-content p,

.cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;

}

.cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
  float: right;
  padding: 0.8em 1em;
  background: #5596e6;
  color: white;
  border-radius: 0.25em;
  text-decoration: none;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #ffffff;
}
.cd-timeline-content .cd-date {
  float: left;
  padding: 0.8em 0;
  opacity: 0.7;
}
.cd-timeline-content::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #bfcdd6;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: bold ;
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more,
  .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    margin-left: 0;
    padding: 1.6em;
    width: 45%;
  }
  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #d7e4ed;
  }
  .cd-timeline-content .cd-read-more {
    float: left;
  }
  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #d7e4ed;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }

  .button-2 {
    padding: 8px 9px;
    font-size: 12px;
    color: #fff;
    background-color: #FDAB0E;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .button-2:hover {
    background-color: #0897E9;
  }
  
  .button-2:active {
    background-color: #FDAB0E;
  }
  
  
  #wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
  .flexWrap {
    display: flex;
    gap: 2px;
    width: 50px;
  }
  #disclaimer {
    font-family: Tahoma;
    color: #333333;
    position: fixed;
    top: 5%;
    right: 5%;
    width: 5%;
  }
  
  
  
  .button-2 {
    padding: 8px 9px;
    font-size: 12px;
      color: #fff;
    background-color: #363636;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .button-2:hover {
    background-color: #feac0e;
  }
  
  .button-2:active {
    background-color: #feac0e;
  }
  
  
  #wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
  }
  .flexWrap {
    display: flex;
    gap: 2px;
    width: 110px;
  }
  #disclaimer {
    font-family: sans-serif;
    color: #333333;
    position: fixed;
    top: 5%;
    right: 5%;
    width: 5%;
  } 

  .badge-primary {
    color: #8686FF;
    background-color: #F3F3FF;
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold  }
 
 .badge-secondary{
    color: #ebeef0;
    background-color: #2abe74;
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold 
 
 }
 
 .badge-novo {
    color: #fff;
    background-color: #20d691;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold  }
 
 .badge-danger{
    color: #ebeef0;
    background-color: #e93e9c;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold }
 
 .badge-manutencao {
    color: #FFF;
    background-color: #FEAC0E;
    border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 
 .badge-melhoria {
    color: #FFF;
    background-color: #6f60f6;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 .badge-light {
    color: #8686FF;
    background-color: #F3F3FF
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 .badge-dark {
    color: #ebeef0;
    background-color: #064118;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold }
  </style> 
HTML
<div id="faq">
  <h1>RESPOSTAS ÀS PERGUNTAS
MAIS FREQUENTES</h1>
  <ul>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>O que é Release Notes?</h2>
      <p>É o documento que agrupa e detalha todas as atualizações de um produto ao longo de uma versão ou período.</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>      <h2>Como identificar a nomenclatura dos releases?</h2>
      <p align="justify">O versionamento semântico é um conjunto de regras de como os números dos releases/versões são atribuídos e incrementados, com objetivo de manter a compatibilidade e integridade em novas liberações. Para cada lançamento deve ter um número único de liberação (release/versão) e, uma vez lançado, o código dessa liberação não pode mais ser alterado. Qualquer necessidade de alteração na solução, deverá ser lançado com um novo número de liberação. A padronização da nomenclatura de releases/versão dos produtos da marca TOTVS tem o propósito de facilitar a compreensão do ciclo de vida dos releases pelos nossos clientes e equipes internas, alinhado às melhores práticas de mercado. O padrão de nomenclatura dos produtos TOTVS seguirá o exemplo: 12.1 (versão). 2301 (Ano e mês). 0001 (Numeração sequencial opcional na nomenclatura utilizado quando houver uma liberação com correções e alterações legais no release corrente).</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Como faço para registrar sugestões de melhorias?</h2>
      <p> Sua ideia poderá ser compartilhada através do canal <a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics">Central Colaborativa</a>. Esta área foi criada para você sugerir novas funcionalidades para o TOTVS CRM - Gestão de Clientes. As sugestões de melhorias serão monitoradas pelo nosso time de inovação e avaliada a viabilidade para uma futura implementação.</p>
    </li>
  </ul>
</div>
HTML
<style>
body {
  background: #f4f4f4;
  display: flex;
}

#faq {
  max-width: 700px;
  margin: auto;
  padding: 0 15px;
  text-align: center;
}

section.faq {
  padding-top: 2em;
  padding-bottom: 3em;
}

#faq ul {
  text-align: left;
}
.transition, p, ul li i:before, ul li i:after {
  transition: all 0.3s;
}

#faq .no-select, #faq h2 {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

#faq h1 {
  color: #393939;
  margin-bottom: 20px;
  margin-top: 0;
font-size: 25px; }

#faq h2 {
  color: #5596E6;
  font-family: Tahoma, sans-serif;
  font-size: 16px;
  line-height: 34px;
  text-align: left;
  padding: 15px 15px 0;
  text-transform: none;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
  transition: .2s;
}

#faq p {
  color: #333;
  text-align: justify-all;
  font-family: 'hm_light', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
  overflow: hidden;
  max-height: 250px;
  will-change: max-height;
  contain: layout;
  display: inline-block;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 5px;
  margin-bottom: 15px;
  padding: 0 50px 0 15px;
  transition: .3s opacity, .6s max-height;
  hyphens: auto;
  z-index: 2;
}

#faq ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
#faq ul li {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  /*padding-bottom: 4px;*/
  /*padding-top: 18px;*/
  background: #fff;
  box-shadow: 1px 2px 10px -2px rgba(114,114,158, 21%);
  -webkit-tap-highlight-color: transparent;
}
#faq ul li + li {
  margin-top: 15px;
}
#faq ul li:last-of-type {
  padding-bottom: 0;
}
#faq ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 28px;
  right: 15px;
}
#faq ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #5596E6;
  width: 3px;
  height: 9px;
}
#faq ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
#faq ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
#faq ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  touch-action: manipulation;
}
#faq ul li input[type=checkbox]:checked ~ h2 {
  color: #393939;
}
#faq ul li input[type=checkbox]:checked ~ p {
  /*margin-top: 0;*/
  max-height: 0;
  transition: .3s;
  opacity: 0;
  /*transform: translate(0, 50%);*/
}
#faq ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
#faq ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}











* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

a,
a:visited,
a:focus,
a:active,
a:link {
  text-decoration: none;
  outline: 0;
}

a {
  color: currentColor;
  transition: .2s ease-in-out;
}

h1, h2, h3, h4 {
  margin: .3em 0;
}

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

</style>