input.css

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


* { padding: 0; margin: 0; }
html, body {
    min-height: 100% !important;
    height: 100%;
}

h1 {
    @apply
    text-3xl lg:text-5xl
    font-serif lowercase
    ;
}

h2 {
    @apply
    text-2xl lg:text-3xl
    font-serif lowercase
}

h1, h2, h3, h4, h5, h6 {
    @apply text-white
}

p {
    @apply
    font-serif
}

button {
    background-color: transparent;
}

nav {
    @apply absolute -translate-x-full z-30 flex h-full max-h-screen min-h-screen
    w-3/4 flex-none transform flex-col overflow-y-auto border-r
    pb-10 transition duration-300 ease-in-out
    sm:w-1/2 sm:pb-0 md:w-56 lg:relative
    lg:z-30 lg:w-56 lg:translate-x-0 2xl:w-80
    border-r-stroke bg-secondary;
}

.burger {
    @apply absolute p-2 my-2 mx-4
    rounded-md bg-black
    flex items-center justify-center
    cursor-pointer
    lg:hidden
    hover:bg-stroke;
}


.hp-a {
    @apply
        italic
    text-[#3b82f6]
    hover:underline
    ;
}


.box {
    width: 309px;
    height: 309px;
    background-color: #333;
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01);
    }
}

.aspect-ratio-box {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
}

.aspect-ratio-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}