/* @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');  nunito font. with this api we can obtain some fonts we can use, this from google.*/

/* 

detail color: #B6771D
background color: #181818
font color: #FFCF71
button color / big element: #FF9D00

*/

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    /* font-family: 'Nunito', sans-serif; */
    font-family: 'Poppins', sans-serif;
    color: #FFCF71;
}

.main_bg {
    background: #181818;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.carousel {
    /* carousel itself */
    /* margin-top: 50px; */
    /* this helps with the hero, as when an element's position is fixed, then the other elements dont count that as a space in the document/page. we have to use a margin to specify where the element, in this case this flex will start so we prevent the problem we had before with the elements stacking each other.*/
    margin-top: 50px; /* its better to use this method instead of just using z-index: 1 for the hero (anyways, the z-index: 1 has to be used for other elements). this prevents the top part of whatever is following after the hero (in this case would be the carousel flex) to not hide under the hero, having that margin above to prevent this.*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    gap: 10px;
    /* the overflow hidden is so the bar below doesnt appear, as the images in our carousel are extended to the right of the screen, so normally the bar below would appear to scroll horizontally.*/

    .carousel_slide {
        /* we can assign properties inside here, so we have a cleaner css and look over the file.*/
        width: 300%;
        border: 2px solid #B6771D;
        border-left: none;
        border-right: none;
        /* the width for the carousel.*/
        display: flex;
        flex-direction: row;
        animation: carousel-animation 25s ease-in-out infinite alternate;
        /*  here we specify the animation for the carousel itself.*/

        & img {
            /* we use the & to specify that we want to assign properties to the img inside of the carousel_slide. we are also nesting inside the .carousel class. this is very useful for ordering the css.*/
            width: calc(70% / 5);
            height: 100%;
            transition: 0.2s;
            /* this is to calculate the width of the images. we found that */
        }

        & img:hover {
            opacity: 0.7;
            cursor: pointer;
        }
    }

    & h1 {
        text-align: center;
    }
}

@keyframes carousel-animation {
    /* animation for the carousel */

    0% {
        transform: translateX(0%);
    }

    25% {
        transform: translateX(-14%);
    }

    50% {
        transform: translateX(-28%);
    }

    75% {
        transform: translateX(-42%);
    }

    100% {
        transform: translateX(-56%);
    }
}

.hero {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: left;
    height: auto;
    z-index: 1; /* z-index: 1 is so it always stays on top of the other elements, as we want the hero to behave like this.*/
    width: 100%;
    background: #181818;
    border: 2px solid #B6771D;
    border-right: none;
    border-left: none;
    border-top: none;
    position: fixed;

    & a {
        text-decoration: none;
        transition: 0.2s;
        padding: 10px;
        font-size: 18px;
        color: #FFCF71;
    }

    & a:hover {
        opacity: 0.7;
    }
}

.subtitle_flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 5vh;
    gap: 10px;

    & h2 {
        text-align: center;
    }

    & a {

        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;

        font-size: 20px;
        height: auto;
        max-width: 90%;
        background: #FF9D00;
        border: 3px solid transparent;
        border-radius: 10px;
        color: black;
        transition: 0.2s;
        text-decoration: none;
        transform: scale(1.01);
    }

    & a:hover {
        transform: scale(1.1);
        opacity: 0.7;
        cursor: pointer;
    }
}

.results_table{
    border: 3px solid #B6771D;
    border-radius: 10px;
    height: 50%;
    width: 100%; /* seems like the width depends on the size of the content. if for example the content's size for the width is 100px, then if we use 100% on a child for its width, then its width will be 100px. if instead we used 50%, then the width would be 50px instead of 100px. take in mind this when assigning widths and heights.*/
}

.search_page{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100vh;
}

.search_bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    & input {
        background: transparent;
        color: #FFCF71;
        height: 50px;
        width: 300px;
        max-width: 100%;
        max-height: auto;
        border: 3px solid #B6771D;
        border-right: none;
        border-left: none;
        border-top: none;
        padding: 5px;
        outline: none;
        font-size: 15px;
    }

    & button {
        background: #FF9D00;
        height: 50px;
        width: 20%;
        border: none;
        color: black;
        font-weight: bold;
        transition: 0.2s;
    }

    & button:hover {
        opacity: 0.7;
        cursor: pointer;
    }
}

.checkboxes_container{
    display: flex;
    flex-direction: row;
    width: 80%;
    gap: 5px; /* we assign the gap for the rows itself. this affects the width of childs of the container, so in the width we do a calculation, as we can see in the div.search_checkbox */

    flex-wrap: wrap; /* with wrap we can make the items break into different rows or columns, depending the flex-direction. but we have to specify the width of the items. in this case we want 5 items per row, so the width will be 20% for the childs, minus the gap (the calculation that we did below here.)*/

    & div.search_checkbox{
        display: flex;

        gap: 5px; /* the 5px gap here is just to have a gap between the elements of the search_checkbox div, the label and the checkbox or input, so this doesnt affects directly to the calculation below.*/

        width: calc(20% - 5px); /* as we put 5px gap vetween rows, we just calc the 20% that we want minus the 5px gap, so everything fits correctly. */

        & input[type="checkbox"]{
            accent-color: #FF9D00;

            transition: 0.2s;
        }

        & input:hover{
            opacity: 0.7;
            cursor: pointer;
        }

    }
}

.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    height: 50px;
    width: 100%;
    border: 2px solid #B6771D;
    border-right: none;
    border-left: none;
    border-bottom: none;
    text-align: center;
    font-size: 1rem;
}

@media screen and (max-width: 800px) {
    .carousel {
        & h1 {
            font-size: 1.2rem;
        }
    }

    .subtitle_flex {
        & h2 {
            font-size: 0.8rem;
        }

        & a{
            font-size: 1rem;
        }
    }

    .footer{
        font-size: 0.7rem;
    }

    .checkboxes_container{

        & div.search_checkbox{

            & label{
                font-size: 10px;
            }
        }
    }
}