* {
    color: aqua;
}

body {
    cursor: default;
    height: 100%;
    display: block;
    background: linear-gradient(0deg, rgb(255, 126, 152) 0%, rgb(28, 38, 79) 90%);
    z-index: -1;
    overflow: hidden;
    color: aqua;
}

nav {
    background:rgb(14, 16, 23);
}

div {
    display: block;
    font-size: 1.3em;
    font-weight: lighter;
    z-index: 0;
}

.card-layout {
    display: block;
    margin: 1.2em;
    /* background: rgb(34, 43, 84);*/
    background: rgb(14, 16, 23);
    box-shadow: 0.1em 0.1em 0.2em rgb(16, 22, 44);
    z-index: 0;
    animation: box-float 6s ease-in-out infinite;
}

.card-layout:hover {
    animation: box-float paused;
    box-shadow: 0 0 0.15em rgb(255, 255, 255), 0.1em 0.2em 0.15em rgb(30, 20, 51);
}

.bg {
    height: 100vh;
    width: 100vw;
    display: block;
    /*background:  rgb(28, 39, 59);*/
}

.menu-item {
    text-shadow: unset;
}

.menu-item:hover {
    text-shadow: 0 0 0.08em rgb(255, 255, 255);
    cursor: pointer;
    /*animation: text-glow 3s ease-out infinite;*/
}

@keyframes box-float {

    0% {
        transform: translateY(0);
        box-shadow: 0.1em 0.2em 0.15em rgb(30, 20, 51);
    }
    50% {
        transform: translateY(10px);
        box-shadow: 0.1em 0 0.15em rgb(30, 20, 51);
    }
    100% {
        transform: translateY(0);
        box-shadow: 0.1em 0.2em 0.15em rgb(30, 20, 51);
    }
    
}

@keyframes text-glow {

    0% {
        text-shadow: 0px 0px 2px rgb(255, 77, 228);
    }
    50% {
        text-shadow: 0px 0px 6px rgb(255, 255, 255);
    }
    100% {
        text-shadow: 0px 0px 2px rgb(255, 77, 228);
    }
    
}