@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

:root {
    --shadow-color: 202deg 100% 18%;
    --shadow-elevation-low:
        0.4px 0.6px 0.8px hsl(var(--shadow-color) / 0.38),
        0.6px 1px 1.3px -1.4px hsl(var(--shadow-color) / 0.36),
        1.5px 2.5px 3.2px -2.7px hsl(var(--shadow-color) / 0.33);
    --shadow-elevation-medium:
        0.4px 0.6px 0.8px hsl(var(--shadow-color) / 0.4),
        1.2px 2px 2.5px -0.9px hsl(var(--shadow-color) / 0.38),
        3.1px 5.1px 6.5px -1.8px hsl(var(--shadow-color) / 0.36),
        7.6px 12.7px 16.1px -2.7px hsl(var(--shadow-color) / 0.34);
    --shadow-elevation-high:
        0.4px 0.6px 0.8px hsl(var(--shadow-color) / 0.37),
        2px 3.4px 4.3px -0.4px hsl(var(--shadow-color) / 0.36),
        3.9px 6.4px 8.2px -0.8px hsl(var(--shadow-color) / 0.35),
        6.5px 10.8px 13.7px -1.2px hsl(var(--shadow-color) / 0.34),
        10.5px 17.6px 22.3px -1.6px hsl(var(--shadow-color) / 0.34),
        16.7px 27.9px 35.4px -2px hsl(var(--shadow-color) / 0.33),
        25.7px 42.8px 54.3px -2.4px hsl(var(--shadow-color) / 0.32),
        38.1px 63.5px 80.5px -2.7px hsl(var(--shadow-color) / 0.31);

    .shadow-medium {
        box-shadow: var(--shadow-elevation-medium);
    }
}

.slider-inicio {
    height: 50vh;
    min-height: 800px;
}

@media (max-width:500px) {
    .slider-inicio {
        height: 100vh;
    }
}

.orbitron-400 {
    font-family: "Orbitron", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.orbitron-900 {
    font-family: "Orbitron", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.table-responsive {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
  }
  .table-responsive::-webkit-scrollbar {
    height: 8px;
    background: #f1f1f1;
  }
  .table-responsive::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }