.section-head{ 
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  margin-left: 8rem;
  margin-bottom: 6rem;
  font-family: headerFont;
  font-size:4rem;
}

.section-header-container{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  width: 80%;
  margin-left: 4rem;
  margin-bottom: 5rem;
  font-family: headerFont;
}

.middle{
  display: flex;
  background-color: #f1f0f0; 
  height: 100%; 
}
.svgbgr{
  width: 100%;
  height: 100%;
  background-color: #f1f0f0;
}

.icon{
    margin: 2rem;
}

ul{
  position: -webkit-sticky;
  position: sticky;
  top: 11%;
  margin-right: .2rem;
  float: right; 
}

li {
	margin: 0;
  padding-right: 1rem;
  padding-bottom: 1.8rem;
	list-style: none;
	background-image: url('../images/greydot.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1.5rem;
}
.component-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

 


@font-face {
    font-family: headerFont;
    src: url(../fonts/Neon.ttf);
    font-weight: bold;
  }

  @font-face {
    font-family: typeWriter;
    src: url(../fonts/JMH\ Typewriter.ttf);
    
  }



/* On screens that are 992px or less*/
@media screen and (max-width: 992px) {
  
}


/* On screens that are 600px or less (phones)*/
@media screen and (max-width: 500px) {

  .component-container {
      flex-direction: column;
    }
    .section-head{
      justify-content: center;
      text-align: center;
    }
}


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #f1f0f0; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(105, 104, 104); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #424141; 
}