@tailwind base;

@layer base {
    html {
        @apply text-surface;
        @apply bg-white;
    }
    html.dark {
        @apply text-neutral-50;
        @apply bg-body-dark;
    }
}

@tailwind components;
@tailwind utilities;

[x-cloak] {
    display:none;
}

p {
    @apply leading-[1.6];
}

.active {
    border-bottom: 0.5px solid white;
    color: white;
    font-weight:bolder;
}

li a:hover {
    border-bottom: 1px solid white;
    transition: ease-in-out 500ms;
}
#about {
    -webkit-transform: skewY(-2deg);
    -moz-transform: skewY(-2deg);
    -ms-transform: skewY(-2deg);
    -o-transform: skewY(-2deg);
    transform: skewY(-2deg);
}

.skewed-div {
    height: 100%;
    width: auto;
    -webkit-transform: skewY(2deg);
    -moz-transform: skewY(2deg);
    -ms-transform: skewY(2deg);
    -o-transform: skewY(2deg);
    transform: skewY(2deg);
}