.container{
  width: 100%;
  display: flex;
  justify-content: center;
}

.inner-container{
  width: 100%;
}

@media only screen and (min-width: 980px){
  .inner-container{
    max-width: 880px;
  }  
}

.flex-right{
  display: flex;
  justify-content: right;
}

.flex-right-gap-1{
  gap: 1rem;
  display: flex;
  justify-content: right;
}


.flex-left-no-gap{
  display: flex;
  justify-content: left;
}

.flex-left{
  display: flex;
  gap: 1rem;
  justify-content: left;
}

.flex-left-gap-point-5{
  display: flex;
  gap: .5rem;
  justify-content: left;
}

.flex-align-center{
  display: flex;
  align-items: center;
}

.flex-center{
  display: flex;
  justify-content: center;
}

.flex-space-between{
  display: flex;
  gap: .4rem;
  justify-content: space-between;
}

.flex-space-around{
  display: flex;
  justify-content: space-around;
}

.flex-vertical-center{
  display: flex;
  align-items: center;
}

.flex-bottom{
  display: flex;
  align-items: baseline;
}

.center-text{
  text-align: center;
}

.l1-header{
  font-size: 3rem;
  color: var(--primary-color);
  font-family: Raleway;
}

.l2-header{
  font-size: 3rem;
  color: var(--grey-2);
  font-weight: 700;

}

.l3-header{
  font-size: 2rem;
  color: var(--grey-2);
  font-weight: 700;

}

.l4-header{
  font-size: 1.5rem;
  color: var(--grey-2);
  font-weight: 600;
}

.list-item-heading{
  margin-top: 0;
  padding-top: 0;
  color: var(--grey-2);
  font-weight: 500;
  font-size: 1.6rem;
}

.list-item-heading-link{
  margin-top: 0;
  padding-top: 0;
  color: var(--grey-2);
  font-weight: 500;
  font-size: 1.6rem;
  &:hover{
    color: var(--primary-color);
    text-decoration: none;
  }
}

.list-item-heading-small{
  margin-top: 0;
  padding-top: 0;
  color: var(--grey-2);
  font-weight: 400;
  font-size: 1.2rem;
}

.l3-text{
  font-size: 2rem;
  color: var(--grey-2);
}

.l4-text{
  font-size: 1.5rem;
  color: var(--grey-2);
  font-weight: 700;
}

.l1-paragraph{
  font-size: 1.1rem;
  color: var(--grey-2);
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight: 400;
}

.shading-1{
  background-color: #eef4fa;
}

.shading-2{
  background-color: #deebf8;
  padding: 1rem;
}

.shading-white{
  background-color: #ffffff;
  padding: 1rem;
}

.tutorial-container{
  padding: 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.subsciption-form{
  padding-left: 2rem;
  padding-right: 2rem;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  box-sizing: border-box;
}

.bottom-space-1{
  padding-bottom: 1rem;
}

.bottom-space-2{
  padding-bottom: 2rem;
}

.left-space-2{
  padding-left: 2rem;
}

.left-space-0{
  padding-left: 0 !important;
}

.top-space-1{
  padding-top: 1rem;
}

.top-space-2{
  padding-top: 2rem;
}

.top-space-point-5{
  padding-top: .5rem;
}

.bottom-space-point-5{
  padding-bottom: .5rem;
}

.top-border{
  border-top: 1px solid #7e9bb9;
  padding-top: 1rem;
}

.bottom-white-border{
  border-bottom: 1px solid #ffffff;
}

.meta-text{
  font-size: .9rem;
  font-family: Roboto;
  color: #b8b8b8;
}

.meta-text-bold{
  font-size: .9rem;
  font-family: Roboto;
  color: #2f2f2f;
  font-weight: 600;
}

.meta-text-large{
  font-size: 1rem;
  font-family: Roboto;
  color: #2f2f2f;
}

.fill-height{
  height: 60vh;
}