@import url('https://fonts.googleapis.com/css2?family=Mynerve&family=Poppins:wght@500&family=Roboto&display=swap');

* {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
  }

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
  }

.signature {
    font-family: 'Mynerve', cursive;
  }

h2.title{
    margin-bottom: 1rem;
    font-size: 3rem;
    line-height: 1;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity));
}

@media (min-width: 768px){

    h2.title{
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

section.description{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    border-top-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(212 212 216 / var(--tw-border-opacity));
    padding-bottom: 2.5rem;
    padding-top: 1.5rem;
}

@media (min-width: 768px){

    section.description{
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

section.description span.highlight{
    border-radius: 0.125rem;
    background-color: rgb(253 224 71 / 0.5);
    padding: 2px;
    text-align: center;
    font-weight: 600;
}

section.description span.highlight.blue{
    background-color: rgb(147 197 253 / 0.5);
}

section.description span.highlight.green{
    background-color: rgb(134 239 172 / 0.5);
}

section.description span.highlight.red{
    background-color: rgb(252 165 165 / 0.5);
}

section.description span.highlight.purple{
    background-color: rgb(216 180 254 / 0.5);
}

section.description p{
    margin-top: 0.25rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity));
}

@media (min-width: 768px){

    section.description p{
        font-size: 1.125rem;
        line-height: 1.5rem;
    }
}

section.description p.warning{
    border-left-width: 8px;
    border-right-width: 8px;
    --tw-border-opacity: 1;
    border-left-color: rgb(234 179 8 / var(--tw-border-opacity));
    border-right-color: rgb(234 179 8 / var(--tw-border-opacity));
    background-color: rgb(253 224 71 / 0.5);
    padding: 1rem;
    text-align: center;
    font-weight: 600;
      border-left-style: solid;
      border-right-style: solid;
}

#menu-toggle:checked ~ #mobile-nav{
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#menu-toggle:not(:checked) ~ #mobile-nav{
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.static{
    position: static;
}

.relative{
    position: relative;
}

.mx-0{
    margin-left: 0px;
    margin-right: 0px;
}

.mx-1{
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.mt-1{
    margin-top: 0.25rem;
}

.flex{
    display: flex;
}

.hidden{
    display: none;
}

.h-16{
    height: 4rem;
}

.w-16{
    width: 4rem;
}

.w-36{
    width: 9rem;
}

.w-full{
    width: 100%;
}

.max-w-full{
    max-width: 100%;
}

.flex-grow{
    flex-grow: 1;
}

.flex-row{
    flex-direction: row;
}

.flex-col{
    flex-direction: column;
}

.flex-wrap{
    flex-wrap: wrap;
}

.items-center{
    align-items: center;
}

.justify-center{
    justify-content: center;
}

.gap-2{
    gap: 0.5rem;
}

.gap-8{
    gap: 2rem;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.overflow-x-auto{
    overflow-x: auto;
}

.rounded-lg{
    border-radius: 0.5rem;
}

.border-2{
    border-width: 2px;
}

.border-t-2{
    border-top-width: 2px;
}

.border-blue-500{
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.border-blue-700{
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity));
}

.border-zinc-300{
    --tw-border-opacity: 1;
    border-color: rgb(212 212 216 / var(--tw-border-opacity));
}

.bg-blue-200{
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}

.bg-slate-100{
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

.bg-white{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.fill-blue-700{
    fill: #1d4ed8;
}

.p-0{
    padding: 0px;
}

.p-2{
    padding: 0.5rem;
}

.px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.pb-2{
    padding-bottom: 0.5rem;
}

.pt-6{
    padding-top: 1.5rem;
}

.text-center{
    text-align: center;
}

.text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-6xl{
    font-size: 3.75rem;
    line-height: 1;
}

.font-medium{
    font-weight: 500;
}

.leading-relaxed{
    line-height: 1.625;
}

.text-blue-700{
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity));
}

.text-sky-800{
    --tw-text-opacity: 1;
    color: rgb(7 89 133 / var(--tw-text-opacity));
}

.text-slate-700{
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.text-slate-800{
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity));
}

@media (min-width: 768px){

    .md\:mx-10{
        margin-left: 2.5rem;
        margin-right: 2.5rem;
    }

    .md\:mx-auto{
        margin-left: auto;
        margin-right: auto;
    }

    .md\:flex{
        display: flex;
    }

    .md\:w-2\/3{
        width: 66.666667%;
    }

    .md\:flex-row{
        flex-direction: row;
    }

    .md\:flex-col{
        flex-direction: column;
    }

    .md\:justify-center{
        justify-content: center;
    }

    .md\:gap-10{
        gap: 2.5rem;
    }

    .md\:rounded-xl{
        border-radius: 0.75rem;
    }

    .md\:border-b{
        border-bottom-width: 1px;
    }

    .md\:p-8{
        padding: 2rem;
    }

    .md\:px-12{
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .md\:py-10{
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .md\:pt-6{
        padding-top: 1.5rem;
    }

    .md\:text-left{
        text-align: left;
    }

    .md\:text-4xl{
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .md\:text-base{
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .md\:text-lg{
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

@media (min-width: 1024px){

    .lg\:flex-row{
        flex-direction: row;
    }

    .lg\:items-center{
        align-items: center;
    }

    .lg\:overflow-hidden{
        overflow: hidden;
    }
}