@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');



* {
  margin: 0;
  /* font-family: sans-serif; */
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
 /* font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; */
  color: white;
}

body{position:fixed;}

.header {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: rgba(36,41,46,1);
  flex-direction: row;
  position: fixed;
  width: 100%;
  z-index: 1;
}

.header__options>p:hover{
  background-color: rgb(50, 55, 60);
  border-radius: .3rem;
  transition: all .1s linear;
  padding: .5rem;
}
.header__options {
  margin-left: .8rem;
  display: flex;
}

.header__options > p {
  display: flex;
  padding: .1rem 0.5rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}


.header__user{
  margin:0 auto;
}

.header__windows {
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: 0rem;
  padding:1.1rem
}

.header__windows>div{
  margin-left: 1rem;
}

.header__windows>.yellow{
  
  background-color:yellow;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  
}
.header__windows>.green{
  background-color:green;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
}
.header__windows>.red{
  background-color:red;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
}

.header__windows > p {
  padding: 1rem;
}

.header__windows>div:hover{
  background-color: rgb(50, 55, 60);
  padding: -0.5rem;
  transition: all .3s linear;
  cursor:pointer;
}

.body {
  margin-top: 50px;
  position: relative;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.body__aside {
  display: flex;
  flex-direction: column;
  flex: 0.01;
  background-color: rgba(36,41,46,1);
}



.body__aside__svg {
cursor:pointer;
margin-bottom: .3rem;
  }


.body__aside__svg>svg:hover{
background-color: rgba(31,36,40,1); 
transition: all .1s linear; 
  }



.body__aside__svg:hover {
cursor:pointer;
margin-bottom: .3rem;
/* background-color: rgba(31,36,40,1); */
/* transition: all .1s linear; */

  }

  .body__aside>.svg__container>svg{
    padding:1.1rem;
  }

  .body__aside__footer>.svg__container>svg{
    padding:1.1rem;
  }

.body__aside__svg.active {
fill: white;
border-left:2px solid rgba(133,126,226,1);
margin-bottom: .3rem;
background-color:rgba(31,36,40,1);


}

.body__aside > .svg__container {
  /* margin: 1rem; */
  margin-bottom: .3rem;

  
}

/* .body__aside > .svg__container.active {
  padding: 1rem;

  margin-bottom: .5rem;
  border-left:2px solid rgba(133,126,226,1);
  
} */

/* .body__aside > p.active {

  margin-left: 0rem;
  padding-left: 1rem;
  border-left:2px solid rgba(133,126,226,1);
  
} */



.body__aside > div>svg {
 cursor:pointer;
  
}

.body__aside>.body__aside__footer>div>svg{
  cursor: pointer;
}
.body__aside>.body__aside__footer>div>svg.active{
  fill:white;
}
.body__aside>div>svg>g>g.oddbody__aside__svg.active{
  fill:white;
}

.body__aside__footer {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 5rem;

}


.body__aside__footer > .svg__container{
  
  
  
 
  margin-bottom: .3rem;
}

.body__files {
  flex: 0.2;
  flex-direction: column;
  background-color: rgba(31,36,40,1);
  transform: translateX(0%);
}

.body__files.active {
display:none;
}

.body__files__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
}

.body__files__body {
  /* position:absolute; */
}

.body__files__body-visible {
  padding-left: 5px;
}

.body__files__body-hidden {
  height: 12rem;
  
  overflow: hidden;
  transition: all 0.2s linear;
 
  
}

.p.live{
  background-color: rgba(36,41,46,1);
}

.body__files__body-hidden.hideme{
  /* display: none; */
 
 
  padding-left: 0rem;
  height: 0;
  
  
}


.body__files__body-hidden>p{
  /* display: none; */
 
 
 cursor:pointer;
  
}
.body__files__body-hidden>p:hover{
  /* display: none; */
 
 
 background-color: rgba(26,31,36,1);
  
}
.body__files__body-hidden>p>img{
margin-right: .3rem;
}

.body__files__body-hidden > p {
  display: flex;
  align-items: center;
  padding: 0.3rem;
  /* border: 2px solid black; */
  padding-left: 1rem;
}

.portfolio{
  fill:white;
  transition: all .2s linear;
  transform:rotate(0deg) !important;
}
.body__files__body-visible>p{
  display: flex;
  align-items: center;
}
.portfolio.active{
 transition: all .2s linear;
 transform:rotate(90deg) !important;
  fill:white;
}

.body__files__body-visible:hover {
  /* border: 2px solid black; */
  cursor: pointer;
}

.body__files__footer {
  margin-top: 14.9rem;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  position: absolute;
 
  bottom: 5rem;
  width: 20vw;
  
}


.body__files__footer>p>b{
  display: flex;
  align-items: center;
}

.body__files__footer>p{
  display: flex;
  align-items: center;
  padding: 0.3rem;
  border-top: 2px solid rgba(36,41,46,1);
  padding-left: 1rem;
  

  
  
  
}





.main__body{
  flex: 0.79;
  width:90vw;
  background-color:rgba(36,41,46,1);
 
}


.main__body.active {


  width: 130vw;

}


.main__body__tabs{
  background-color:rgba(36,41,46,1);
  
  
  
  
}


.button{
  display: flex;
  align-items: center;
  padding:.5rem 1rem;
  border: none;
  font-size: 1rem;
  background-color: rgba(31,36,40,1);
  cursor:pointer;
  transition: all .1s linear;
  letter-spacing: .25rem;
  border-right: 1px solid  rgba(36,41,46,1);
  border-left: 1px solid  rgba(36,41,46,1);
  
 
}


.button>img{
  margin-right:.3rem;
  
}


.btn-container{
/* display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
  display: flex;
  align-items: center;
  justify-content:flex-start;
  background-color: rgba(31,36,40,1);
  /* border-bottom: .5px solid black; */
}

 /* .button:nth-child(5){

}   */


.button:hover{
 
  display:1;
  
}

/* 
.button:hover:not(.live){
  background-color: blue;
  display:1;
  
} */



.content{

  display: none;
  padding:2rem 0.5rem;
  height: 73vh;
}

#step1{
  padding: 1rem;
}

#step1>img{
  object-fit:contain;
  margin-top: 1rem;

}

#step1>p{

  margin-top: .5rem;
  border-right: solid 3px rgba(0,255,0,.75);
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  font-size: 28px;
  color: rgba(255,255,255,.70);
}


#step1>img{
  margin-top: 1rem;
  margin-bottom: .1rem;
}


/* Animation */
#step1>p{
  animation: animated-text 4s steps(29,end) 1s 1 normal both,
             animated-cursor 600ms steps(29,end) infinite;
}

/* text animation */

@keyframes animated-text{
  from{width: 0;}
  to{width: 800px;}
}

/* cursor animations */

@keyframes animated-cursor{
  from{border-right-color: rgba(0,255,0,.75);}
  to{border-right-color: transparent;}
}


#step2{}

#step2>h1{
  color: rgba(239,239,239,1);
  margin-bottom: 2rem;
}





#step2>p {
  /* font-family: 'Source Code Pro', monospace;   */
  font-family: JetBrains Mono,monospace;
  font-size: 1.5rem;
  font-weight:900;
  line-height: 2rem;
  margin-top: 3rem;
  width: 800px;
  margin-bottom: 2rem;
  color: rgba(239,239,239,1);

}
/* Animation */
#step2>p {
  /* animation: animated-text 4s steps(29,end) 1s 1 normal both,
             animated-cursor 600ms steps(29,end) infinite; */
}

#step2>p:nth-child(2)
{
    /* white-space:nowrap;
    overflow:hidden;    
   animation: animated-text2 4s steps(29,end) 1s 1 normal both;
    -webkit-animation-delay: 5s; 
    animation-delay: 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; */
}

/* text animation */

@keyframes animated-text{
  from{width: 0;}
  to{width: 800px;}
}

@keyframes animated-text2{
  from{width: 0;}
  to{width: 800px;}
}

/* cursor animations */

@keyframes animated-cursor{
  from{border-right-color: rgba(0,255,0,.75);}
  to{border-right-color: transparent;}
}



#step3{
  color: rgba(239,239,239,1);

}


#step2>#terminal{
  display: visible;
   
   position:fixed;
   left:calc(25%);
   right:0rem;
   bottom:1.55rem;
   height:10rem;
   max-height: 10rem;
   overflow:auto;
   /* width:75.3vw; */
   /* min-width: ; */
   font-size: .8rem;
   
  }

  #terminal::-webkit-scrollbar {
    /* display: none; */ 
    background-color: rgba(36,41,46,1);
    width: 1rem;
    border: 2px solid black;
  }
  
  
  #terminal::-webkit-scrollbar-thumb {
    background-color:  slategrey;
    outline:none;
    /* outline: 1px solid slategrey; */
   
    /* border-radius: 1rem; */
  }
  
  #step3>h1{
    color: rgba(239,239,239,1);
  }

#step3>.step3__content{
  display: flex;
  
  
  
  /* align-items: center; */
}






#step3>.step3__content>.contain__typewriter>pre{
/* position:fixed; */
  line-height: 3rem;
  font-size: 1.5rem;
  font-weight:1000;
  /* font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; */
  font-family: JetBrains Mono,monospace;

}

.form>h1{
  margin-bottom: 1rem;
  margin-left: 2rem;
}

.form{

  display: flex;
  flex-direction: column;
  border-left: 2px solid rgba(133,126,226,1);
  
  /* position: absolute; */
  /* left: auto;
  right: 6vw;
  bottom:10.5vw; */
  /* width: 20vw; */
}
.main__form{
  margin-left: 1rem;
}

.main__form__col{
  display: flex;
}

.main__form__col__vert{
  display: flex;
  margin-left: 1rem;
  margin-top: 1rem;
  flex-direction: column;
 
}

.main__form__col__vert>label{
  font-family: inherit;
  font-size: 1.2rem;
  margin-bottom: .5rem;
}

.main__form__col__vert>input{
  font-size: 1rem;
  outline: none;
  border:none;
  background-color: rgba(31,36,40,1);
  height: 2.5rem;
  color: white;
}
.main__form__col__vert>input:focus{

  border:1px solid #857ee2;
}


.main__form__col__vert>.textarea{
  font-size: inherit;
  height: 7rem;
  max-height: 7rem;
  outline:none;
  border:none;
  background-color: rgba(31,36,40,1);
}
.main__form__col__vert>.textarea:focus{

 border:  1px solid #857ee2;
}

.submit{
  
  margin: 1rem;
  margin-top: 2rem;
  color: rgba(31,41,55,1);
  background-color: rgba(133,126,226,1);
  /* border-color: rgba(133,126,226,1); */
  border: none;
  outline: none;
  font-size: 2rem;
  font-weight: bolder;
   font-family: JetBrains Mono,monospace;
  padding: .5rem;
  


}



.var-highlight{
  /* color: #C0AD60; */
  color: rgba(133,126,226,1);
  font-family: JetBrains Mono,monospace;
  font-size: 1.5rem;
}
.string-highlight{
  color: rgba(253, 149, 90, 0.8);
  font-family: JetBrains Mono,monospace;
  font-size: 1.5rem;
}





#step3>.step3__content>.contain__typewriter>pre>p
{
  background-color: #000;
  /* padding: 1%; */
  color: #ccc;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
}






.contain__typewriter{
  width:45vw;
  display: flex;
  height: 45vh;
 
}


#typewriter{
    
    font-size: 1.5em;
    margin: 0;
    font-family: "Courier New";
    padding: 0 ;
    font-weight: bold;
    

   
}

.gray{
  color:gray;
}
/* 
.var-highlight{
  color: rgba(133,126,226,1);
}
.string-highlight{
  color: rgba(133,126,226,1);
} */


#typewriter::after{
  content: "|";
  animation: blink 500ms linear infinite alternate;
}

@-webkit-keyframes blink{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

@-moz-keyframes blink{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

@keyframes blink{
  0%{opacity: 0;}
  100%{opacity: 1;}
}



#step4{
  font-family: 'Source Code Pro', monospace;  
  /* font-family: JetBrains Mono,monospace; */
  /* font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; */

  
  font-weight: bold;
  width: 100%;
  /* display: flex; */
  flex-direction: column;
 

}

#step4>h1{
  color: rgba(239,239,239,1);
}

#step4>.skills__container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

}

.skills__container>div{
  margin: 3rem 5rem;
}

.skills__container>div>h2{
  color: rgba(133,126,226,1);
  font-size: 32px;
}
.skills__container>div>p{
  color: rgba(239,239,239,1);
  font-size: 25px;
}

#step5{
  overflow-y: auto;
}


/* Hide scrollbar for Chrome, Safari and Opera */
#step5::-webkit-scrollbar {
  /* display: none; */ 
  background-color: rgba(36,41,46,1);
  width: 1rem;
}


#step5::-webkit-scrollbar-thumb {
  background-color:  rgba(133,126,226,.5);
  outline:none;
  /* outline: 1px solid slategrey; */
 
  /* border-radius: 1rem; */
}



/* Hide scrollbar for IE, Edge and Firefox */
#step5 {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width:none ;  /* Firefox */

}

#step5>h1{
  margin-bottom: 1rem;
}
.whole__project{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  overflow-y: auto;
}
.project__container{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 0px 3px #888888;
  /* box-shadow: 0 0 0px 3px goldenrod; */
  width: 15rem;
  margin:1rem;
  transition:  .4s ;

}

.project__container:hover{
  box-shadow: 0 0 0px 3px #857ee2;
  animation: none;
}


.project__container{
  /* animation: change-color 0.4s forwards; */
  animation:change-color 2s forwards linear infinite alternate;
}


@keyframes change-color {

  /* 0% { color: red }
  100% { color: blue } */
  to {
    box-shadow: 0 0 0px 3px goldenrod;
  }
}




.project__upper>img{
  height:10rem;
  width:15rem;
}



.project__lower{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project__lower>.project__name{
font-family: inherit;
font-size: 1.2rem;
color: rgba(133,126,226,1);


}
.project__lower>.project__description{
font-family: inherit;
font-size: .8rem;
color: #e3e3e3;
}
.captionbutton__container{
  display: flex;
  align-items: center;
}



.captionButton__container{
 
display: flex;

align-items: center;
justify-content: center;
}


.captionButtons{
  /* background-color: red; */
  display: flex;
  align-items: center;
  justify-content:center ;
  padding-bottom: .5rem;
}

.captionButton1{
  display: flex;
  align-items: center;
  background-color: rgba(133,126,226,1);
  color:rgba(238,238,238,1);
  padding:.5rem;
  width:4rem;
  margin: .2rem;
  font-weight:900;

}

.captionButton1>a{
  text-decoration: none;
  font-family: inherit;
}

.captionButton2{
  display: flex;
  align-items: center;
  background-color: rgba(133,126,226,1);
  color:rgba(238,238,238,1);
  width: 4rem;
  padding: .5rem;
  margin:.2rem;
  text-decoration: none;
  font-weight:900;

}
.captionButton2>a{
  font-family: inherit;
  text-decoration: none;
}



#step6{
  /* position: absolute; */
}


#terminal2{
  color:rgba(238,238,238,1);
  position:fixed;
  /* width:60vw; */
  height: 22vh;
  /* top: 40vh; */
  left:24rem;
  right: 0rem;
  bottom: 1rem;
  /* -webkit-scrollbar-thumb:red; */
  /* position:relative; */
  /* top: 20rem; */
}


#terminal2::-webkit-scrollbar {
  /* display: none; */ 
  background-color: rgba(36,41,46,1);
  width: 1rem;
  border: 2px solid black;
}


#terminal2::-webkit-scrollbar-thumb {
  background-color:  slategrey;
  outline:none;
  /* outline: 1px solid slategrey; */
 
  /* border-radius: 1rem; */
}





.github__container{
  margin-top: 2rem;
}

.github__button{
  background-color: rgba(133,126,226,1);
  color:rgba(238,238,238,1);
  border-radius: 1rem;
  height: 4rem;
  width:15rem;
  font-family: inherit;
  font-size: 2rem;
  font-weight: bold;
  padding: .5rem;
  outline: none;
  border: none;
  transition: all .2s linear;
  box-shadow: 0 0 10px black;
}


.github__button:hover{
  box-shadow: 0 0 15px gray;
  transition: all .1s linear;
}

.tabs-content{
  padding-right:4rem;
  padding-left: .5rem;
}

.content.live{
  display: block;
}

.button.live{
  background: rgba(36,41,46,1);
  border-top: 2px solid #857ee2;

}


.footer{
  display: flex;
  justify-content: space-between;
  position:relative;
  padding: .1rem;
  bottom: 75px;
  background-color: rgba(31,36,40,1);
  background-color: rgb(0, 110, 255);
  z-index: 9999;
  width:100vw;
} 


.footer__left{
  display: flex;
  align-items: center;
  margin-right: .5rem;
  
}


.footer__left>p{
  padding-left:.5rem ;
  padding-right: .5rem;
}

.footer__right{
  display:flex;
  align-items: center;
  margin-left: 1.5rem;
  
}

.footer__right>p{
  display: flex;
  align-items: center;
  padding-left:.5rem ;
  padding-right: 1.5rem;
}



/* border-color:rgba(229,231,235,1); */