@import url(all.css);
@import url(color.css);
@import url(header.css);

body {
    background-color: var(--color-black);
}

/* -------------------- Landing -------------------- */

.main {
    position: absolute;
    width: 100%;
    height: 97vh;
    top: 0;
    background-image: url(../img/products-background.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    z-index: -1;
}

@supports (-webkit-touch-callout : none) {
    .main {
        background-attachment: scroll
    }
}

@supports not (-webkit-touch-callout : none) {
    .main {
        background-attachment: fixed;
    }
}

/* Only this file */

div.products {
    position: relative;
    width: 100%;
    text-align: center;
    height: auto;
    padding-bottom: 40px;
    top: 90vh;
}

div.products>h2 {
    color: var(--color-white);
    text-align: center;
    font-size: var(--title-font);
    margin-bottom: 30px;
}

div.products div.break::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 2px;
    background-color: var(--color-white);
    left: 50%;
    transform: translate(-50%);
}

div.products div.break::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(100% - 100px);
    width: 100%;
    height: 250px;
    background: linear-gradient(rgba(0, 0, 0, 0), black 80%);
    z-index: -1;
}

/* Products */

div.product:nth-child(odd) {
    display: flex;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--color-dark-gray));
}

div.product:nth-child(even) {
    display: flex;
    flex-direction: row-reverse;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), var(--color-dark-gray));
}

div.product {
    padding: 50px;
    height: 450px;
    margin: 30px auto;
    max-width: 1200px;
}

div.product>img {
    margin: 20px;
    border-radius: var(--image-border-radius);
    max-width: 300px;
    height: auto;
    object-fit: cover;
}

div.product div.info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
}

div.product div.info h2 {
    color: var(--color-white);
    font-size: var(--title-font);
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    width: fit-content;
    height: fit-content;
    margin-top: 40px;
}

div.product div.info p {
    color: var(--color-white);
    font-size: var(--text-font);
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    width: fit-content;
}

div.product div.info a, form button[type=submit] { 
    border: 0; 
    outline: 0; 
    background-color: var(--color-yellow); 
    border-radius: var(--button-radius); 
    padding: var(--button-padding); 
    color: var(--color-black); 
    width: fit-content; 
    height: fit-content; 
    margin: auto; 
    grid-column: 1 / 2; 
    grid-row: 3 / 4; 
} 

div.product div.info>div {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    display: flex;
}

div.product div.info>div div.price,
div.product div.info>div div.difficulty,
div.product div.info>div div.time {
    display: flex;
    flex-direction: column;
    margin: 0 15px;
    justify-content: center;
    align-items: center;
    width: 80px;
}

div.product div.info>div div.price h5,
div.product div.info>div div.difficulty h5,
div.product div.info>div div.time h5 {
    color: var(--color-white);
}

div.product div.info>div div.price img,
div.product div.info>div div.difficulty img,
div.product div.info>div div.time img {
    width: 20px;
}

a.disabled{
    background-color: var(--color-light-gray) !important;
    cursor: default;
}

/* Media Queries */

@media screen and (max-width: 1040px) {

    div.product:nth-child(odd),
    div.product:nth-child(even) {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 10px;
    }

    div.product>img {
        margin: auto;
        height: 310px;
    }

    div.product div.info>div div.price,
    div.product div.info>div div.difficulty,
    div.product div.info>div div.time {
        margin: 0;
        width: 80px;
    }

    div.product div.info {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
}