html {
    scroll-behavior: smooth;
}

body{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

/* navbar  */
.navbarScroll.navbarDark {
    background-color: rgb(0, 0, 0);
}

/* background image */
.bgimage {
    height:100vh;
    background: url('imgs/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
/* text on background image*/
.hero_title {
    font-size: 2.5rem;
}
.hero_desc {
    font-size: 2rem;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: whitesmoke;
}

/* spacing*/
#about, #projects, #contact , #skills{
    margin-top: 3rem;}

 #skills {
    padding-top: 4rem;
    padding-bottom: 3rem;
    background-color: whitesmoke;
}
#about, #projects {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
#contact {
    background-color: whitesmoke;
    padding-bottom: 3rem; }

/* about*/
.imageAboutPage {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0px 4px 8px rgba(17,17,17,0.2);
}

/* buttons*/

.btn {
    color: whitesmoke;
    background-color: #000;
    text-align: center;
    width: 100%;
  }
.btn:hover{
    color: #008000;
}

/* skills */
.skillText.card {
    height: 280px;
    cursor: pointer;
  }
.skillIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
}

.card-title {
    text-align: center;
}
.card-text{
    text-align: center;
}
.card:hover .skillIcon {
    color: #008000;
}
.skillText:hover,.pro:hover{
    transform: scale(1.1);
    border: 1px solid #008000;
}

/* icons*/
.social-icons {
    font-size: 40px;
    cursor: pointer;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,
.fa-linkedin:hover, .fa-twitch:hover, .fa-envelope:hover {
    color: #008000;
}
.fab,.fas {
    color: #808080;
}
/* footer*/
#footer {
    background-color: #000000;
    text-align: center;
}

/* typer*/

.type {
    display:inline-block;
    vertical-align: bottom;
  }
  
  .type > span {
    color: whitesmoke;
    display:grid;
    overflow: hidden;
    height:2em;
  }
  
  .type span span {
    width:0%;
    max-width:max-content;
    overflow: hidden;
    height:inherit;
    word-break:break-all;
    animation: 
    
      c 0.5s infinite steps(1),
      t 2s linear infinite alternate,
      m 16s steps(4) infinite;
  }
  .type span span:before {
    content:” “;
    display:inline-block;
  }
  
  @keyframes t{
    90%,100% {width:100%}
  }
  
  @keyframes c{
    0%,100%{box-shadow:5px 0 0 #0000}
    50%    {box-shadow:5px 0 0 white}
  }
  
  @keyframes m{
    100% {transform:translateY(-400%)}
  }