#header-div {
  background-color: black;
  
}
#socials::hover{
  color: #C3073F !important;
}
a {
  text-decoration: none;
  color: black;
}
a:hover {
  color: #C3073F;
}
#carousel-img{
  height: 50px !important;
}
#footer {
  bottom: 10px !important;
  color: white;
}
body {
  background-color: black;
  width: 100vw;
  overflow-x: hidden;
}
#hero-caption-main {
  color: #C3073F;
  //font-size: 3.5vw;
  
}
#carousel-image {
 display: flex !important;
 justify-content: center !important;
  
 margin: auto !important;
 height: 70vh; 
 width: 80vw;
}
#hero-button {
  color: white;
  border: 1px solid white;
}
#profile-section {
  display: flex;
  flex-direction: column;
  background-color: #C3073F;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
  position: relative;
  //-left: 50px;
  //height: auto;
  //padding-top: 100px; 
  //padding-bottom: 25vw;


}
#menu-items:hover {
  color: red;
}
@media only screen and (max-width: 600px) {
  #profile-section {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10vw;
    margin-bottom: 15vw;
  }
  #profile-section img {
    margin-bottom: 20px;
  }
  #hero-caption-main {
    max-width: 370px;
  }
  #main-hero-image {
    margin-left: 10vw;
    
  }
  .custom-shape-divider-top-1635229611 svg {
    top: 0;
    
  }
  .wrapper {
    display: flex;
    justify-content: center;
    margin-left: 20px;
    //height: 5px;
  }
  .wrapper > a > i {
  transform: scale(0.7);
}
.wrapper > a > i:hover {
  transform: scale(0.1);
}
#hero-caption-main {
 // color: #C3073F;
  //font-size: 1.8em;
  margin-left: 1vw;
  
}
  

}

@media only screen and (max-width: 600px) {
  
}


#profile-section img {
  border-radius: 50%;
  height: 40vh;
  width: 40vh;
}
#profile-content {
  width: 30%;
  color: white;
}

#typing-effect h1 {
  color: #C3073F;
  max-width: auto;
  //font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid white; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  //margin: 0; /* Gives that scrolling effect as the typing happens */
  //letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}


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

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

.custom-shape-divider-top-1635229611 {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    //overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1635229611 svg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: calc(100% + 1.375px);
    height: 150px;
}

.custom-shape-divider-top-1635229611 .shape-fill {
    fill: black;
}
.wrapper > a > i:hover {
  transform: scale(1.2);
}
.wrapper > a {
  gap: 5px;
}
#work-history-label {
  color: white;
  //margin-left: 40vw;
}
.wrapper {
  font-size: 8px;
  margin-right: 10px;
}
.hamburger {
    display: none;
    z-index: ;
}

.hamburger:focus{
    outline: 0;
}


@media only screen and (max-width: 1000px) {
    .hamburger {
        display: block;
        border: 0;
        background-color: transparent;
        color: white;
        font-size: 30px;
        margin: 30px;
        position: fixed;
        top: 0;
        right: 0;
        align-self: flex-end;
       // z-index: 0;
    }

    #nav {
        display: none;
        background-color: transparent;
        margin: 0ppx;
    }

    #nav.show {
        display: block;
    }

    nav {
        display: flex;
        flex-direction: column-reverse;
        background-color: #2b2c38;
    }

   
}