@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

:root {
  --backgroundwhite: #ebebed;
  --blue: #2a40e2;
  --hoverblue: #5d71ee;
  --yellow: #eed95d;
  --sectionspacing: 15vh;
  --bordergrey: rgb(119, 118, 118);
}

*,::after,::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: 1;
}

html {
  font-size: 16px;
}

body {
  font-family: optima,sans-serif;
  background-color: var(--backgroundwhite);
}
.bold {
  font-weight: bold;
}
main,header,footer {
  width: 100%;
  background-color: var(--backgroundwhite);
  
}

header,footer {
  background-color: var(--yellow);
}

header {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  z-index: 3;
}
header #header-img {
  transform: scale(0.75);
  max-height: 15vh;
  position: relative;
  top: 0;
  padding: 5px;

}
#nav-bar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;

}

.nav-link {
  margin-right: 5px;
  border-radius: 3px;
  padding: 1rem;
  text-decoration: none;
  font-size: 0.6rem;
  font-weight: bold;
  color: var(--blue);
  border: 1px solid var(--blue);
  
}

.nav-link:hover {
  background-color: var(--blue);
  color: var(--yellow);
  transition: background-color 0.75s;
}

.nav-link:active {
  background-color: var(--hoverblue);
  color: var(--yellow);
}




section {
  margin: 10vh auto;
  padding: 0.5em;
}

#headings {
  display: flex;
  text-align:center;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}
#mainh6 {
  font-size: 0.5rem;
  padding: 1em 0;
}
#mainh1 {
  font-size: 1rem;
}


.blue {
  color: var(--blue);
}
#features {
  width: 90%;
  border: 0.5px solid var(--bordergrey);
  border-radius: 5px;
  display: grid;
  grid-template-columns: 70% 30%;
  align-items: center;

}
iframe {
  min-height: 80%;
  min-width: 100%;
  max-width:100%;
  max-height: 100%;
  object-fit: contain;
  border-width: 0;
  border-radius: 5px;
}
aside {
  padding-left: 1em;
  }


.article {
  margin-bottom: 25px;
}

.listtitle {
  padding: 5px 0;
}

.article>i {
  font-size: 0.8em;
  position: relative;
  left: 1px;
}
.article:hover > .listtitle, .article:hover >i{
  color: var(--blue);
  transition: color 0.6s;
  cursor: default
}

.listdetail {
  font-size: 0.5rem;
}
.article-1 {
  grid-row: 1/5;
  grid-column: 1/1;
}
.article-2 {
  grid-row: 2/5;
  grid-column: 1/1;
}
.article-3 {
  grid-row: 3/5;
  grid-column: 1/1;
}
.article-4 {
  grid-row: 4/5;
  grid-column: 1/1;
}
#plans {
    display: flex;
    flex-direction: column;

  }
.plan {
  border: 0.5px solid var(--bordergrey);
  padding: 0.8em;
  border-radius: 5px;
  margin-bottom: 1.5em;
}

.titlelogo {
  max-width: 100%;
  max-height: 100%;
}
.titlediv {
  display: grid;
  grid-template-columns: 80% 20%; 
  row-gap: 1em;
  padding: 1em  0 2.5em;
  min-width: 111px;
  
}
.title {
  font-size: 0.65em;
  grid-column: 1/3;
  grid-row: 1/3;

}
.titlespeed {
  font-size: 1em;
  font-weight: bold;
  grid-column: 1/3;
  grid-row: 2/3;
}

.titlelogo {
  font-size: 1.5em;
  
  grid-column: 2/3;
  grid-row: 1/3;
}

.contentdiv {
  padding: 2.5em 0;
}

.item {
  font-size: 0.65em;
  border-bottom: 0.5px solid var(--bordergrey);
  padding: 0.7em 0;
}
.service {
  font-size: 0.7em;
  padding: 0.2em 0;
  border: none;
}

#signup {
  padding: 0.8em;
  text-align: center;
}
#signup h2 {
  font-size: 0.85rem;
  padding: 1em 0;
}

#form {
  margin-top: 1em;
}

#email {
  margin-bottom: 0.25em;
  max-width: 100%;
  font-size: 0.8em;
  font-family: monospace;
}

#submit,#email {
  border: 0.5px solid var(--bordergrey);
  padding: 0.4em;
  border-radius: 5px;
}
#submit {
  margin-top: 3em;
  font-size: 0.65em;
  color: var(--blue);
  border: 1px solid var(--blue);
  font-weight: bold;
}

#submit:hover {
  background-color: var(--blue);
  color: var(--backgroundwhite);
  transition: background-color 0.75s;
}

#submit:active {
  background-color: var(--hoverblue);
}
address {
  margin: auto auto;
}


.footer-text {
  font-size: 0.5rem;
  vertical-align: center;
  padding: 8px;
  color: var(--blue);
  text-align: center;
}





@media only screen and (min-width:768px) { /*min-width:230px*/
   header {
     flex-direction: row;
     justify-content: space-between;
     
   }
   header,footer {
    height: 12vh;
     min-height: 30px;
   }
   header #header-img {
     min-height:30px;
   }
   
}
@media only screen and (min-width: 768px){  /*min-width:320px*/
  #plans {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100%;
    padding: 0.5em;
    column-gap: 1em;
  }
}
@media only screen and (max-width: 425px){  /*max-width:406px*/
  
  #features {
  grid-template-rows: repeat(5,1fr);
  grid-template-columns: 100%;
  row-gap: 20px;
  align-items: stretch;
  justify-items: center;
  }
  iframe {
    grid-row: 1/6;
    grid-column: 1/1;
  }
  .article-1 {
  grid-row: 2/6;
  grid-column: 1/1;
}
.article-2 {
  grid-row: 3/6;
  grid-column: 1/1;
}
.article-3 {
  grid-row: 4/6;
  grid-column: 1/1;
}
.article-4 {
  grid-row: 5/6;
  grid-column: 1/1;
}
}

@media only screen and (min-width: 768px){ /*min-width:407*/
  aside{
    display: grid;
    grid-template-rows: repeat(4,1fr);
  }
  
}


@media only screen and (max-width:767px) { /*max-width:230*/
  
  header #header-img {
  padding: 5px;
  min-height: 30px;
  }
  header {
    padding-bottom: 5px;
  }
  header,section {
    min-width: 160px;
  }
  section, .plan {
    min-height: 100vh;
  }
  
 
} 

@media only screen and (min-width:769px) { /*max-width:230*/
  html {
    font-size: 2vw;
  }
  #features {
    justify-content: space-evenly;
  }

 
}