nav {
    flex-grow: 5;
}
.nav-link:hover {
    text-shadow: 2px 2px 10px white;
}

body {
    background: #04080C;
    background: linear-gradient(180deg, rgba(4, 8, 12, 1) 0%, rgba(25, 46, 82, 1) 59%, rgba(18, 45, 69, 1) 94%, rgba(4, 24, 41, 1) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;

    /*background-color: hsl(0, 0%, 100%);*/
    color: #00f0ff;
}

/*MAIN CSS FOR RESOURCES PAGE*/

@keyframes stumbleIn {
    0% {
        transform: translateY(-45vh);
        opacity: 0;
    }
    100% {
        transform: translateY(Y);
        opacity: 1;
    }
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 20px;
    height: 92.5vh;
}

main h1 {
    font-family: 'Silkscreen';
    text-align: center;
    font-size: 3em;
    /*background-color: hsl(211, 53%, 3%);*/
    border-radius: 10px;
    padding: 5px 15px;
    color: #00f0ff;
    text-shadow: 0 0 10px rgba(0,255,255,.5),0 0 20px rgba(0,255,255,.3),0 0 30px rgba(0,255,255,.2);
    animation: stumbleIn 1.75s steps(5, jump-both);
}

@media (width >= 48rem) {
    main h1 {
        font-size: 5em;
    }
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 20px;
    margin-top: 30px;
}

.card {
    font-family: "Jersey 10", monospace;
    background-color: hsla(210, 50%, 3%, 0.45);
    border-radius: 15px;
    padding: 20px;
    margin: 20px;
    width: 17em;
    text-align: center;
    color: #00f0ff;
    box-shadow: 0 5px 10px rgb(0, 0, 0);
}

.card:hover {
    box-shadow: 0 0 10px rgba(0,255,255,.5),0 0 20px rgba(0,255,255,.3),0 0 30px rgba(0,255,255,.2);
    transition: 0.15s ease-in-out;
}

.card a {
    background-color: hsla(184, 100%, 50%, 0.515);
    color: #04080C;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.card a:hover {
    background-color: hsla(184, 100%, 50%, 0.8);
    color: #04080C;
    text-shadow: 2px 2px 10px white;
}