/* Importing fonts */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Gloria+Hallelujah&family=Hurricane&family=Indie+Flower&family=Inspiration&family=Palette+Mosaic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;1,900&display=swap');

/* font-family: 'Amatic SC', cursive;
font-family: 'Gloria Hallelujah', cursive;
font-family: 'Hurricane', cursive;
font-family: 'Indie Flower', cursive;
font-family: 'Inspiration', cursive;
font-family: 'Palette Mosaic', cursive; */
/* Setting variables for easy color management */
:root {
  --background: #99aa99;
  --gradient: linear-gradient(10deg, #00ff00, #0000ff, #ff00ff);
  --navText: #005500;
  --bodyText: #002f00;
  --footer: #276B27;
  --footerNav: #002700;
  --logo: #470F0F;
  --icons: #739573;
}

/* Reseting the default behavior of most browsers */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 18px;
  height: 100%;
}

body {
  background: var(--background);
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.container {
  width: 90%;
  /*height: 94vh;*/
  margin: 0 auto;
}

header {
  width: 100%;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  /* border: 2px solid red; */
}

h1,
h2,
h3 {
  color: var(--logo);
  /* font-family: 'Gloria Hallelujah', cursive; */
  /* font-family: 'Palette Mosaic', cursive; */
  /* font-family: 'Inspiration', cursive; */
  font-family: 'Indie Flower', cursive;
  /* font-family: 'Hurricane', cursive; */
  text-transform: capitalize;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
  margin: 10px;
}

h3 {
  margin-left: 10px;
  font-size: 2rem;
}

.nav_section {
  background: var(--navText);
  padding: 0 0 20px 0;
  margin-top: 100px;
  border: 2px solid purple;
}

.nav_title {
  /* font-family: 'Ubuntu', sans-serif; */
  margin: 20px auto;
  text-align: center;
  color: var(--navText);
  /* border: 2px solid red; */
}

.nav-toggle-label span,
.nav-toggle-label::before,
.nav-toggle-label::after {
  display: block;
  background: var(--navText);
  height: 4px;
  width: 2em;
  border-radius: 2px;
  margin: auto;
  /* border: 2px solid red; */
}

.nav-toggle-label::before,
.nav-toggle-label::after {
  content: '';
  position: relative;
}

.nav-toggle-label::before {
  bottom: 10px;
}

.nav-toggle-label::after {
  top: 10px;
}

nav {
  color: var(--background);
  font-family: 'Amatic SC', cursive;
  display: none;
}

.nav-toggle:checked~nav {
  display: block;
}

.nav-toggle {
  display: none;
}

#nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
}

.sub_nav_list {
  display: none;
}

.nav_list_item {
  list-style: none;
  margin-top: 1rem;
  /* border: 2px solid red; */
}

.nav_list_link {
  text-align: center;
  color: var(--navText);
  text-decoration: none;
  font-size: 4rem;
  text-transform: capitalize;
  /* border: 2px solid yellow; */
}

.nav_carrot {
  margin-left: 5px;
}

.active {
  border-bottom: 2px solid;
}


/* .main, */
.main_clean {
  color: var(--bodyText);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /*flex-grow: 1;*/
}

a {
  text-decoration: none;
  color: var(--navText)
}



p {
  margin: 10px;
}

.hero {
   border-radius: 15px;
    box-shadow: 1px 1px 9px black;
    padding: 15px;
  font-size: 1.5rem;
  /* width: 50%; */
  background: rgba(256, 256, 256, .2);
}

.projects {
  list-style: none;
}

.info {
    display: grid;
    gap: 1rem;
    grid-template-rows: repeat(3, .5fr);
}


.info_list_item {
    width: 1fr;
    border-radius: 15px;
    background: #D1D9D1;
}


.info,
.recipes_list,
.info_details,
.ingrediants_list,
.source {
  list-style: none;
}

.info,
.recipes_list {
  font-size: 1.75rem;
  font-weight: 900;
}

.info_list_item,
.info_details {
}

.info_details,
.ingrediants_list,
.source {
  margin-left: 20px;
  font-size: 1.25rem;
  padding: 10px;
}

.please {
  font-size: .75rem;
}

.destructions_list {
  margin-left: 40px;
  padding-top: 10px;
  font-size: 1.25rem;
}

.ingredieint_list_item,
.destruction_list_item {
    padding-top: 30px;
}
.rel_ops {
  list-style: none;
  display: flex;
  justify-content: center;
}

.shirts {
  margin-top: 4rem;
}

.little_image {
    display: block;
    max-width:90%;
    margin: 0 auto;
}

.shirts {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-between;
 // border: 2px solid red;
  padding: 40px;
}


.shirts img {
    width: 25%;

}

#footer>a {
  text-decoration: none;
  color: var(--footerNav)
}

.footer {
  padding: 10px;
  /* display: flex; */
  background: var(--footer);
  color: var(--background);
  text-align: center;
  text-transform: capitalize;
  margin-top: auto;
}

/* ############################################### */
/* #************Full Screen Stylesheet***********# */
/* ############################################### */
.container {
  width: 75%;
  /* border:2px solid red; */
}
#footer>a {
  text-decoration: none;
  color: var(--footerNav)
}#footer>a {
  text-decoration: none;
  color: var(--footerNav)
}#footer>a {
  text-decoration: none;
  color: var(--footerNav)
}#footer>a {
  text-decoration: none;
  color: var(--footerNav)
}
@media screen and (min-width: 600px) {
  header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  .nav_section {
    background: var(--background);
    padding: 0 0 20px 0;
    color: var(--navText);
    /* border: 2px solid red; */
  }

  .nav_title {
    display: none;
    /* font-family: 'Ubuntu', sans-serif; */
  }

  .nav-toggle-label {
    display: none;
  }

  nav {
    display: flex;
    padding: 10px;
  }

  .nav_list_link {
    /* font-size: 1rem; */
    color: var(--navText);
    margin-right: 30px;
    ;
  }

  #nav {
    flex-direction: row;
    /* justify-content: space-between; */
  }

  h1 {
    font-size: 6rem;
  }

  h2 {
    font-size: 3rem;
    margin: 10px;
  }

  h3 {
    /* font-size: 1rem; */
    /* text-align: center; */
  }

  .hero {
    font-size: 1rem;
    border-radius: 15px;
    box-shadow: 1px 1px 9px black;
    padding: 15px;
    /* width: 50%; */
  }

  .info {
      grid-template-columns: repeat(3, 1fr);
/*      max-width: 50%; */
  }
  
  .pretty {
    display: grid;
    grid-template-rows: repeat(2, .5fr);
/*    border: 2px solid red; */
    text-align: center;
 }
 
 .pretty img {
     display: block;
 }