body{
  font-family: 'Lexend', sans-serif;
  color: white;
  
}

.slightPadding{
  padding: 5px;
}

.leftMarginHard{
  margin-left: 20px;
  margin-top: 20px;
}

.topMarginHard{
  margin-top: 20px;
}

.lightText{
  font-family: 'Lexend', sans-serif !important;
  font-weight: 100 !important;
}

.imgCenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.medText{
  font-family: 'Lexend', sans-serif !important;
  font-weight: 400 !important;
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Roboto', sans-serif;  
  font-weight: 100;
}

.fontHeavy{
  display: inline;
  font-weight: 400;
}

h1{
  color: white;
}

.body-theme{
    /* background: linear-gradient(110deg, #363636 60%, #3d3d3d 60%);
    height: 100%;
    width: 100%; */
    background: rgb(72,198,239);
    background: linear-gradient(90deg, rgba(72,198,239,1) 0%, rgba(111,134,214,1) 100%, rgba(111,134,214,1) 100%);
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
 @-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

canvas {
    display:block;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
}


.card {

    margin-right: 10px;
  }
  



  .column-golden{
    background-color: #3466AA;    
    font-size: 25px;
    text-align: center;
  }

  .column-golden-highlight{
    background-color: #82B7DC;  
    width: 100%;
    color: #181818 !important;
    font-size: 25px;
  }

  .remove-padding{
      padding: 0px;
      padding-top: 5 px;
  }

  .roomy-padding{
      padding-top: 5px;
      padding-bottom: 5px;
  }

  .column-golden a{
    color:  #82B7DC;
}
.column-golden a:visited{
  color: #82B7DC;
 }

  .column-golden-highlight a{
    color: #181818 !important;
  }

  .column-golden-highlight a :visited{
    color: #181818 !important;
  }

  .col-width-5{
      width: 50px;
  }

  .col-width-95{
      width:calc(100% - 50px);
  }



  .typewriter h3{
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    
    animation: 
      typing 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
  }

  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }

  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
  }

  .avatar {
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    border: 5px white solid;


    img { width: 100%; height: auto; }
  }

  .floater {
    
    overflow: hidden;
    
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
  }

  .whiteRow{
    background-color: white;
    color:rgba(111,134,214,1);
  }

  .rightText{
    text-align: right;
    
  }

  .rightFloat{
    float:right;
  }

  .buttonCircular{
    font-size: 20px;
    border-radius: 30px;    
    
  }
  .buttonLinkedIn{
    font-family: 'Roboto', sans-serif;  
    background-color: #007bb5;
    color: #fff;
  }

  .buttonGithub{
    font-family: 'Roboto', sans-serif;  
    color: #3d2d00;
    background-color: #f34f29;
  }

  .buttonGithub:hover {
    font-family: 'Roboto', sans-serif;  
    background-color: #f34f29;
    
    box-shadow: 0 0 5px #f34f29,
                0 0 20px #f34f29,
                0 0 35px #f34f29,
                0 0 50px #f34f29;
    
}

.buttonLinkedIn:hover {
  font-family: 'Roboto', sans-serif;  
  background-color: #007bb5;
  color: #fff;
    box-shadow: 0 0 5px #007bb5,
              0 0 20px #007bb5,
              0 0 35px #007bb5,
              0 0 50px #007bb5;
  
}

.list-group-item{
  font-size: 12px;
  background-color: #343a40;
  border-color: #6c757d;;
}

.card-scrollable{
  height: 250px;
  overflow: scroll;
  overflow-x: hidden;
}

.card-scrollable-bg{
  height: 400px;
  overflow: scroll;
  overflow-x: hidden;
}

.textSmall p {
  font-size: 13px;;
}

/*
 *  STYLE 2
 */

  ::-webkit-scrollbar-track
 {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   border-radius: 10px;
   background-color: #F5F5F5;
 }
 
 ::-webkit-scrollbar
 {
   width: 12px;
   background-color: #797979;
 }
 
 ::-webkit-scrollbar-thumb
 {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
   box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   background-color: #474747;
 }

  @keyframes float {
    0% {
      
      transform: translatey(0px);
    }
    50% {
      
      transform: translatey(-20px);
    }
    100% {
      
      transform: translatey(0px);
    }
  }