*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#main{
    height: 100%;
    width: 100%;
    background-color:hsl(342.86deg 14.29% 61.57%);
    display: flex;
    
}
#part1{
height: 100%;
width: 20%;
/* background-color: red; */
}
#part2{
height: 100%;
width:50%;
/* background-color: blue; */
background-image: url(https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8ZmVtYWxlJTIwbW9kZWxzfGVufDB8fDB8fHww);
background-size:cover;
background-position: center;
}
#overlay{
    height: 100%;
    width: 100%;
    background-color:hsla(344, 14%, 62%, 0.227);
}
#part3{
height: 100%;
width: 7%;
/* background-color: green; */
}
#text-div{
    /* height: 300px; */
    position: absolute;
    width: 400px;
    /* background-color: red; */
    left: 5%;
    top: 35%;
}
#text-div>h1{
    font-size: 80px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-weight: 100%;
    line-height: 70px;
    color: white;
    letter-spacing:8px;
}
#small-img{
    height: 400px;
    width: 300px;
    position: absolute;
    top: 50%;
    right: 22%;
    transform: translate(0,-50%);
    background-image: url(https://plus.unsplash.com/premium_photo-1669704098776-1408db9ea894?q=80&w=1888&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-position: center;
    background-size: cover;
}
#overlay2{
    height: 400px;
    width: 300px;
    background-color:hsla(344, 14%, 62%, 0.23);
    position: absolute;
    top: 50%;
    right: 22%;
    transform: translate(0,-50%);
}
#vertical-text{
    position: absolute;
    /* background-color: red; */
    /* width: 100%; */
    right: -0.5%;
    top:47%;
    transform-origin: 0% 0%;
    z-index: 3px;
}
#vertical-text>h1{
    transform: rotate(90deg);
    letter-spacing: 10px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 1000px;
    font-size: 62px;
   text-transform: uppercase;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: white;
   color: transparent;
   z-index: 3px;
}
#nav{
    position: absolute;
    display: flex;
    left:5%;
    top:20px;
    width: 400px;
}
#nav>img{
    height: 50px;
}
#nav>h5{
    color: white;
    font-size: 15px;
    width: 200px;
    height: 30px;
    top:40px;
    float: left;
    left: 30px;
}
@media(max-width:500px){
    #main{
        flex-direction: column;
    }
    #main #left{
        width: 100%;
    }

    #main #right{
        width: 100%;
    }
}