*{margin:0; scroll-behavior: smooth;}
/*Text Items*/
.main-heading {
  margin: auto;
  width: 100%;
  /*padding: 10px;*/
  text-align: center;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  font-size: 60px;
  font-family: monospace;
  color: #3e7c7f;
}

.heading {
  margin: auto;
  width: 100%;
  /*padding: 10px;*/
  text-align: center;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  font-size: 40px;
  font-family: monospace;
  color: #3e7c7f;
}

.section{
  margin: auto;
  width: 50%;
  /*padding: 10px;*/
  text-align: center;
  font-size: 30px;
  font-family: monospace;
  -webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: black;
  color: #3e7c7f;
}

.para{
  margin: auto;
  width: 75%;
  /*padding: 5px;*/
  text-align: center;
  align-items: center;
  font-size: 20px;
  font-family: monospace;
  color: white;
}

.portfolio-para{
  margin: auto;
  width: 75%;
  /*padding: 5px;*/
  text-align: center;
  font-size: 12px;
  font-family: monospace;
  color: white;
}

.body{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  max-width: 100%;
}

/*Background Stuff*/
 body{
 background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Images/background-image.gif");
 background-position:center;
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: fixed;
 min-height:100%;
 min-width:100%;
 height:100%;
 width:100%;
 display:flex;
 justify-content:center;
 align-items:center;
 flex-direction:column;
}

.background{
  height: 100vh;
  width: 100%;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color:rgba(0,0,0,0.3);
}

.bg-home{
  height: calc(100vh - 80px);
  width: 100%;
  background-color:rgba(0,0,0,0.3);
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/*Navigation Bar */
.nav {
    height:40px;
    line-height:40px;
    background:transparent;
    font-family:monospace;
    font-size:180%;
    display:flex;
    justify-content:center;
    align-items:center;
    width: 100%;
    background-color:rgba(0,0,0,0.3);
}

.nav a{
  margin:20px;
  min-width: 120px;
  text-decoration: none;
  color:#ccece6;
  text-align:center;
}

.nav a:hover{
    background:rgba(255,255,255,0.2);
    transition:all 0.3s;
}

/*portfolio*/
.portfolio-item{
  margin:20px
}

#portfolio-items{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  flex-direction: row;
  flex-wrap: wrap;
}

/*About-Area*/
.about-area{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#home-page{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  flex-direction: column;
}

#home-page img{
  border-radius: 200px;
  height: 200px;

}

/*Card Flip*/
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #1c1c1c;
  color: black;
}

.flip-card-front img{
  object-fit: cover;
}

.flip-card-back {
  background-color: #4a1768;
  color: white;
  transform: rotateY(180deg);
}

.flip-card-back a{
  text-decoration: none;
  color: inherit;
}

/*Dynamic Text*/
.wrapper{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.type-txt {
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  margin-bottom: 15px;
  letter-spacing: .15em;
  color: #3e7c7f;
  font-size:400%;
  font-family: monospace;
  text-shadow: 4px 4px #000;
  animation:
    typing 5s steps(40, end) infinite,
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  0% { width: 0 }
  50% { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black; }
}