@tailwind base;

.hamburg {
    display: block;
    width: 55px; height: 50px;
    position: relative;
    margin-left: auto; margin-right: auto;
    border-radius: 4px;
    transition: border-radius .5s;
    cursor: pointer;
 }

.cta.checked {
    background-color: white !important;
    color: #80878F !important;
}

.cta.checked:hover {
    background-color: #80878F !important;
    color: white !important;
}

 .line {
    position: absolute;
    height: 2px; width: 80%;
    background: #555; border-radius: 2px;
    display: block;
    transition: 0.5s;
    transform-origin: center;
 }

 .line:nth-child(1) { top: 12px; }
 .line:nth-child(2) { top: 24px; }
 .line:nth-child(3) { top: 36px; }

 .hamburg.checked .line:nth-child(1){
    transform: translateY(12px) rotate(-45deg);
 }

 .hamburg.checked .line:nth-child(2){
    opacity:0;
 }

 .hamburg.checked .line:nth-child(3){
    transform: translateY(-12px) rotate(45deg);
 }

 .menu {
     display: none;
     transition: 0.5s;
     opacity: 0;
 }

 .menu.checked {
     display: flex;
     opacity: 1;
 }

strong {
    font-weight: 500;
}

p {
    width: 100%;
    margin-bottom: 20px;
}

h2 {
    font-size: 20px;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
}

ul {
    list-style-type: disc;
    margin-left: 20px;
  }

li {
    padding-left: 15px;
}