/* color palette, natural  https://mycolor.space/?hex=%230AB6F3&sub=1 */
/* #0AB6F3
  #5E97B9
  #EAFCFF
  #E6F4F1*/


/* Background */

body {
  background-image: url("../images/annie-spratt-0ZPSX_mQ3xI-unsplash.jpg");
}

.me {

  background-image: url("../images/circle-scatter-haikei1.png");
  background-size:cover;
  /* background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%); */

  /* background-image: linear-gradient(to right, #243949 0%, #517fa4 100%); */

  /* background-image: linear-gradient( 135deg, #65FDF0 10%, #1D6FA3 100%); */

  
}

/* background: #2C3E50;  /* fallback for old browsers */
/* background: -webkit-linear-gradient(to right, #4CA1AF, #2C3E50);  Chrome 10-25, Safari 5.1-6 */
/* background: linear-gradient(to right, #4CA1AF, #2C3E50); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

/* background: #136a8a;  fallback for old browsers */
/* background: -webkit-linear-gradient(to right, #267871, #136a8a);  Chrome 10-25, Safari 5.1-6 */
 /* background: linear-gradient(to right, #267871, #136a8a);W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 */





                                                              /* contact section*/


.list-group {
  text-align: center;
}

.contact {
  text-align: center;
}


/* download resume */
.btn {
    border:none;
    padding: 12px 30px;
    cursor: pointer;
    font-size: 20px;
    
}
.btn:hover {
    background-color:cornflowerblue;
   
}

.download {
  text-decoration: none;
  color: black;
}


/* Linkedin button */

.linkedin {
  border: none;
  background: none;
}

/* Github button */

.github {
  border: none;
  background:none;
}

                                                                /* projects page */

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }

  .b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  /* Nav */

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .projects {
    text-decoration: none;
    color:black;
  }
  /* Animations */

/* Welcome */

#welcome {
  font-family: Oswald;
  font-size: 100px;
   animation: Color 4s linear infinite;
  -webkit-animation: Color 4s ease-in-out infinite;
  text-shadow: 10px 10px #F0F0F0;
}

@keyframes Color{
  0%{
    color:#0AB6F3;
  }
  
  20%{
    color:#5E97B9;
  }
  
  40%{
    color:#EAFCFF;
  }
  
  60%{
    color:#E6F4F1;
  }
  
  80%{
    color:#0AB6F3;
  }
  
  100%{
    color:#AC92EC;
  }
}

@-moz-keyframes Color{
  0%{
    color:#0AB6F3;
  }
  
  20%{
    color:#5E97B9;
  }
  
  40%{
    color:#EAFCFF;
  }
  
  60%{
    color:#E6F4F1;
  }
  
  80%{
    color:#0AB6F3;
  }
  
  100%{
    color:#AC92EC;
  }
}

@-webkit-keyframes Color{
  0%{
    color:#0AB6F3;
  }
  
  20%{
    color:#5E97B9;
  }
  
  40%{
    color:#EAFCFF;
  }
  
  60%{
    color:#E6F4F1;
  }
  
  80%{
    color:#0AB6F3;
  }
  
  100%{
    color:#AC92EC;
  }
}



#me {
  animation-duration: 2s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}


#developer {
  animation-delay: 2s;
  animation-duration: 4s;
  animation-name: slidein;
  animation-fill-mode: both;
 visibility: hidden;

}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
    visibility: hidden;
    opacity: 0;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
    visibility: visible;
    opacity: 1;
  }

  to {
    margin-left: 0%;
    width: 100%;
    visibility: visible;
    opacity: 1;
  }
}

/* #typewriter {
  font-family: 'Times New Roman', Times, serif;
  letter-spacing: .17em;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  border-right: .17em solid black;
  animation: typing 3.5s steps (30, end), blinking-cursor .5s step-end infinite;
}

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

@keyframes blinking-cursor {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: black;
  }
} */