.navbar a {
 color: #fff;
}

/* #abt::after{
    position: absolute;
	content: "";
	border-bottom: 4px solid #1CB698;
	width: 40px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: 0 auto;
	display: table;
} */

.bar {
    content: "";
    height: 6px;
    border-radius: 10px;
    background-color: #000;
    width: 100%;
    position: relative;
}

.onbar{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    content: "";
    height: 6px;
    border-radius: 10px;
    background-color: #fff;
}
  



.edu{
    content: "";
    height: auto;
    width: 3px;
    background-color: red;
}

#word {
    animation: type 4s steps(23);
    animation-iteration-count: 3;
    overflow:hidden;
    white-space: nowrap;
    font-family: 'Courier New', Courier, monospace;
    border-right: 4px solid #1266f1;
}

#planet {
    animation: cyber 3s linear infinite;
}

.slide-in {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1.5s ease-out, transform 1s ease-out;
  }
  
  .slide-in.active {
    opacity: 1;
    transform: translateX(0);
  }
  
  .wd.active, .gd.active{
    display: none;
  }
  

  .wd, .gd {
    transition: transform 0.5s ease-in-out;
  }

  .wd:hover, .gd:hover {
    transform: scale(1.1);
  }
  






@keyframes cyber {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes type {
    0% {
        width: 0ch;
    }
    100% {
        width: 23ch;
    }
}

@media screen and (min-width:426px) {
    #myword {
        content: "";
        height: 60px;
        width: 100%;
        display: table;
        margin-top: 40%;
    }
    #myimg {
        padding-top: 10%;
    }

    #myimg1 {
        display: none;
    }
}

@media screen and (max-width:426px) {
    #myword {
        margin-top: 10%;
    }
    #myimg {
        width:75%;
        padding-top: 0;
        display: none;
    }
    #myimg1 {
        width: 60%;
        margin-top: 10%;
    }
}