@import url('https://fonts.googleapis.com/css?family=Comfortaa|Raleway');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:800i');

html {
  display: block;
}
body {
  height: 100vh;
  width: 100vw;
  /*padding: 0 24px;*/
  margin: 0;
  color: #FFFFFF;
  background-color: #7E8691;
  overflow: hidden;
}

/*For the intro*/

main {
  position: fixed;
  top: 45%;
  left: 50%;
  /*height: 50vh;
  width: 50vw;*/
  z-index: 3;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 2em auto;
  -webkit-transition: -webkit-transform 0.8s 0.61s ease-out;
  transition: -webkit-transform 0.8s 0.61s ease-out;
  transition: transform 0.8s 0.61s ease-out;
  transition: transform 0.8s 0.61s ease-out, -webkit-transform 0.8s 0.61s ease-out;
}

h2.title {
   opacity: 0;
  position: relative;
  font-family: 'Comfortaa', cursive;
  padding: 0;
  height: 5%;
  font-size:1.3em;
  width: 120%;
  text-align: center;
   -webkit-transform: translateY(1em);
          transform: translateY(1em);
  -webkit-transition: opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;
  transition: opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;
  transition: transform 0s 1.42s ease-out, opacity 0s 1.42s ease-out;
  transition: transform 0s 1.42s ease-out, opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;
  z-index: 1;
}

h1{
  opacity: 0;
  position: relative;
  font-family: 'Comfortaa', cursive;
  font-size: 4em;
  text-align: center;
  /*margin: 0 5px 70px ;*/
 margin-left: 7%; 
  margin-bottom: 0;
  margin-top: 14%;
  -webkit-transform: translateY(1em);
          transform: translateY(1em);
  -webkit-transition: opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;
  transition: opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;
  transition: transform 0s 1.42s ease-out, opacity 0s 1.42s ease-out;
  transition: transform 0s 1.42s ease-out, opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;
  z-index: 1;
}

h1 span {
  margin-left: 30%;
  color: #00B4FF;
}

h2 span {
  margin-right: 5%;
color: #00B4FF;
}

.open h1, .open h2{
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out;
  transition: opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out;
  transition: transform 0.4s 0.5s ease-out, opacity 0.6s 0.5s ease-out;
  transition: transform 0.4s 0.5s ease-out, opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out;
}

.panel {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #00B4FF;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  z-index: 6;
  visibility: visible;
  -webkit-transition: opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
  transition: opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, opacity 0.8s 0.61s ease-out;
  transition: transform 0.6s ease-in-out, opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
 
}
.panel.left {
  left: 0;
  text-align: center;
 font-family: 'Comfortaa', cursive;
 font-size: 28px;
  float: left;
}
.panel.left:before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: '';
  height: 46px;
  width: 0;
 
 }
.panel.right {
  right: 0;
  text-align: center;
 font-family: 'Comfortaa', cursive;
 font-size: 28px;
  float: right;
    
}
.panel.right:before {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  content: '';
  height: 46px;
  width: 0;
  

}

.dot.left:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: -60%;
  left: 39%;
  margin: auto;
  width: .3em;
  height: .3em;
  background-color: #FFF9F2;
  border-radius: 100%;
  z-index: 3;
  box-shadow: #00B4FF 0 0 0 4px;
}
.dot.right:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 20%;
  left: 39%;
  margin: auto;
  width: .3em;
  height: .3em;
  background-color: #FFF9F2;
  border-radius: 100%;
  z-index: 3;
  box-shadow: #00B4FF 0 0 0 4px;
   

}

.open .panel {
  opacity: 0;
  -webkit-transition: opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
  transition: opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, opacity 0s 0.61s ease-out;
  transition: transform 0.6s ease-in-out, opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
}
.open .panel.left {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
.open .panel.right {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

button {
  /*cursor: pointer;*/
  position: fixed;
  top: 42%;
  right: 0;
  bottom: 0;
  left: 45%;
  margin: 0;
  width: 1em;
  height: 1em;
  color: white;
  background-color: transparent;
  /*padding: 0 24px;*/
  font-size: 5em;
  border: 0;
  z-index: 6;
  border-radius: 100%;
  -webkit-tap-highlight-color: transparent;
}
button:focus {
  outline: none;
}
.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 2rem;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-.01em, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(.03em, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-.06em, 0, 0);
  }

  40%, 60% {
    transform: translate3d(.09em, 0, 0);
  }
}


.bracket {
    color: black;
    font-size: 1.2em;
    margin-right: 5%;
}
/*p.letter-two {
    position: fixed;
    float: left;
    margin-left: 60%;
    font-size: 6em;
    margin-top: 40%;
    z-index: 7;
}*/
p.letter-two {
  position: fixed;
  top: -5%;
  right: 30%;
  bottom: 0;
  left: -.3%;
  margin: auto;
  width: 1em;
  height: 1em;
  background-color: transparent;
  /*padding: 0 24px;*/
  font-size: 6em;
  border: 0;
  z-index: 7;
  border-radius: 100%;
  -webkit-tap-highlight-color: transparent;
}
/*p.letter-one {
  position: fixed;
  float: right;
    margin-left: 11%;
    font-size: 6em;
    margin-top: 40%;
    z-index: 7;
}*/

p.letter-one {
  position: fixed;
  top: -5%;
  right: 0;
  bottom: 0;
  left: 27%;
  margin: auto;
  width: 1em;
  height: 1em;
  background-color: transparent;
  /*padding: 0 24px;*/
  font-size: 6em;
  border: 0;
  z-index: 7;
  border-radius: 100%;
  -webkit-tap-highlight-color: transparent;
}

/*For the rest of the app---------------------------------------------*/
.options {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  width: 100%;
}

.option {
  opacity: 1;
}

div.option {
  position: relative;
  height: 100vh;
  width: 100vw;
  z-index: 4;
  overflow: hidden;
}
div.one {
  z-index: 2;
}
/*Nav bar---------------------------------------------------------*/
nav {
  width: 100vw;
  margin: 0;
  position:fixed;
 display: flex;
 display: -webkit-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 5;
  background-color: #464B56;
}



a.choice {
  margin: 0;
  padding: 1% 8.2% 1% 4%;
  font-family: 'Comfortaa', cursive;
 font-size: .7em !important;
}
a.choice:hover {
    cursor: pointer;
    background-color: #00B4FF;
    color: #464B56;
    font-weight: bold;

}

/*About Section --------------------------------------------------*/

div#about {
  background-color: #00B4FF;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: space-around;
  /* width: auto; */
  height: auto;
}
/*
.about .text {
  position: relative;
  flex-direction: column;
  height: 17rem;
  width: 20em;
  margin-top: 4em;
  margin-bottom: 2em;
  background-color: #7E8691;
  box-shadow: hsla(0, 100%, 98%, .8) 0 0 0 4px;
  font-family: 'Raleway', sans-serif;
  font-size: .9em;
  border-radius: 3px;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 20em;
  overflow: scroll;
}*/


/* div.image { */
  /*background-color: #FFF9F2;
  border-radius: 100%;*/
  /*max-width: 30%;*/
/* } */
/*img.profile {
  height: 9em;
  width: 9em;
  opacity: 1;
  margin-top: 20%;
  margin-left: 20%;
  border: 5px solid #FFF9F2;
  border-radius: 100%;
  
}*/
/*div.brand {
  color: black;
  font-size: .8em;
  font-family: 'Comfortaa', cursive;
  font-style: italic;
  
  border-radius: 3px;
  font-weight: bolder;
  padding: 1%;
  margin-top: 10%;
}*/

/*skills section-------------------------------------------*/

div.skills {
  background-color: hsl(215, 8%, 53%);
  /*display: flex;*/
  flex-flow: row wrap;
  align-content: space-around;
  justify-content: center;
  padding: 3em 0 3em 0;
  height: auto;
}

div.skills-show {
  margin-left: 3.5em; 
  margin-right: 3.5em;
  padding-left: 5em;
 
}

img.skill-logo {
   max-height: 4.5em;
   max-width: 9em;
   margin: 2.3em;
   /*margin-left: 9em;*/
   padding: 1em;
}

/*Projects section------------------------------------------*/

div#projects {
  background-color: #00B4FF;
  display: flex;
  display: -webkit-flex;
  flex-flow: column;
  -ms-flex-flow: column;
  padding-top: .2em;
 
}

img.project {
    max-height: 100em;
    width: 100em;
} 
div.tooltip {
    display: flex;
    display: -webkit-flex;
    max-height: 33.3%;
    width: 100%;
     /* margin: 2em; */
    font-family: 'Raleway', sans-serif;
    font-size: .7em !important;
    border-bottom: 5px solid #00B4FF
}
/* div.tooltip .one{
  background-image: url("../media/kook.png");

} */
/*
div.tooltip.two {
  background-image: url("../media/trek-ster.png");


}

div.tooltip.three {
  background-image: url("../media/bio-me.png");


} */


    div.tooltip .tooltiptextone,
  div.tooltip .tooltiptexttwo,
  div.tooltip .tooltiptextthree {
    visibility:hidden;
    width: 100%;
    height: 33.3%;
    /* bottom:37%;
    left:35em; */
    /* margin-left: -60px;  */
    background-color: rgba(70, 75, 86, .7);
    color: #FFFFFF;
    text-align: center;
    /* padding: 5px 0; */
    /* border-radius: 6px; */
    position: absolute;
    z-index: 5;
}


div.tooltip:hover .tooltiptextone, div.tooltip:hover .tooltiptexttwo, div.tooltip:hover .tooltiptextthree {
    visibility: visible;
}


a {
    text-decoration: none;
    color:#00B4FF;
    font-size: 20px;
}

/*Interests section --------------------------------------------*/
div.interests {
  background-color: #7E8691;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: space-around;
  height: auto;
}
div.interests-image, image.interest-image {
    height: 100%;
    max-width: 100em;
}
div.interests-image {
  display: flex;

}

div.interests-text {
    width: 45%;
    padding: 6%;
    font-family: 'Raleway', sans-serif;
    font-size: 1em;
    height: auto;
    
}

a.transalt-link {
  color: #ff5d22;
  font-size: 1em;
}

a.bny-link {
 font-family: 'Open Sans', sans-serif;
 color: #464B56;
}

/*Contacts section ----------------------------------------------*/
div.contact {
  background-color: hsla(215, 8%, 53%, .5);
  /*height: auto;*/
}
div.contacts {
  display: flex;
  display: -webkit-flex;
  flex-flow: row wrap !important;
  -ms-flex-flow: row wrap !important;

    /* flex-wrap: wrap !important; */
  justify-content: space-around;
  align-content: center;
  height: auto;
  margin-top: 23%;
  margin-left: 1%;
}
div.contact-one, div.contact-two, div.contact-three, div.contact-four {
    height: 20%;
    width: 12%;
   /*margin: 4.5%;
   /*margin-top: 10%;*/
   /*padding-left: 2;*/
}

.github, .linkedin, .twitter {
    height: 90%;
    width: 90%;
    /*margin-left: 4%;*/
    /*margin: 10%;*/
    
}

.gmail {
  height: 84%;
    width: 90%;
    /*margin-left: 4%;*/
    /*margin: 10%;*/
}

/*Resume section --------------------------------------------------*/
div.resume {
  background-color: hsl(215, 8%, 53%);
  padding-top: 2em;
}
#splash {
height: 100vh;
width: 100vw;
}

div.post {
width: 100vh;
height: 100vh;
/*margin-left: auto ;
margin-right: auto ;
padding-top: 2%;
padding-bottom: 2%;*/
}

embed {
/*margin-left: auto;
margin-right: auto;*/
height: 100vh;
width: 100vw;    
}

/* form ----------------------------------------------------------- */
 #mc_embed_signup {
   display: flex;
   background: hsl(215, 8%, 53%);
   clear: left;
   font: 14px Helvetica, Arial, sans-serif;
   flex-direction: column;
   justify-content: center;
   align-content: center;
 }
 
 #mc_embed_signup_scroll {
   display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
 }
/*footer------------------------------------------------------------*/

footer.footer {
  background-color: #464B56;
  height: 2em;
  margin-top: 1.4em;
  padding-top: .03em;
  text-align: center;
  font-family: 'Comfortaa', cursive;
  color:#FFF9F2;
}

span.blue-name {
  color:#00B4FF;
}



/*for media queries and responsiveness-----------------------------*/

img {
  max-width:100%; 
  max-height: 100%;
}

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

/*html { font-size:100%; } */


@media (min-width:702px), (min-width:707px), (min-width:741px), (min-width:752px), (min-width:762px), (min-width:792px){
  p.letter-two {
    left:-8%;
  }
}


@media (min-width:960px) { 
  body {
    font-size:1.2rem;
    } 

  p.letter-two {
    left: -5%;
  }
  }

@media (min-width:1100px) { 
  body {
    font-size:1.5rem;
    } 
  
  p.letter-two {
    left:-5%;
    font-size:6em;
    bottom: 0;
  }
   p.letter-one {
    right:0;
    font-size:6em;
    bottom: 0;
  } 
  } 

  /*For Iphone 6+*/

  /*@media (min-width: 414px) {
    p.letter-two {
    left:-28%;
    font-size:600%;
    bottom: 5%;
  }
   p.letter-one {
    right:-19%;
    font-size:600%;
    bottom: 5%;
  } 
  }*/

  /*For Iphone 6*/

  /*@media (min-width: 375px) {
    p.letter-two {
    left:-28%;
    font-size:500%;
    bottom: 5%;
  }
   p.letter-one {
    right:-19%;
    font-size:500%;
    bottom: 5%;
  } 
  }*/

/*For Iphone 5*/

  @media (min-width: 320px) {
    /*body {
      width: 100%;
      height: 100%;
    }*/
    p.letter-two {
    left: -.8em;
    font-size:5.4em;
    bottom: 5%;
  }
    p.letter-one {
    right: -.5em;
    font-size:5.4em;
    bottom: 5%;
  } 

  h1 {
    font-size: 2.3em;
    margin-left: 1%;
    margin-top: 25%;

  }

  .dot.left:after, .dot.right:after {
    width: .25em;
    height: .25em;
  }

  button {
    left: 30%;
  }

  div.about {
    flex-direction: column;
  }

   div.skills-show {
    padding-left: 0;
  }
  
  /*nav {
    float: left;
    flex-direction: column;
    width: 17vw;
    opacity: 0;
  }

  nav:hover{
    opacity:1;
  }*/
}

@media (min-width:550px) {
  /*p.letter-two {
    left:-6%;
  }*/
   .dot.left:after, .dot.right:after {
    width: .3em;
    height: .3em;
    
  }

  button {
    left: 45%;
  }
  div.about {
    flex-direction: row;
  }

  div.skills-show {
    padding-left: 5em;
  }

  div.contacts {
    flex-flow: column wrap;
    -ms-flex-flow: column wrap
  }

}

  /*General*/

  @media (min-width:1101px){

    body {
      overflow-x: hidden;
    }
    p.letter-two {
    left:-.3%;
    font-size:6em;
    bottom: 0;
  }
   p.letter-one {
    right:0;
    font-size:6em;
    bottom: 0;
  } 
   h1 {
    font-size: 4em;
    margin-left: 7%;
    margin-top: 14%;
  }

  .dot.left:after, .dot.right:after {
    width: .3em;
    height: .3em;
    
  }

  button {
    left: 45%;
  }

  nav {
  width: 100vw;
  flex-direction: row;
  opacity: 1;
}

  }
/*
@media (max-width: 900px) {
  nav {
    display: inline-block;
  
  }

 
}*/