.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Header Header Header Header Header Header Header Header Header Header Navbar Navbar"
    "Main Main Main Main Main Main Main Main Main Main Navbar Navbar"
    "Main Main Main Main Main Main Main Main Main Main Navbar Navbar"
    "Main Main Main Main Main Main Main Main Main Main Navbar Navbar"
    "Main Main Main Main Main Main Main Main Main Main Navbar Navbar"
    "Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer";
}

.Footer {
  grid-area: Footer;
  grid-area: Footer;
  text-align: center;

  background-color: #00000076;

  color: #ffffff;

  padding: 5px;

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 10;

  align-self: self-end;
}

.Navbar {
  grid-area: Navbar;
  grid-area: Navbar;
  height: fit-content;
}

.Header {
  grid-area: Header;
  grid-area: Header;
  text-align: center;
  padding: 20px;

}

.Main {
  grid-area: Main;

  color: white;

  height: 100px;
}


body {
  font-family: Arial, sans-serif;

  margin: 20px;

  overflow: SC;

  color: rgba(0, 0, 255, 0);

  font-family: Agency FB, sans-serif;

  text-align: center;

  background-image: url('https://img.freepik.com/free-vector/realistic-polygonal-background_23-2148911627.jpg');

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;
}




main {
  padding: 5 0px;
}




nav {

  float: right;
  bottom: 50px;
  margin-right: -10px;
  margin-top: -20px;
  line-height: 0px;
  padding: 5px;



}



nav ul {

  list-style-type: none;

}



nav ul li {

  margin-bottom: 10px;

}



nav a {

  text-decoration: none;

  color: #ffffff;

  line-height: 30px;
  max-height: 100px;
  padding: 10px;
  font-size: 18px;

}

li {


  border-color: rgb(237, 237, 237);

  border-style: solid;

  border-radius: 2px;

  text-align: center;
}


.timeline {

  position: relative;

  max-width: 1200px;

  margin: 0 auto;

}

.timeline {

  position: relative;

  max-width: 1200px;

  margin: 0 auto;

}



.timeline::after {

  content: '';

  position: absolute;

  width: 6px;

  background-color: #d6fcff;

  border: 2px outset #00b7ff;

  top: 0;

  bottom: 0;

  left: 50%;

  margin-left: -3px;



}



.containerr {

  padding: 10px 5%;

  position: relative;

  background-color: inherit;

  width: 40%;
  color: black;

}



.containerr::after {

  content: '';

  position: absolute;

  width: 25px;

  height: 25px;

  right: -17px;



  background-position: -70px -40px;

  border: 4px inset #00daff;

  top: 15px;

  z-index: 1;

}



.right {

  left: 50%;

}



.left::before {

  content: " ";

  height: 0;

  position: absolute;

  top: 22px;

  width: 0;

  z-index: 1;

  left: 90%;

  border: medium solid #00b7ff;

  border-width: 10px 0 10px 10px;

  border-color: transparent transparent transparent #00b7ff;

}



.right::before {

  content: "   ";

  height: 0;

  position: absolute;

  top: 22px;

  width: 0;

  z-index: 1;

  right: 90%;

  border: medium solid #00b7ff;

  border-width: 10px 10px 10px 0;

  border-color: transparent #00b7ff transparent transparent;

}



.right::after {

  left: -16px;

}



.content {

  padding: 10px 20px;

  background-color: #00daff;

  position: relative;

  border: outset 2px #00b7ff;

}

@media screen and (max-width: 400px) {

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Header Header Header Header Header Header"
      "Navbar Navbar Navbar Navbar Navbar Navbar"
      "Main Main Main Main Main Main"
      "Main Main Main Main Main Main"
      "Main Main Main Main Main Main"
      "Footer Footer Footer Footer Footer Footer";

  }

  .Header {
    grid-area: Header;

  }

  .Navbar {
    grid-area: Navbar;
  }

  ul {
    padding: 2px;
    display: flex;
    flex-direction: row;
  }

  .Main {
    grid-area: Main;
  }

  .Footer {
    grid-area: Footer;
  }

  img {

    max-width: 100%;

  }

  body {
    margin: 0;
  }
  .timeline::after {
    left: 31px;
}

.containerr {
    width: 70%;
    padding-left: 70px;
    padding-right: 25px;
}

.containerr::before {
    left: 60px;
    border: medium solid #00daff;
    border-width: 10px 10px 10px 0;
    border-color: transparent #00daff transparent transparent;
}

.left::after,
.right::after {
    left: 15px;
}

.right {
    left: 0%;
}
  
}