/* Tipografía */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");

* {
    font-family: "Source Sans 3", sans-serif;
    font-size: 15px;
    transition: all 0.5s;
}

/* Variables */
:root {
  --principal: #1e1b17;
  --secundario: #f4722b;
  --terciario: #d9d9d9;
  --texto: #ffffff;
  --enfasis: rgb(56, 213, 245);
}

/* General */
body{
    background-color: var(--principal);
}

header#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  gap: 20px;
  img {
    width: 300px;
  }
  nav.nav{
    gap: 20px;
    a{
        color: var(--terciario);
        font-size: 1.2rem;
        text-decoration: none;
        text-transform: uppercase;
        &:hover{
            color: var(--secundario);
        }
    }
  }

  @media screen and (width < 680px) {
    flex-direction: column;
  }
}

/* Cards y modals */
div.card{
        border: none;
        background-color: transparent;
        img{
            border-radius: 0px;
        }
        div.card-body{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            gap: 10px;
            h5{
                text-transform: uppercase;
                color: var(--secundario);
                align-self: center;
                text-align: center;
            }
            button{
                border: solid 1px var(--principal);
                background-color: var(--terciario);
                color: var(--principal);
                width: max-content;
                &:hover{
                    border: solid 1px var(--terciario);
                    background-color: var(--principal);
                    color: var(--terciario);
                }
            }
        }
    }

    div.modal{
        div.modal-dialog{
            div.modal-content{
                background-color: var(--secundario);
                border-radius: 0px;
                div.modal-header{
                    border: none;
                    h1{
                        text-transform: uppercase;
                        color: var(--texto);
                    }
                }
                div.modal-body{
                    h2{
                        text-transform: uppercase;
                        color: var(--principal);
                        font-size: 1.1rem;
                    }
                    ul{
                        list-style-type: none;
                    }

                    p{
                        text-align: justify;
                    }
                }

                div.modal-footer{
                    border: none;

                    button.btn{
                        border-radius: 0px;
                        border: none;
                        &:hover{
                            background-color: var(--texto);
                        }
                    }

                    button.btn-primary{
                        color: var(--principal);
                        background-color: var(--enfasis);
                    }

                    button.btn-secondary{
                        background-color: var(--terciario);
                        color: var(--principal);
                    }
                }
            }
        }
    }

/* Inicio */
div#contenedorSelector {
  background-color: var(--secundario);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  select#selector{
    display: flex;
    background-color: transparent;
    border: none;
    color: var(--texto);
    font-size: 1.5rem;
    text-transform: uppercase;
    cursor: pointer;
    option{
        color: var(--principal);
        background-color: var(--terciario);
        border: none;
        cursor: pointer;
    }
  }
}

div#contenedorRecetas {
  div#listaRecetas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 40px;
    row-gap: 40px;
    column-gap: auto;
    justify-items: center;

    @media screen and (width < 1200px) {
        grid-template-columns: repeat(3, 1fr);
        padding: 40px 0px;
    }

    @media screen and (width < 1000px) {
        grid-template-columns: repeat(2, 1fr);
        padding: 40px 0px;
    }

    @media screen and (width < 680px) {
        grid-template-columns: repeat(1, 1fr);
        padding: 40px 0px;
    }
  }
}

/* Favoritos */
div#recetasFavoritas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 40px;
    row-gap: 40px;
    column-gap: auto;
    justify-items: center;

    
    @media screen and (width < 1200px) {
        grid-template-columns: repeat(3, 1fr);
        padding: 40px 0px;
    }

    @media screen and (width < 1000px) {
        grid-template-columns: repeat(2, 1fr);
        padding: 40px 0px;
    }

    @media screen and (width < 680px) {
        grid-template-columns: repeat(1, 1fr);
        padding: 40px 0px;
    }

    div.card{
        div.card-body{
            button.eliminarFavoritos{
             background-color: var(--enfasis);
             &:hover{
                background-color: var(--secundario);
                color: var(--principal);
                border-color: var(--principal);
             }
            }
        }
    }
}