* {
    box-sizing: border-box;
  }
  /* all parallax stuff */

  .parallax { 
    /* The image used */
    background-image: url(../Images/vc.jpg);
  
    /* Set a specific height */
    height: 600px; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

p{
    text-align: center;
    color: antiquewhite;
    font-size: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}
.col-sm-12{
  text-align: center;
  align-content: center;
}
.container:hover:hover{
  background-color: rgba(128, 128, 128, 0.459);
}
.skill{
  margin-top: 50px;
  border-top: solid 5px antiquewhite;
  border-bottom: solid 5px antiquewhite;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 20%;
  margin-right: 20%;
}


.text-focus-in {
	-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* /////////////////////////////////////////////// */

  /* navbar */
  /* Style the navbar */
  #navbar {
    overflow: hidden;
  font-size: 30px;
  }
  /* Navbar links */
  #navbar a {
    display: inline-block;
    text-align: center;
    padding: 14px;
    text-decoration: none;
  }
 
  /* The sticky class is added to the navbar with JS when it reaches its scroll position */
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + .content {
    padding-top: 60px;
  }

/* /////////////////////////////////////////////// */
/* portfolio heading */

#heading{   
 
  margin-bottom: 50px;
display: inline-block;

}

  /*size and shaping of portfolio pics and overlay text */
  .pic{
      /* width: 400px;
      height: 300px;
      margin: 10px; */
      display: block;
      width: 100%;
      height: 100%;
    
  }

  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #008CBA;
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: .5s ease;
    border-bottom: solid 5px antiquewhite;
    border-top: solid 5px antiquewhite;
  }

  .container:hover .overlay {
    opacity: 1;
    width: 100%;
  } 

  .text {
    color: antiquewhite;
    font-size: 30px;
    position: absolute;
    top: 25%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;

  }

  .description{
      color: antiquewhite;
      font-size: 15px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
      white-space: nowrap;

  }

  .tools{
    color: antiquewhite;
    font-size: 15px;
    position: absolute;
    top: 75%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;

  }


.tools, .text, .description{

    background-color: #008CBA;
    border: none;
    color: antiquewhite;
    padding: 16px 32px;
    text-align: center;
    margin: 4px 2px;
    transition: 0.3s;
    text-decoration: none;
  
}
  .tools:hover, .text:hover, .description:hover {
    opacity: 1;
    color: black;
    text-decoration: none;
  }

/* /////////////////////////////////////////////// */

@media only screen and (max-width: 900px) {
#me{
  display: none;
}

#first{
  padding-top: 40px;
}

}


  /* My bio pic */
  #me{
    width: 20%;
    height: 20%;
    float: left;
    /* box-shadow: 10px 10px rgba(163, 163, 163, 0.075); */
    border-right: solid white 5px;
    padding: 1.5em;
    margin: 0 -4em;
  }

  
#first{
  margin-top: 10%;
}

/* button hovers for contact */

.btn-facebook:hover{
 background: #3b5998;
 
}

.btn-linkedin:hover{
  background: #0e76a8;
}

.btn-github:hover{
  background: #171515;
}

.btn-instagram:hover{
  background: #3f729b;
}

.btn-google-plus:hover{
  background: #cf0000
}

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

a{
  color: antiquewhite;
}

/* /////////////////////////////////////////////// */





@keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}
@-webkit-keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

@-moz-keyframes move-background {    
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

    @-webkit-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

.background-container{
	position: fixed;
	top: 0;
	left:0;
	bottom: 0;
	right: 0;
}

.stars {
 background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
 position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
  	z-index: 0;
}

.twinkling{
	width:10000px;
	height: 100%;
	background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
	background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    
    -moz-animation:move-background 70s linear infinite;
  -ms-animation:move-background 70s linear infinite;
  -o-animation:move-background 70s linear infinite;
  -webkit-animation:move-background 70s linear infinite;
  animation:move-background 70s linear infinite;
	
}

.clouds{
	width:10000px;
	height: 100%;
	background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
	background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;

   -moz-animation:move-background 150s linear infinite;
  -ms-animation:move-background 150s linear infinite;
  -o-animation:move-background 150s linear infinite;
  -webkit-animation:move-background 150s linear infinite;
  animation:move-background 150s linear infinite;
}
#moon{
  height: 70vh;
  width:70vh;
  position: absolute;
  z-index: 3;
  right: 20px;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-8-19 23:43:43
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
 @-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}