body {
  overflow-x: hidden;
  margin: none;
}

.container {  
  width: 100vw;
  height: 380vh;
  display: grid;
  grid-template-columns: 2fr 1fr 12fr;
  grid-template-rows: 3fr 7fr 2fr 8fr 2fr 8fr 2fr 8fr 2fr 8fr 1fr 3fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . ."
    "progress . opening"
    "progress . ."
    "progress . security"
    "progress . ."
    "progress . features"
    "progress . ."
    "progress . themes"
    "progress . ."
    "progress . roadmap"
    ". . ."
    "footer footer footer";
}

.opening {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5fr 1fr 2fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "logo"
    "."
    "getitbutton";
  grid-area: opening;
}

.logo { 
  grid-area: logo;
  animation: fadeIn 1s;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
}

 #homelogo {
    object-fit: contain;
  }

.getitbutton { 
  grid-area: getitbutton;
  -webkit-animation: fadeInDel 1s;
  -moz-animation: fadeInDel 1s;
  -o-animation: fadeInDel 1s;
  -ms-animation: fadeInDel 1s;
}

.progress { grid-area: progress; }

.security {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "security-image security-text"; 
  grid-area: security;
}
.security-image {
  grid-area: security-image; 
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Example_image.svg/600px-Example_image.svg.png");
  object-fit: contain;
  overflow: hidden;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.4));
}
.securitytext { 
  grid-area: security-text;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.4));
}

.features {
  display: grid; 
  grid-template-columns: 7fr 7fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "features-image features-text ."; 
  grid-area: features; 
}

.features-image {
  grid-area: features-image; 
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.4));
}
.featurestext { 
  grid-area: features-text; 
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.4));
}

.themes {
  display: grid; 
  grid-template-columns: 7fr 7fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "themes-image themes-text ."; 
  grid-area: themes; 
}

.themes-image {
  grid-area: themes-image; 
  background-image: url("MultiTheme.jpg");
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.4));
}
.themestext { 
  grid-area: themes-text; 
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.4));
}

.roadmap { grid-area: roadmap; }

.footer { grid-area: footer; }

.scrollopacity {
  opacity: 1;
  transform: translate(0vw);
  transition: opacity 0.3s;
  transition: transform 0.3s;
}

.hide {
  transform: translate(-10vw);
  opacity: 0;
}

.spaceleft {
  margin-left: 3vw;
  margin-right: 2vw;
  font-size: 3em;
  font-weight: 500;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInDel {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeInDel {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeInDel {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeInDel {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeInDel {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}