body {
  margin: 0;
  background-color: #000000;
  color: #f0f8ff;
 /* bg-color:#2e2c2c */
}


h1 {
  margin-top: 0;
  text-align: center;
}

/* iframe {
  width: 100%;
  height: 50%;
} */

/* below two details summary tags help to overcome the problem caused by using detail and summary tag
 like block level element pushes the content down below the line  */
details summary {
  cursor: pointer;
}

details summary {
  display: inline;
}

p{
  font-size:25px;
}

#front {
  text-align: left;
  text-align: center;
  padding: 0px;
  font-family: sans-serif;
  font-style: initial;
  font-size: 10em;
}




.port2 {
  /* background-color: aqua; */
  width: 100%;
  height: 850px;
  font-family: 'Secular One', sans-serif;
  font-style: initial;
  font-size: large;

}

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

a:hover {
  color: #00FFAB;
  text-decoration: none;

}
#abt{
  display: inline-block;
}

.myButton {
   display: flex;
  justify-content:center;
  font-size: 40px;
  font-style: bold;
  font-family: 'Pacifico', cursive;  

}


h1 {
  font-family: 'Pacifico', cursive;
  font-size: 10vh;
}

.port1 {
  /* background-color: #FF0606; */
  height: 850px;
}

.port3 {
  height: 850px;
  font-family: sans-serif;
  font-style: initial;
  font-size: large;
  padding: 10px;
  ;
}

.port4 {
  height: 850px;
  font-family: sans-serif;
  font-style: initial;
  padding: 10px;
  place-content: center;

}

#myimg {
  display: flex;
  justify-content: center;
}

h3 {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  font-family: sans-serif;
  font-style: initial;
}

#follow {
  display: flex;
  justify-content: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 200%;
}

#social {
  display: flex;
  justify-content: space-around;
  font-family: sans-serif;
  font-style: initial;
  font-size: larger;
  font-size: 230%;

}

@page {
  size: 4in 6in landscape;
}

.ul {
  width: 100px;
}

 ul li {
  margin-right: 25%;
  text-align: inherit;
  padding-left: 0px;
  list-style-type: disc;
  text-overflow:hidden;
}

ul {
  width: 90%;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  /* padding-right: 20px; */
  justify-content: space-between;
  font-size: 20px;
  margin-right: 0%;
  text-overflow:hidden;
  
}



/* Animation part */

/* #front{
  width: 130%;
  animation: typing 10s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
} */


/* Trying second animation */

#front {
  color: #fff;
  font-family: sans-serif;
  font-style: initial;
  font-size: 170%;
  padding: 10px;
  margin: 10px;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .10em solid transparent;
  /* The typwriter cursor */
  white-space: pre-line;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .10em;
  animation:
    typing 6s steps(35, end),
    blink-caret .7s step-end 7;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0
  }

  to {
    width: 95%
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: #00FFAB
  }
}