/** EVERYONE **/
* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    /* color: rgb(61, 61, 61); */
    color: rgb(48, 48, 48);
    font-family: Rockwell, sans-serif;
    font-size: 18px;
}

body {
    margin: 0;
    padding: 0;
}


/** GRID **/
.grid {
    display: grid;
    /* grid-gap: 20px; */
    /* padding: 2%; */
}

.col-1 {
    grid-template-columns: 1fr;
}
.col-2 {
    grid-template-columns: 1fr 1fr;
}
.col-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.col-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.col-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.col-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.row-1 {
    grid-template-rows: 1fr;
}
.row-2 {
    grid-template-rows: 1fr 1fr;
}
.row-3 {
    grid-template-rows: 1fr 1fr 1fr;
}
.row-4 {
    grid-template-rows: 1fr 1fr 1fr 1fr;
}
.row-5 {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
/** Navbar **/


/**Footer**/


.footer-link-elem {
    text-decoration: none;
    color: #616161;
}

/** INDEX.HTML **/
.container {
    /* height: 95vh; */
    padding-bottom: 5%;
    height: 94%;
}

.banner-container {
    display: flex;
    height: 100%;
    align-items: center;
    /* justify-content: center; */
}

.btn-elem-tryout {
    padding: 1% 1.5% 1% 1.5%;
    background-color: rgba(233, 209, 247, 1);
    border-radius: 15px;
    box-shadow: 2px 3px 6px rgb(80, 80, 80);
    /* font-size: 18px; */
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: rgb(48, 48, 48);
}

.banner {
    /* border: 2px solid black; */
    height: 40%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(100, 100, 100, 0.6);
    /*background-color: rgba(247, 209, 223, 0.8);
    background-color: rgba(247, 214, 209, 0.8);
    background-color: rgba(247, 233, 209, 0.8);
    /* background-color: rgba(242, 247, 209, 0.8); */
   flex-direction: column;
    border-radius: 1%;
    /* margin-top: auto;
    margin-bottom: auto; */
}

#bg-img-slider {
    background-image: url("../assets/start.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}


.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #5e5e5e;
    border-radius: 50%;
    display: inline-block;
    /*transition: background-color 0.6s ease;*/
}

.active, .dot:hover {
    background-color: #a3a3a3;
}

/** BREAKFAST.HTML **/

.grid-areas-breaki {
    grid-template-areas: 
    "x a a b b z"
    "x c c d d z"
    "x e e f f z";
}

.gallery {
    width: 70%;
    border-radius: 10px;
    justify-self: center;
    margin-top: 12%;
    line-height: 1.5;
    text-align: center;
}

.first {
    grid-area: a;
}
.second {
    grid-area: b;
}
.third {
    grid-area: c;
}
.fourth {
    grid-area: d;
}
.fifth {
    grid-area: e;
}
.sixth {
    grid-area: f;
}

.gallery img {
    /* width: 350px;
    height: 250px; */
    width: 100%;
    border-radius: 10px;
}

.desc {
    padding: 1%;
    padding-top: 3%;
}

/**BLUEBERRY OATMEAL BOWL**/

/* .cover-img img {
    border-radius: 20px;
    width: 50%;
} */
.instructions {
    /* border: 2px solid black; */
    /* height: 70%; */
    align-self: start;
    padding:0.5% 5% 1% 5%;
    border-radius: 20px;
    background-color: rgba(233, 209, 247, 0.8);
    border: 2px solid black;
    justify-self: start;
    grid-area: c;
}
.cover-img {
    border: 2px solid black;
    justify-self: start;
    align-self: center;
    border-radius: 20px;
    width: 100%;
    grid-area: a;
}
/* .flex {
    display: flex;
    justify-content: center;
} */

.recipe {
    border: 2px solid black;
    padding: 2%;
    grid-gap: 50px;
    grid-template-areas: 
    "x a a b b z"
    "x c c c c z";
}

.ingredients {
    padding: 1% 5% 1% 5%;
    border-radius: 20px;
    background-color: rgba(242, 247, 209, 0.8);
    border: 2px solid black;
    justify-self: start;
    grid-area: b;
}