.intro{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.pageHeader{
    margin-top:0px;
    margin-bottom:0px;    
}
.pageContent{
    overflow-y: auto;
}
.about{
    /* height:calc(100vh - 10rem); */
    overflow-x: hidden;
    padding-left: 10rem;
    padding-right: 10rem;
}

main.content{
    overflow-y: scroll;
}

.steps{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: min-content 1fr 1fr;
    column-gap: 1rem;
}

.tutorials img,
.steps img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-column: 1/2;
    grid-row: 1/4;
}

.introButtons{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    width:20rem;
    margin-top:1rem;
}

.step{
    color:#3c64B1
}

section{
    margin-bottom: 2rem;
}

.steps header{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}

#step1{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end:3;
}

#step2{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end:3;
}

#step3{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end:4;
}

#step4{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end:4;
}

section.tutorials{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content;
    column-gap: 1rem;
}

section.tutorials header{
    grid-column-start: 2;
    grid-column-end: 3;
}

section.tutorials div{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

.featured{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    margin-top:1rem;
}

.featured article{
    margin-right: 1rem;
    width: 10rem;
    cursor: pointer;
    overflow: hidden;
}

.featured article img{
    width:10rem;
    height:100px;
    object-fit: cover;
}

.featured article div{
    display:-webkit-box;
    display:block;
    height:4rem;
    text-overflow: ellipsis;
    overflow-y: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient:vertical;
}

.tutorials button{
    margin-top:1rem;
}

.subscriptions{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

.subscriptions article{
    margin-right:1rem;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .subscriptions{
        display: block;
    }

    .about{
        padding-left: 1rem;
        padding-right: 2rem;
    }

    .steps{
        grid-template-rows: min-content min-content;
    }
    .steps img{
        grid-column: 1/4;
        grid-row:1/2;
    }
    section.tutorials header{
        grid-column: 2/4;
        grid-row:2/3;
    }
    .steps header{
        grid-column: 1/4;
        grid-row:2/3;
    }

    section.tutorials div{
        grid-column:2/4;
        grid-row:3/4;
    }
    
    #step1{
        grid-row:3/4;
        grid-column:1/2;
    }
     #step3{
        grid-row:4/5;
        grid-column:1/2;
    }
    #step2{
        grid-row:3/4;
        grid-column:2/4;
    }
    #step4{
        grid-row:4/5;
        grid-column:2/4;
    }

    .pageHeader .pageNavigation li{
        font-size: 10px;
    }

    .pageHeader{
        margin-bottom: 1rem;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}
  
  /* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .pageHeader{
        grid-column: 1/13;
        white-space: nowrap;
    }

    .pageContent{
      grid-column: 1/13;
    }
  }
  
  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
    .subscriptions{
        display: flex;
    }

    .pageHeader{
        grid-column: 3/11;
        white-space: nowrap;
    }

    section.why div{
        column-count: 2;
        margin-top: 1rem;
    }

    section.why div p:first-of-type{
        margin-top: 0px;
    }
  }
  
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
  }


  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1440px) {
      .about{
          max-width: 1440px;
          margin-left: auto;
          margin-right: auto;
      }
}