:root {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-rotate: 0;
}


body {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%);
    min-height: calc(100vh - 1em);
    color: white;
}

.logosmall {
    background-image: url("https://viviraprendiendo.co/comunidad/favicon/favicon-196x196.png");
    background-position: center;
    background-size: cover;
    height: 40px;
    width: 40px !important;
}

.menu {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
}

.menu .nav-link {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    display: block;
    outline: 0;
    white-space: normal;
    text-decoration: none;
}

.nav-link:hover {
  color: #000 !important;
  background-color: #ccc !important;
}

.gradient-text {
    background: linear-gradient(135deg, #b0bfff 0%, #6c3b9d 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 1px 1px 1px #1b859754;
}

#topMenu .inner {
    margin: 0;
}

.inner {
    margin: 2em 0 6em 0;
}

.group {
    gap: 1em;
    grid-template-columns: 1fr 1fr;
    place-content: end space-between;
}

.group-2 {
    grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 600px) {
    .group, .group-2 {
        grid-template-columns: auto;
    }
    
    .inner {
        margin-left: 5px;
        margin-right: 5px;
    }
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.hover-lift, .hover-scale-110 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover .hover-scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.glass-effect {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-effect:hover {
    color: #FFF;
}

.p-8 {
    padding: 2rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.cursor-pointer {
    cursor: pointer;
}

.h-full {
    height: 100%;
}