:root {
    --gap-size: 0.15rem;
    --gray-custom: #343a40;
}

.h-128 {
    height: 28rem;
}

.min-h-50 {
    min-height: 50px;
}

body {
    font-family: "Raleway", sans-serif;
}

.gap-y-custom {
    row-gap: var(--gap-size);
}

.gap-x-custom {
    column-gap: var(--gap-size);
}

/* @media (min-width: 640px) { */
    .small-gap-custom {
        gap: var(--gap-size);
    }
/* } */

.mt-custom {
    margin-top: var(--gap-size);
}

.mb-custom {
    margin-bottom: var(--gap-size);
}

.transparent-black {
    background-color: rgba(0, 0, 0, 0.8);
}

.bg-gray-custom {
    background-color: var(--gray-custom);
}

.text-gray-custom {
    color: var(--gray-custom);
}

.bg-menu-custom {
    background-color: rgba(20, 20, 20, 0.8);
}

.hover-text-gray-custom:hover {
    color: var(--gray-custom);
}

.transparent-gradient {
    background: linear-gradient(-90deg,
            rgba(0, 0, 0, 0.7516048655790442) 0%,
            rgba(0, 0, 0, 0.6003443613773635) 20%,
            rgba(0, 0, 0, 0.20258525773590685) 70%,
            rgba(255, 255, 255, 0) 100%);
}

.transparent-gradient-navigation {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.2) 17.19%,
            rgba(0, 0, 0, 0.2) 17.2%,
            rgba(255, 255, 255, 0) 74.48%,
            rgba(255, 255, 255, 0) 100%);
}

/* .text-7xl {
    font-size: 5rem;
} */

/* Removes the border around input tags */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}