@font-face {
    font-family: "centra";
    src:url(fonts/CentraNo2-Medium.ttf)
}

html {
    width: 100vw;
    margin: 0;
}

body {
    margin:0;
    width: 100vw;
}

/*---------Header-------------------*/
.header {
    transform: translate(0,-110px);
}

.nav_bar{

    width: 100vw;
    height: 70px;
    background-color: transparent;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translate(0,100px);
    
} 

    .item {
    display: inline;
    vertical-align: middle;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    padding: 2%;
    border-radius: 0;
    margin: 6%;
    font-family: 'centra';
    font-size: 30px;
    border-style: hidden;
    align-content: center;
}

ul{
    list-style-type: none;
}

a{
    text-decoration: none;
    color: black;
    margin: 2%;

}

.stockimage {
    width: 100vw;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* THIS IS YOUR OLD CODE

.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 96vw;
}

.logo {
    justify-self: center;
}
.b1{
    text-align:left ;
}

.b3{
    text-align: right;
}
button {
    background-color: transparent;
    padding: 2%;
    border-radius: 0;
    margin: 10%;
    font-family: 'centra';
    font-size: 30px;
    border-color: #b11cab;
    border-style: hidden;
    align-content: center;
    flex: 33%;
}*/


.about {
    justify-self: center;
    margin: 0;
    padding: 0;
}

.ingredients {
    justify-self: center;
    margin: 0;
    padding: 0;
}

.contact {
    justify-self: center;
    margin: 0;
    padding: 0;
}
/*---------Header-------------------*/

/*-------------Bags---------------------*/

.bagsoverall {
    display: flex;
    justify-content: center;
}

.bagparent {
    display: flex;
    justify-content: center;
    width: auto;
}

.bagchild {
    width: 16%;
    justify-content: space-around;
    flex: 100%;
    flex-direction: row;
}

.bag {
    width:20%;
    margin: 5%;
}


/*-------------Bags---------------------*/

/*-----------------Ingredients----------------------*/
.text {
    font-family: 'centra';
    font-size: 50px;
    text-align: center;
}

.title {
    font-family: 'centra';
    font-size: 30px;
    text-align: center;
}

.ingredientsoverall {
    justify-self: center;
    margin: 5% 0 5% 0;
}

.container {
    display: flex;
    justify-self: center;
    width: 100vw;
}

.left {
    flex: 50%;
    margin: 5%;
}

.topl {
    color: white;
    background-color: #ff595a;
    padding: 10%;
    margin: 5%;
    border-radius: 25px;
}

.bottoml {
    color: #8d1434;
    margin: 5%;
    padding: 10%;
}

.right {
    flex: 50%;
    margin: 5%;
}

.topr {
    color: #b11cab;
    margin: 5%;
    padding: 10%;
}

.bottomr {
    color: white;
    background-color: #4480d5;
    padding: 10%;
    border-radius: 25px;
}

p {
    text-align: center;
    font-family: 'centra';
    font-size: 20px;
}
/*-----------------Ingredients----------------------*/

/*-----------------Nutrients info----------------------*/
.nutrientsoverall {
    
    justify-content: center;
    align-content: center;
}

.nutrientschild {
    /*the display property below was in the class
     ".nutrientsoverall" selector. I moved it here because
     the ".nutrientschild" class is the parent container to the 
     images. The images are the children that you want to assign
     a flex position relative to the ".nutrietnsoverall" parent*/
    display: flex; 

    gap: 5vw; /* gap between each child element. (images)*/
    justify-content: center;
    align-content: center;
}

/* the selector below is called a descendant combinator.
In this case you are targeting all images within the 
"nutrientchild" class */
.nutrientschild img{ 
    width: 10vw; 
   /* ^^^^ This assigns a relative length to each image width
      and will scale consisitently with the viewport*/
} 
     


/*------this is the code that you were using to style
 the <img> tagsin the nutrientschild container--------*/

/*
.nutrientsimage {
    width: 100px;
}
    */

/*-----------------Nutrients Info----------------------*/

/*--------------About Us-----------------------*/
.aboutusoverall {
    justify-self: center;
    margin: 5% 0 5% 0;
}

.rowof3 {
    display: flex;
    width: 80vw;
}
.pcolor {
    color: #ff595a;
}

.funimage {
    width: 400px;
}

.image1 {
    flex: 50%;
}

.image2 {
    flex-direction: column;
    flex: 50%;
    margin: 0;
    align-content: center;
    display: grid;
    place-content: center;
}

/*--------------About Us-----------------------*/

/*--------------Contact-----------------------*/
.contactoverall {
    justify-self: center;
    background-color: #8d1434;
    margin: 5% 0 5% 0;
    width: 40vw;
    height: 30vw;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
}

.emailline {
    padding: 5%;
    background-color: white;
    margin: 5%;
    border-radius: 15px;
    flex-basis: 5%;
}

.message {
    padding: 5%;
    background-color: white;
    margin: 5%;
    border-radius: 15px;
    flex-basis: 95%;
}
/*--------------Contact-----------------------*/

/*--------------Footer-----------------------*/
.footerbox {
    background-color: #b11cab;
    border-radius: 25px 25px 0px 0px;
    padding: 10%;
    display: flex;
}

.textcolumn {
    color: white;
    font-family: 'centra';
    font-size: 20pt;
    flex: 50%;
}

.socials {
    width: 50px;
}

.socialmedia {
    align-content: flex-end;
    align-content: right;
}
/*--------------Footer-----------------------*/