/* 

font-family: 'Abril Fatface', cursive;
font-family: 'Alfa Slab One', cursive;
font-family: 'Lato', sans-serif;
font-family: 'Roboto', sans-serif;
 */

 [id]::before {
    content: '';
    display: block;
    height:      75px;
    margin-top: -50px;
    visibility: hidden;
  }
body{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
.intro img{
    width: 50%;
}
.array{
    display: flex;
    max-width: 100%;
    justify-content: center;

}
.array-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    width: 60%;
    row-gap: 20px;
    margin: auto;
}
.array img, .array-grid img{
    width: 120px;
    vertical-align: bottom;
}

.array div{
    margin: 0 15px;
    font-weight: bold;
}
span {
    font-weight: 600;
}

.code,span.code{
    
    font-family: monospace;
    background-color: rgb(230, 230, 230);
    padding: 5px;

}
.code-block{
    max-width: 65%;
    display: flex;
    justify-content: center;
    font-family: monospace;
    background-color: rgb(230, 230, 230);
    padding: 20px;
    margin: 20px auto;
}

.array-bracets{
    font-size: 120px;
}

.array-single img{
    width: 160px;
}
  span {
      font-weight: 600;
  }

section{
    /* display: flex;
    align-items:center;
    flex-direction: column; */
    min-height: 95vh;
    /* margin: 160px 0; */
    margin-top: 300px;
}

ul li{
    list-style-type: none;
    margin: 30px 0;
}

h3{
    max-width: 60%;
    margin: auto;
    font-family: 'Roboto', sans-serif;

}

.array-grid{
    margin-top: 50px;
}

.scrollFade {
    opacity: 1;
    pointer-events: all;
  }
  .scrollFade--hidden {
    opacity: 0;
    pointer-events: none;
  }
  .scrollFade--visible {
    opacity: 1;
    pointer-events: all;
  }
  .scrollFade--animate {
    transition: opacity 0.4s ease-in-out;
  }

  .intro{
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgb(242,251,2);
background: -moz-radial-gradient(circle, rgba(242,251,2,0.9978700953037465) 15%, rgba(247,190,2,1) 100%);
background: -webkit-radial-gradient(circle, rgba(242,251,2,0.9978700953037465) 15%, rgba(247,190,2,1) 100%);
background: radial-gradient(circle, rgba(242,251,2,0.9978700953037465) 15%, rgba(247,190,2,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2fb02",endColorstr="#f7be02",GradientType=1);
  }

  .updown{
      height: 100px;
      /* border: 1px solid black; */
  }