* {
  /* applies to all components of the page */
  /* margin: 0; */
  /* padding: 0; */
  font-family: sans-serif;
  /* box-sizing: border-box; */
}

/* Styling links takes the order link, visited, hover, active*/
a:link {
  color: blueviolet;
  text-decoration: none; /* removes underline from link*/
}

h1,
h2,
p,
li {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-decoration-color: rgb(2, 48, 2);
}
/* CSS Grid */
.container-grid {
  /* CSS GRID */
  display: grid;
  /* border-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px; */
  background: #73ad21;
  /* grid-template-rows: 70px 30px 592px 52px; 100px 30px 1fr 32px; */
  /* height: 100%; */
  margin: 0.1%;
  padding: 0;
  /* grid-template-rows: 13% 80.5% 6.5%; */
  grid-template-rows: 106px 1fr 20px;
  /* align-items: stretch; */
}
.rCorners {
  border-radius: 15px;
  /* background: #73ad21; */
}

.pipe-seperator {
  border-left: 1px solid #000000;
  /* padding-left: 5px; */
  margin: 0;
  padding: 0;
}

.nav-grid-item {
  /* style nav items */
  /* grid-row: 2 / span 2; */
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  font-size: small;
  /* margin: 0;
  padding: 0; */
  /* justify-self: left; */
  /* align-self: end; */
  /* align-items: end; */
  /* justify-self: end; */
  align-content: end;
}

.grid-item-logo {
  /* Added for Demo Purpose */
  justify-self: left;
  /* align-self: end; */
}
.main-header-right {
  display: grid;
  /* gap: 10px; */
  grid-template-rows: 1fr 1fr;
  /* margin: 0;
  padding: 0; */
}

.main-header {
  display: grid;
  /* margin: 0;
  padding: 0; */
  grid-template-columns: 1fr 4fr 1fr;
  background-color: white;
  /* justify-items: center; */
  /* border-radius: 15px; */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.banner-div {
  height: 32px;
  border-width: 0;
  /* margin: 0; */
  background-color: aqua;
  grid-column: 1 / span 3;
  /* text-align: center;
  vertical-align: center;
  align-items: start; */
  justify-items: center;
  align-content: center;
  padding: 0;
}
.main-body {
  margin: 0;
  padding: 0;
  display: grid;
  background-color: whitesmoke;
  grid-template-columns: 3fr 1fr;
  /* grid-template-rows: 1fr 1fr; Specifies two rows of size 1fr each */
  /* border-radius: 15px; */
}

.aside1 {
  /* background: rgb(2, 48, 2); */
  background: white;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-items: center;
  align-items: center;
  align-self: start;
  border-radius: 10px 50px;
  margin-left: 10px;
  margin-right: 10px;
  /* border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px; */
}

.aside2 {
  background: white;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-items: center;
  align-items: center;
  align-self: end;
  border-radius: 50px 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.main-middle-left {
  /* background: yellow; */
  /* grid-column: 1 / 2; used to specify numner of columns and rows for this child
  grid-row: 1 / 3; */
  /* justify-items: left;
  align-items: center;
  align-self: start; */
  /*border-radius: 50px 10px; */
  /* background-size: contain; */
  background-image: url("/images/Pic2.jpg");
  background-repeat: no-repeat;
  animation-name: mntpicxs;
  animation-duration: 12s;
  animation-timing-function: linear; /* or ease, ease-in, ease-out, ease-in-out */
  animation-iteration-count: infinite; /* or a number, e.g., 3 */
  animation-direction: alternate; /* or normal, reverse  */
}

.main-middle-right {
  display: grid;
  row-gap: 5px;
  background: black;
}
.main-footer {
  /* display: grid; */
  background-color: white;
  font-size: x-small;
  font-weight: lighter;

  /* height: 50px; */
  /* align-items: center; */
  justify-items: center;
  /* align-items: center; */

  border-top: 1px solid #70777f;
  /* border-top: 1px solid var(--border); */
  /* padding-top: 5px; */
  /* padding-bottom: 5px; */
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  /* color: #70777f;
  color: var(--text-muted); */
  /* Sticky Footer */
  position: fixed;
  /* left: 0; */
  bottom: 0;
  width: 100%;
}

.asterisk {
  list-style: disc; /* "* "; */
  font-weight: bold;
  /* color: whitesmoke; */
}

/* li { Overrides all list items
  display: block;
  font-weight: bold;
  color: whitesmoke;
} */
/*-------------------------------------------------*/
@keyframes mntpicxs {
  0% {
    background-position: 0% 15%;
  } /* Slides vertically */
  100% {
    background-position: 100% 0%;
  } /* Slides horizontally */
  /*   0% {
    background-image: url("./Pic1.jpg");
  }
  25% {
    background-image: url("./Pic2.jpg");
  }
  50% {
    background-image: url("./Pic1.jpg");
  }
  100% {
    background-image: url("./Pic2.jpg");
  } */
}