body {
    
   
    background-color: #9fa6ec;
 }
 
 .main{
     width: 70%;
     margin: auto;
     /* border: 2px solid red; */
     text-align: center;
 }
 /* navigation bar */
 #nav{
     display: flex;
     list-style-type: none ;
     background-color: #4665b5;
     margin: 0;
     padding: 10px;
     font-size: 35px;
     position: sticky;
     top:0;
     z-index: 1;
      /* border: 2px solid red; */
 }
 
 
       /* This is to give the content on the nav bar a unique look  */
 #nav li a{
     margin: 0 30px;
     padding: 10px ;
     text-align: center;
      text-decoration:none ;
     color: white;
 
 }
 
       /* when the mouse hovers over a link  */
 #nav li a:hover{
     color:#f2f7cf;
     background-color: black;
 }
 
 #nav li a:visited{
     color: white;
 }
 
       /* This is for the current page the user is on, will be used on other pages */
 #current{
     background-color: black;
     color: white;
 }
 
 /* navigation bar ends */
 
.description{
    /* border: 2px solid red; */
    background-color: white;
    padding: 20px;
    align-content: center;
    /* width: 800px; */
    text-align: center;
    border-radius: 10px;
    
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
 
.highlight {
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    }
    100% {
        text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff;
    }
}

.container{
    /* border: 2px solid yellow; */
    padding: 10px;
    background-color: #FDAB9E;
}

nav{
    
    width: 80%; 
    margin: auto;
    /* background: #eee; */
    background-color: white;
    
  }
  
  #tutorial ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
  
  }
  
  #tutorial li a {
    display: block; 
    width: 100%; 
    padding: 20px;
    position: relative; 
    z-index: 2;
    text-decoration: none;
    box-sizing: border-box; 
  }
  


 
  #tutorial li:first-child a{ border-left: 10px solid #3498db; }
  #tutorial li:nth-child(2) a{ border-left: 10px solid #3e68d4; }
  #tutorial li:nth-child(3) a{ border-left: 10px solid #e644b8; }
  #tutorial li:last-child a{ border-left: 10px solid #dd3737; }
  
  #tutorial li a:after { 
    content: "";
    height: 100%; 
    left: 0; 
    top: 0; 
    width: 0px;  
    position: absolute; 
    transition: all 0.3s ease 0s; 
    z-index: -1;
  } 
  
  #tutorial li a:hover:after{ width: 100%; }
  #tutorial li:first-child a:after{ background: #3498db; }
  #tutorial li:nth-child(2) a:after{ background: #3e68d4; }
  #tutorial li:nth-child(3) a:after{ background:  #e644b8; }
  #tutorial li:last-child a:after{ background: #dd3737; }