*{
  margin:0;
  font-family: arial;
  padding:0;
  scroll-behavior: smooth;
}

body{
  background-color:black;
  max-width:100%;
  background-image:url("../Images/bg.gif");
  background-position:center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@font-face {
  font-family: 'alien';
  src: URL('../fonts/Alien.ttf') format('truetype');
}

@font-face {
  font-family: 'arcade';
  src: URL('../fonts/arcade.ttf') format('truetype');
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

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

#mainNav{
  min-height:50px;
  width:100%;
  display:flex;
  justify-content: center;
  background-color:rgba(0,0,0,0.5);
}

#mainNav a{
  width:300px;
  color:white;
  text-decoration:none;
  font-family:alien;
  justify-content:center;
  text-align:center;
  font-size:120%;
  line-height:50px;
}

#mainNav a:hover{
  transition:all 0.2s;
  color:#aaa;
  background-color:rgba(255,255,255,0.1);
}

.mainArea{
  width:100%;
  height:auto;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  animation: fadeIn 3s;
  min-height:100vh;
  background-color:rgba(0,0,0,0.5);
}

.mainArea p{
  text-align:center;
}

#mainHome{
  min-height:calc(100vh - 50px);
}

#p1 h1{
  margin:0;
  padding:0;
  font-family: arcade;
  font-size:400%;
  color:#eb57cc;
  text-shadow:3px 3px black;
}

#p1 p{
  margin:0;
  font-family:alien;
  font-size:150%;
  color:white;
  margin-bottom:30px;
}

.pExample{
  margin:10px;
}

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


.pageBreak{
  height:300px;
  width:100%;
  /* background-image:url("../Images/space.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; */
}

.pTitle{
  font-size:300%;
  font-family:arcade;
  color:#eb57cc;
}

.pBody{
  font-size:110%;
  font-family:arial;
  color:white;
  margin:10px;
  text-align:center;
}

#profPic{
  height:150px;
  margin:5px;
  border-radius:150px;
}

.pBody p{
  margin:5px;
}

#workExp{
  width:100%;
  height:auto;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
}


/*FLIP CARD CODE*/
.flip-card{
  width:200px;
  height:200px;
  background:transparent;
  perspective:1000px;
  margin:10px;
}

.flip-card-inner{
   position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}


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

.flip-card-back , .flip-card-front{
  font-family:alien;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}

.flip-card-front img{
  max-height:100%;
  max-width:100%;
}

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

.flip-card-back{
  background-color: #070076;
  transform:rotateY(180deg);
  font-size:50%;
}

.flip-card-back a{
  color:white;
  font-size:140%;
}

.flip-card-back h1{
  font-size:20px;
  margin:0;
  padding:0;
  font-family: arcade;
  font-size:400%;
  color:#eb57cc;
  text-shadow:3px 3px black;
}

.flip-card-back p{
  color:white;
  font-size:180%;
  margin:5px;
}