@tailwind base;
@tailwind components;
@tailwind utilities;

h1{
    @apply font-sans text-3xl italic font-bold m-5 text-center text-black hover:text-green-500;
}

h2{
    @apply font-sans text-5xl italic text-left text-black;
}

h3{ 
    @apply font-mono text-2xl italic text-black;
}

h4{
    @apply font-sans text-lg text-center italic text-black hover:text-red-500;
}

h5{
    @apply font-serif text-base text-center italic text-black hover:text-green-500;
}

h6{
    @apply font-serif text-sm text-justify italic text-black hover:text-green-500;
}

a:hover{
    @apply font-sans text-sm text-black hover:text-green-600;
}

a:link{
    @apply font-sans text-sm text-black hover:text-green-600;
}

p{
    @apply font-serif text-base	 leading-5 text-justify text-black overflow-clip;
}

li{
    @apply font-mono text-base italic text-left;
}

container{
    @apply md:container md:mx-auto;
}

.table {
    @apply w-auto border-2 border-black content-center;
 }


 .table th, .table td {
    @apply border-2 border-black px-2 py-2;
}

.table tbody tr:nth-child(2n+1){
    @apply bg-gray-400; 
}

/* .table tbody th:nth-child(2n){
    @apply bg-gray-100; 
} */

.table thead tr {
    @apply bg-gray-600; 
}
.table thead th  {
    @apply font-serif text-sm text-justify italic text-white hover:text-red-500;
}

.table th  {
    @apply font-serif text-xs text-justify italic text-black hover:text-green-500;
}

.table tr:hover{
    @apply bg-blue-300;
}
.table tbody tr:hover{
    @apply bg-yellow-300;
}