/* fonts */
@font-face {
  font-family: gotham-book;
  src: url("../gotham-book.oft") format("opentype"),
  url("../gotham-book.woff") format("woff"), /* Modern Browsers */
  url("../gotham-book.ttf")  format("truetype"); /* Safari, Android, iOS */
}
@font-face {
  font-family: gotham-black;
  src: url("../gotham-black.otf") format("opentype"),
  url("../gotham-black.woff") format("woff"), /* Modern Browsers */
  url("../gotham-black.ttf")  format("truetype"); /* Safari, Android, iOS */
}
/* style for nav bar */
 .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
  }
/* puts animated text in the proper position */
.position{
    height: 100vh;
    position: fixed;
}
/* pushes the portfolio section to the bottom */
.invisibleblock {
margin-top: 98vh;
  }
/* portfolio image styling */
img {
border-radius: 8px;
margin-top: 12px;
margin-bottom: 12px;
  }

/* unused background image for future use */
  /* body {
    background-image: url("background.jpg");
    background-size: cover;
    background-attachment: fixed;
   } */
/* sets the background color and position for the portfolio */
main{
 
    background-color: rgb(255, 255, 255);
    position: relative;
}

/* animates the opening text */
/* code was taken from here https://css-tricks.com/snippets/css/typewriter-effect/ */
  .typewriter h1 {
      
    position: fixed;
    bottom: 50%;
    font-size: 8vw;
    color: rgb(22, 22, 22);
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap; 
    /* Keeps the content on a single line */
    margin: 0 left; /* Gives that scrolling effect as the typing happens */
    animation: 
      typing 2s steps(30, end),
      blink-caret .5s step-end infinite;
  }
  
p {
max-width: 800px;
}
  
/* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }

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

  }
  /* fading text */
    .fade-text {
        top: 48%;
        font-size: 20px;
        position: fixed;
        opacity: 0;
        color: #1a1a1a;
        animation-name: fadeIn;
        animation-delay: 1.5s;
        animation-duration: 1s;
        animation-fill-mode: forwards;
      }

    h2{
        bottom: 12%;
        font-size: 16px;
        margin: auto;
        width: 97.5%;
        text-align: center;
        position: fixed;
        opacity: 0;
        color: #1a1a1a;
        animation-name: fadeIn;
        animation-delay: 1.5s;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    svg{
        bottom: 4%;
        position: fixed;
            /* display: flex; */
            margin: auto;
            width: 97.5%;
            opacity: 0;
            animation-name: fadeIn;
            animation-delay: 1.5s;
            animation-duration: 1s;
            animation-fill-mode: forwards;   
}
/* sets the shadow for the main section */
.shadow{
  box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.2), 20px 20px 20px 0 rgba(0, 0, 0, 0.19);
}