* {
       margin: 0;
       padding: 0;
   }

   body {
       background-color: #0e0c0c;
   }

   header {
       background: #f98c00;
       padding: 6px 20px;
       display: flex;
       justify-content: space-between;
       height: 48px;
   }

   nav a {
       color: white;
       text-transform: capitalize;
       font-size: 18pt;

   }

   input:checked~nav {
       left: 0;
   }

   nav {
       position: absolute;
       left: -400px;
       top: 0;
       color: #ffffff;
       background-color: #000000db;
       width: 320px;
       height: 100%;
       padding: 100px 16px;
   }

   nav ul {
       display: flex;
       gap: 17px;
       flex-direction: column;
       align-items: flex-start;
   }

   main {
       padding: 25px;
   }

   main h1 {
       color: #cac2c2dc;
       margin: 5px;
       font-size: 27pt;
   }

   main h3 {
       color: #cac2c2dc;
       margin: 23px 0px 0px 0px;
       font-size: 17pt;
   }

   main p {
       color: #ffffff;
       font-size: 14pt;
       text-align: justify;
   }


   section {
       display: flex;
       flex-wrap: wrap;
       gap: 54px;
   }

   .classe-cartao {
       background-color: gray;
       height: 400px;
       width: 300px;
       text-align: center;
       border-radius: 50px;
       margin: 100px 0px 0px 20px;
       padding: 20px 0px 0px 0px;
       overflow: hidden;
   }

   .texto {
       background-color: white;
       height: 99px;
       border-radius: 0px 0px 50px 50px;
       box-shadow: 0 0 10px #00000050;
       background-color: white;
       height: 99px;
       border-radius: 0px 0px 50px 50px;
       box-shadow: 0 0 10px #00000050;
   }

   .informacoes {
       display: none;
       background-color: #fc9310d1;
       padding: 50px;
       width: 80%;
       position: absolute;
       left: 0px;

   }

   /* .fundo-transparente {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #d2691e;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
} */

   #WILLOW {
       background-color: blueviolet;
   }

   #Griff {
       background-color: chocolate;
   }

   #NANI {
       background-color: blue;
   }

   #EDGAR {
       background-color: rgb(143, 91, 191);
   }

   #BIBI {
       background-color: darkgoldenrod;
   }

   /* codigo do menu hamburguer */
   .menu-hamburger {
       width: 100%;
       display: flex;
       justify-content: center;
   }

   .menu-hamburguer-elements {
       display: flex;
       width: 80%;
       height: 10vh;
       justify-content: space-around;
       align-items: flex-start;
   }

   .menu-hamburguer-elements li {
       font-size: 1.4rem;
       margin: 2rem 0;
       font-size: 1.4rem;
       list-style: inside;
   }

   .menu-hamburguer-elements a {
       color: white;
       text-decoration: none;
       font-size: 22pt;
       text-transform: uppercase;
       font-weight: 900;
   }

   .menu-hamburguer-elements a:hover {
       color: #f98d00c5;

   }


   /* BOTÃO MENU HAMBURGUER */


   .hamburguer {
       position: relative;
       display: block;
       background: #fff;
       width: 30px;
       height: 2px;
       top: 29px;
       left: 15px;
       transition: 0.5s ease-in-out;
       z-index: 9999;
   }

   .hamburguer:before,
   .hamburguer:after {
       background: #ffffff;
       content: '';
       display: block;
       width: 100%;
       height: 100%;
       position: absolute;
       transition: 0.5s ease-in-out;
   }

   .hamburguer:before {
       top: -10px;
   }

   .hamburguer:after {
       bottom: -10px;
   }

   input#menu-hamburguer {
       display: none;
   }

   /* rotação dos elementos do span */
   input:checked~label .hamburguer {
       transform: rotate(45deg);
   }

   input:checked~label .hamburguer:before {
       transform: rotate(90deg);
       top: 0;
   }

   input:checked~label .hamburguer:after {
       transform: rotate(90deg);
       bottom: 0;
   }

   input:checked~.menu-hamburguer-elements {
       left: 0;
   }

   /* codigo do menu hamburguer */

   .campo-pesquisa {
       font-size: 21pt;
   }

   input#pesquisar {
       height: 20pt;
   }

   #go{
    height: 30px;
    width: 38px;
   }
   #delete{
    width: 45px;
    height: 20px;
   }
   

footer {
    height: 150px;
    background-color: #ff8800d7;
    position: absolute;
    padding: 43px;
    /* bottom: 0; */
}





   /* telemóvel */
   @media screen and (max-width: 1024px) {
       body {
           background-color: #000000f1;
       }

       .texto {
           background-color: white;
           height: 99px;
           border-radius: 0px 0px 50px 50px;
           box-shadow: 0 0 10px #00000050;
           background-color: white;
           height: 99px;
           border-radius: 0px 0px 50px 50px;
           box-shadow: 0 0 10px #00000050;
       }

   }