#hero{
    overflow: hidden;
    background-color: black;
    width: 100%;
    height: 90vh;
}

#hero-container {
    position: relative;
    display: block;
    width: 60%;
    height: 100%;
}

#hero-box-text{
    position: absolute;
    top: 0;
    left: 10%;
    height: 100%;
    width: 40%;
}

#box-hero-name {
    writing-mode: vertical-rl;
    display: inline-block;
    position: absolute;
    top: 5vh;
    left: 0;
    z-index: 2;
    rotate: 180deg;
}

#box-hero-name>h1{
    color: #E74C3C; 
    font-size: 15rem;
    text-align: right;
}

#box-hero-webdeveloper{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 8rem;
    color: whitesmoke;
    z-index: 4;
    text-align: end;
}

#box-hero-webdeveloper>p{
    text-align: right;
}

#hero-img {
    position: absolute;
    height: 60rem;
    right: 0;
    bottom: 0;
    z-index: 3;
    filter: contrast(1.1);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.671));
}


.slide-in-bottom {
	animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-bottom {
    0% {
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-right {
	animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-right {
    0% {
      transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}