@import url('https://fonts.googleapis.com/css?family=Montserrat');/*Animation*/



/*
1.Navigation
2.Intro
3.Buttons

*/


/*Nagivation bar in the web*/
* {
  margin: 0px;
  padding: 0px;
  scroll-behavior: smooth;
  box-sizing: border-box;
  font-family: 'Times New Roman', Times, serif;;
}

html, body {
  margin: 0px;
  padding: 0px;
  background-color:#e0e0e0;
  overflow-x: hidden;
  }

.body{
  width: 100%;
  margin: auto;
}
 
/* Add a black background color to the top navigation */
.topnav {
	overflow: hidden;
	background-color:#08192d;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  }

  
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    padding-top: 30px;  
    display: block;
    padding: 15px 15px;
    position: relative;
}




/*Underline*/
.topnav-right a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: white;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.topnav-right a:hover:after { 
  width: 100%; 
  left: 0; 
}
@media screen and (max-height: 400px) {
    .topnav-right a {
        margin-top: 40px;
    }
}

/* Change the color of links on hover                 See Me*/
.topnav a:hover {
    background-color: none;
  	color: crimson;
}





/* Right-aligned section inside the top navigation */
.topnav-right{
  float: right;
}


/*Responsive*/
.topnav a.active { /*Keeping home active*/
  color: white;
  font-size: 30px;
}

.topnav .icon {  /*Keeping 3 bars */
  display: none;
}
.logo a:hover{
  font-size: 40px
}

/* When the screen is less than 600 pixels wide, hide all links, 
except for the first one ("Home"). 
Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 812px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript
 when the user clicks on the icon. 
 This class makes the topnav look good on small screens 
 (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {

  .topnav.responsive {position:relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}



/*Intro CSS*/

/*ANIMATION*/

/*name animation*/


.name-animation {
  height: 20vh; /*Height of the animation*/
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 35px;
  padding-bottom: 40px;
  box-sizing: border-box;

}

.name-animation p {
  font-size: 3rem;
  padding: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
}
.name-animation p span.typed-text {
  font-weight: normal;
  color: #dd7732;
}
.name-animation p span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}
.name-animation p span.cursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}

/*Button Animation*/

.d-h{
  padding-top: 50px;
  padding-bottom: 30px;
  }

.download-hireme {
    width: 220px;
    height: 50px;
    margin: 5px; /*Gap between the buttons*/
    border: none;
    outline: none;
    color: #fff;
    background:crimson;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    font-size: 20px;
}

.download-hireme:before {
    content: '';
    background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.download-hireme:active {
    color: crimson;
}

.download-hireme:active:after {
    background: transparent;
}

.download-hireme:hover:before {
    opacity: 1;
}

.download-hireme:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:crimson;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/*END ANIMATION*/

.topic img{
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  border-radius: 50%;
  padding-top: 5px;

}
.small-text {
  color: #5b5b5b;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 50px;
  letter-spacing: 0.2px;
}

.page{
  text-align: center;
}

.topic h1{
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 60px;
}
.story{
    font-size: 1.3em;
    line-height: 1.8em;
    font-style: italic;
    text-indent: 1.3em;
    color: gray;
    padding-left: 50pt;
    padding-right: 50pt;
}
@media only screen and (max-width: 425px) {
.story{
    font-size: 1.3em;
    line-height:1.5em;
    padding-left: 7pt;
    padding-right: 7pt;
  }
  
}




/*Content-header-----*/
/*---------Content header animation*/





/*content-header*/

.content-header{
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.content-header h1{
  color: #484848;
  font-size: 40px;
  font-weight: bold;
  font-family: 'Times New Roman', Times, serif;
  letter-spacing: 7px;
  cursor: pointer;
}

.content-header h1 span{
  transition: .5s linear;
}

.content-header h1:hover span:nth-child(1){
  margin-right: 5px;


}
.content-header h1:hover span:nth-child(1):after{
  content: "";
}

.content-header h1:hover span:nth-child(2){
  margin-left: 30px ;
}

.content-header h1:hover span{
  color: crimson;
  text-shadow: 0 0 10px #fff,
               0 0 20px #fff, 
               0 0 30px #fff,
               0 0 40px crimson;
}