@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import "normalize.css";
@import "typography.css";
@import "productPage.css";
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

:root {
    --color-gray-main: rgb(35, 31, 32);
    --color-gray-dark: rgb(40, 40, 40);
    --color-gray-mid: rgb(51, 51, 51);
    --color-gray-mid-translucent: rgba(51, 51, 51, 0.7);
    --color-gray-light: rgb(174, 174, 174);
    --color-gray-light-translucent: rgba(174, 174, 174, 0.7);
    --color-gray-lighter: rgb(201, 201, 201);
    --color-gray-lighter-translucent: rgb(201, 201, 201, 0.7);

    --color-red-main: rgb(230, 38, 72);
    --color-red-lighter: rgb(255, 214, 214);
    --color-red-light: rgb(255, 69, 69);
    --color-red-mid: rgb(241, 7, 7);
    --color-red-dark: rgb(181, 0, 36);
    --color-red-darker: rgb(130, 0, 26);

    --color-blue-main-lighter: rgb(214, 218, 248);
    --color-blue-main: rgb(0, 26, 255);
    --color-blue-main-dark: rgb(0, 14, 181);
    --color-blue-main-darker: rgb(0, 12, 130);


    --color-green-main: rgb(4, 255, 0);
    --color-green-lighter: rgb(214, 255, 214);
    --color-green-light: rgb(95, 231, 95);
    --color-green-mid: rgb(18, 231, 18);
    --color-green-dark: rgb(0, 181, 36);
    --color-green-darker: rgb(0, 130, 26);

    --font-main: Roboto, sans-serif;
    --font-neon: 'Neon Glow', sans-serif;

    --nav-height: 7.2rem;
    --container-max-width: 120rem;

    --tablet-breakpoint: 53.5rem;
    --mobile-breakpoint: 40rem;
}

h1:focus {
    outline: none;
}

body {
    background-color: var(--color-gray-main);
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}


.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 2.4rem;
}

a:hover {
    color: white !important;
}


.button-red {
    background: var(--color-red-main);
    color: white;
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
    border: 0;
    padding: 1.5rem 3rem;
    border-radius: 0.5rem;
    box-shadow: -0.5rem 0.5rem 0.5rem 0 rgba(0, 0, 0, 1);
    cursor: pointer;
    text-shadow: none !important;
    text-align: center;
}

.button-green {
    background: var(--color-green-main);
    color: white;
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
    border: 0;
    padding: 1.5rem 3rem;
    border-radius: 0.5rem;
    box-shadow: -0.5rem 0.5rem 0.5rem 0 rgba(0, 0, 0, .7);
    cursor: pointer;
    text-shadow: none !important;
    text-align: center;
}

.button-blue {
    background: var(--color-blue-main);
    color: white;
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
    border: 0;
    padding: 1.5rem 3rem;
    border-radius: 0.5rem;
    box-shadow: -0.5rem 0.5rem 0.5rem 0 rgba(0, 0, 0, 1);
    cursor: pointer;
    text-shadow: none !important;
    text-align: center;
}

.button-disabled {
    background: var(--color-gray-lighter);
    color: var(--color-gray-main);
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
    border: 0;
    padding: 1.5rem 3rem;
    border-radius: 0.5rem;
    box-shadow: -0.5rem 0.5rem 0.5rem 0 rgba(0, 0, 0, 1);
    cursor: not-allowed;
    text-shadow: none !important;
    text-align: center;
}

.button-outline {
    position: relative;
    display: inline-block;
    padding: 1.2rem 2.4rem;
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: .07rem;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: ease-out 0.5s;
    border-radius: .5rem;

    &.green {
        color: var(--color-green-mid);
        border: 2px solid var(--color-green-mid);
        box-shadow: inset 0 0 0 0 var(--color-green-mid);

        &:hover,
        &.active {
            color: white;
            box-shadow: inset 0 -100px 0 0 var(--color-green-mid);
        }
    }

    &.red {
        color: var(--color-red-mid);
        border: 2px solid var(--color-red-mid);
        box-shadow: inset 0 0 0 0 var(--color-red-mid);

        &:hover,
        &.active {
            color: white;
            box-shadow: inset 0 -100px 0 0 var(--color-red-mid);
        }
    }
    
    &.blue {
        color: var(--color-blue-main);
        border: 2px solid var(--color-blue-main);
        box-shadow: inset 0 0 0 0 var(--color-blue-main);

        &:hover,
        &.active {
            color: white;
            box-shadow: inset 0 -100px 0 0 var(--color-blue-main);
        }
    }

    &:active {
        transform: scale(0.9);
    }
}



.text-shadow-blue-hover:hover {
    color: #eee;
    text-shadow: 0 0 1px #d6daf8,
    0 0 5px #d6daf8,
    0 0 10px #001aff,
    0 0 15px #001aff,
    0 0 20px #001aff,
    0 0 25px #001aff,
    0 0 30px #001aff,
    0 0 32px #001aff;
}

.text-shadow-blue-hover-scale:hover {
    color: #eee;
    text-shadow: 0 0 1px #d6daf8,
    0 0 5px #d6daf8,
    0 0 10px #001aff,
    0 0 15px #001aff,
    0 0 20px #001aff,
    0 0 25px #001aff,
    0 0 30px #001aff,
    0 0 32px #001aff;

    transform: scale(1.1);
}

@media (hover: hover) {
    .scale-hover:hover {
        transform: scale(1.1);
    }
}


.gray-box-with-shadow {
    background: var(--color-gray-main);
    box-shadow: -10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    border-radius: 0.5rem;
}