/*.be-vietnam-pro-thin {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.be-vietnam-pro-extralight {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.be-vietnam-pro-light {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.be-vietnam-pro-regular {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.be-vietnam-pro-medium {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.be-vietnam-pro-semibold {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.be-vietnam-pro-bold {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.be-vietnam-pro-extrabold {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.be-vietnam-pro-black {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.be-vietnam-pro-thin-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.be-vietnam-pro-extralight-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.be-vietnam-pro-light-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.be-vietnam-pro-regular-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.be-vietnam-pro-medium-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.be-vietnam-pro-semibold-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.be-vietnam-pro-bold-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.be-vietnam-pro-extrabold-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.be-vietnam-pro-black-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  font-style: italic;
}
*/

@import "susy";
@import "compass/reset";

@keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
}




.tagline{
	 font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 200;

  font-size: 1.5rem;

}

.stars, .twinkling, .clouds {
	position:absolute;
	display:block;
	top:0; bottom:0;
	left:0; right:0;
	width:100%; height:auto;
	margin-bottom:0;
}

.stars {
	z-index: -5;
	background: #000 url('https://i.imgur.com/YKY28eT.png') repeat top center;
}

.twinkling{
	z-index: -4;
	background:transparent url('https://i.imgur.com/XYMF4ca.png') repeat top center;
	animation: move-twink-back 200s linear infinite;
}

.clouds{
	z-index: -3;
    background:transparent url('https://i.imgur.com/mHbScrQ.png') repeat top center;
	animation: move-clouds-back 200s linear infinite;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}



/* Underline styles */
.tabs {
  display: block;
  position: relative;
  padding: 0.2em 0;

}

/* Fade in */
.tabs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 0.1em;
  background-color: rgba(145, 135, 255, 0.58);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
  
}

.tabs:hover::after,
.tabs:focus::after {
  opacity: 1;
  transform: translate3d(0, 0.2em, 0);
  
}


/* Scale from center */
.tabs:nth-child(1) .ind-links::after {
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
}

.ind-links:hover{
	 font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 200;
  font-style: italic;
  transition: linear 0.3s;
}

.name-sec{
	padding-top:7em;
	margin:0 auto;
display:flex;
text-align:center;
	width:100%;
}

.logo-front{
	mix-blend-mode:overlay;
	margin:0 auto;
	width:20%;
	animation: lights 5s 750ms linear infinite;
}

.name{
	mix-blend-mode:plus-lighter;
	margin:0 auto;
	  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 200;
  font-size:5em;
 
  margin: auto;
  animation: lights 5s 750ms linear infinite;
	
}

.pg-links{
	
	margin:0 auto;
	width:100%;
	display:flex;
	vertical-align: middle;
	padding-top:5%;
}

.ind-links{
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight:200;
	  font-style: normal;
	  color:white;
}

.ind-links:hover{
	color:gray;
	
}



@keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
}

a:link {
	text-decoration:none;
	color:white;
}
body {
	

    background-color: black;
    color: white;
}

.navbar{
background-color:black;	
}

section {
    display: flex;
	
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.intro-top{
	  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 200;
 font-style: normal;
padding:5%;
	z-index:5;
	position:absolute;
	 top: 50%;
  width: 100%;
	text-align:center;
	margin:0 auto;
	background:rgba(38, 14, 57, 0.37);
	background: linear-gradient(300deg,rgba(35, 0, 63, 0.73),rgba(9, 0, 112, 0.54),#002a57);

  animation: gradient-animation 18s ease infinite;
}


.intro-mid{
	  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 200;
 font-style: normal;

	z-index:5;
	position:absolute;
	  top: 150%;
  left: 25%;
    width: 50%;
	text-align:center;
	margin:0 auto;
	
}
.top-sect{
	position:relative;
	background-image: url("../images/TheSleepingAstronaut.gif");
	background-position:center;
	background-repeat:none;
	background-size:cover;
}

.middle-sect{
	position:relative;
	background-image: url("../images/globe2.gif");
background-position: right;
	background-repeat:none;
	background-size:cover;
}



@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



.sec-blur{
	filter:blur(2px);
}
  .form-container {
	  margin:0 auto;
	  margin-bottom:5%;
      background: rgba(68, 33, 88, 0.2);
      padding: 30px 40px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 800px;
    }
  .form-container h2{
	  text-align:center;
	  
  }
	   label {
		     font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 200;
 font-style: normal;

      display: block;
      margin-bottom: 6px;
      font-weight: bold;
      color: white;
    }

    input, textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid black;
      border-radius: 6px;
      font-size: 1rem;
      background-color: black;
    }

    input:focus, textarea:focus {
      border-color: black;
      outline: none;
      background-color: white;
    }

    .form-button {
		
      width: 100%;
      background-color: black;
      color: white;
      padding: 12px;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .form-button:hover {
      background-color: white;
	  color:black;
    }
	
	  #thank-you {
      margin-top: 20px;
      text-align: center;
      color: white;
      font-weight: bold;
      display: none;
    }
	
	
	
	
	
.animation {
    opacity: 0;
    transform: translateX(-300px);
    transition: all 0.7s ease-out;
    transition-delay: 0.4s;

}

.btn{
	font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 500;
	color:white;
}

.btn:hover{
	color:rgba(145, 146, 255, 0.61);
}



.btn-style{
	 

	padding-top:5%;
	margin: 0 auto;
}

.btncontainerfilter{
padding-bottom:1rem;
}

.mySlides h1{
	font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 600;
}

.mySlides h4{
	font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 500;
}
.mySlides p{
	font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 300;
}

.mySlides img{
	width:55%;
}



.img-caption{
	margin:1%;
float:right;
	text-align:left; padding: 2%; width:40%;
	
}
.slide-vids{
float:left;
z-index:5;
height:400px;

}

.img-caption-vid{
	margin:1%;
	
	
 padding:2%;
	
}

.scroll-animation {
    opacity: 1;
    transform: translateX(0);
}


.individual {
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 1;
  transform: scale(1);
}



.individual.hide {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
   animation: bubbleOut 0.4s ease forwards;
  pointer-events: none;
}

/* Only animate the ones being shown */
.individual.show {
  animation: bubbleIn 0.4s ease forwards;
}

@keyframes bubbleIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bubbleOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

.gal-row {
  display: flex;
  flex-wrap:wrap;
  padding: 0 4px;
  margin-bottom:4%;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
 background: rgba(68, 33, 88, 0.2);
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
  color: white;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
	z-index:6;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}





.hover-shadow {
  transition: 1s;
}

.hover-shadow:hover {
	opacity:0.5;

}

.column img{
	cursor: pointer;
}



.individual{
	display:none;
}

.show{
	display:flex;
}

.about-me{
	padding:2%;
font-family: "Be Vietnam Pro", sans-serif;
  background: rgba(68, 33, 88, 0.2)
	
}

.about-me .content h3 {
	font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 200;


  font-size: 26px;
  color: #ffffff;
}

.about-me .content ul {
  list-style: none;
  padding: 0;
}

.about-me .content ul li {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.about-me .content ul strong {
  margin-right: 10px;
}

.about-me .content ul i {
  font-size: 16px;
  margin-right: 5px;
  color: #ffffff;
  line-height: 0;
}

.about-me .content p:last-child {
  margin-bottom: 0;
  
}

.resume{
	color:white;
}
.resume:hover{
	color:gray;
}



.footer {
	flex-shrink: 0;
	margin-top:0em;
	bottom:0;
	width:100%;
  background-color: #1a1a1a;
  color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

.footer-content {
  max-width: 900px;
  margin: 0 auto;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a {
  color: #aaa;
  margin: 0 10px;
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
}

/*Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 992px){

  .column {
    flex: 50%;
    max-width: 50%;
  }
  .display-box{
	  display:block;
  }
   .mySlides img{
	width:100%;
}
.img-caption{
width:100%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
	
	.tagline{
		font-size:1em;
	}

.about-me{
	text-align:center;
	
}
.img-caption-vid{
	margin:2%;
	
	
 padding:2%;
	
}

.mySlides h1{
	font-size:2em;
}
.mySlides h4{
	font-size:1em;
}
  .column {
    flex: 100%;
    max-width: 100%;
  }
	 .mySlides img{
	width:100%;
}
.img-caption{
width:100%;
}
  }
  
}