@media only screen and (max-width: 600px) {
  .container {
      padding: 5%;
  }
}

body {
  background-color: #4d4b42;
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
}

.parent {
  position: relative;
  top: 0;
  left: 0;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
  background-position: center;
  width: 100%;
  height: 200%;
}

.image2 {
  position: absolute;
  top: 13%;
  left: 32%;
  right: 70%;
  margin: auto;
  width: 40%;
  transform: rotate(10deg);
}

.navbar {
  background-color: #ffe586;
  overflow: hidden;
  top: 0;
  position: fixed;
  width: 100%;
  z-index: 700;
  padding: -20%;
}

.navbar a {
  float: left;
  display: block;
  color: #333;
  text-align: center;
  padding: 2% 3%;
  text-decoration: none;
  background-color: #ffe586;
  font-size: 1.6vw;
  font-weight: 400;
}

.navbar a:hover {
  background-color: #f6e6ab;
  color: #515151;
}

.container {
  position: relative;
  width: 100%;
  height: 3000px;
  overflow: hidden;
}

.lespaul {
  position: absolute;
  top: -5%;
  right: -40%;
  width: 100%;
  height: auto;
  z-index: 2;
}

.lespaul2 {
  position: absolute;
  top: -5%;
  right: -20%;
  width: 100%;
  height: auto;
  z-index: 2;
}

.impact {
  margin-top: -113%;
  position: absolute;
  font-size: 2.6vw;
  color: #ffe586;
  margin-left: 4%;
  width: 55%;
  border: 0.2vw solid;
  border-radius: 0.4vw;
  padding: 2%;
  border-color: #ffe586;
  background-color: rgb(120, 122, 122);
}

.timeline {
  position: relative;
  text-align: left;
  width: 60%;
  z-index: 2;
  padding-left: 4%;
  margin-top: 10%;
}

.timeline-item {
  display: flex;
  margin-bottom: 3%;
}

.timeline-date {
  width: 10%;
  background-color: #333;
  color: #ffe586;
  padding: 1.5%;
  text-align: center;
  font-size: 1.7vw;
  border: 0.3vw solid #ffe586;
  border-radius: 0.3vw;
}

.timeline-content {
  flex: 1;
  padding: 1.5%;
  border: 0.2vw solid #ffe586;
  border-radius: 0.3vw;
  color: #ffe586;
  background-color: rgb(120, 122, 122);
}

.timeline-content h2 {
  margin-top: 0;
}

h1 {
  margin-right: 55%;
  color: #ffe586;
  font-size: 4vw;
  text-align: center;
  width:100%;
}

.Description {
  font-weight: 900;
}

h3 {
  position: absolute;
  right: 12%;
  color: #ffe586;
  font-size: 4vw;
  margin-right: 47%;
  margin-top: -120%;
  text-align: center;
}

h4 {
  position: absolute;
  margin-top: -12%;
  color: #ffe586;
  font-size: 5vw;
  margin-left: 17%;
}

.containerb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-row-gap: -30%;
  margin: 0;
  padding: 0;
  height: auto;
  position: absolute;
  margin-top: -2%;
}

.jimmy img,
.george img,
.slash img,
.perry img,
.jimi img,
.paul img {
  border-color: #f6e6ab;
  border-width: 0.4vw;
  border-style: solid;
  border-radius: 0.3vw;
}

.jimmy img {
  height: 40%;
  width: 80%;
  margin-left: 5%;
  padding: 0;
  border-color: #f6e6ab;
  border-width: 0.4vw;
  border-style: solid;
}

.george img {
  height: 40%;
  width: 80%;
  margin: 0;
  padding: 0;
}

.slash img {
  height: 40%;
  width: 80%;
  margin: 0;
  padding: 0;
  z-index: 1000;
}

.perry img {
  height: 40%;
  width: 80%;
  margin-left: 5%;
  padding: 0;
}

.jimi img {
  height: 40%;
  width: 80%;
  margin: 0;
  padding: 0;
}

.paul img {
  height: 40%;
  width: 90%;
  margin: 0;
  padding: 0;
}

.jimmytext {
  margin-left: 20%;
  margin-top: 3%;
  font-size: 3vw;
  color: #ffe586;
}

.georgetext {
  margin-left: 6%;
  margin-top: 3%;
  font-size: 3vw;
  color: #ffe586;
}

.slashtext {
  margin-left: 30%;
  margin-top: 3%;
  font-size: 3vw;
  color: #ffe586;
}

.perrytext {
  margin-left: 25%;
  margin-top: 3%;
  font-size: 3vw;
  color: #ffe586;
}

.jimitext {
  margin-left: 18%;
  margin-top: 3%;
  font-size: 3vw;
  color: #ffe586;
}

.paultext {
  margin-left: 12%;
  margin-top: 3%;
  font-size: 3vw;
  color: #ffe586;
}


html {
  scroll-behavior:smooth;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: -20%;
  background-color: #333;
  color: #ffe586;
  text-align: center;
  
  z-index: 1000;
 
}



footer {
  display:block;
}