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

html, body{
    padding: 0;
    margin: 0;
}
html {
    height: 100%;
}

nav a {
    @apply mx-4 text-white font-semibold float-right hidden sm:inline-block relative;
}
nav a::before {
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: white;
    content: "";

    transition: width 0.3s ease-in-out;
}
nav a:hover::before {
    width: 100%;
} 

/* nav a:hover {
    @apply text-purple-400; */
/* } */

.nav-menu {
    @apply bg-gray-800 p-4 hidden;
}
.nav-menu a {
    @apply block text-white;
}
.nav-menu a + a {
    @apply my-4;
}
.nav-menu a:last-child {
    @apply mb-0;
}

.glow {
    box-shadow: 0 0 5px #302241;
    box-shadow: inset 0 0 10px #302241;
}
.glow-blue {
    box-shadow: 0 0 5px #0b3e57;
    box-shadow: inset 0 0 10px #0b3e57;
}

button {
    @apply rounded-full bg-bg7 hover:bg-lightblue-800 border-2 border-lightblue-600 hover:border-lightblue-400 p-1 px-4;
}
button.purple {
    @apply rounded-full bg-bg2 hover:bg-fuchsia-800 border-2 border-fuchsia-600 hover:border-fuchsia-500 p-1 px-4;
}