body {
    background: rgb(39, 39, 39);
}
 
div {
    /* position: absolute; */
    top: 20%;
    left: 10%;
    width: 900px;
    /* margin-right: -50%;
    transform: translate(-50%, -50%); */
}

h1.type1 {
    position: absolute;
    /* top: 12%; */
    left:1.5%;
    margin-block-start: auto;
    font-size: 60px;
    font-family: Arial,Helvetica, sans-serif;
    background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59 );
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

h1.type2 {
    position: absolute;
    /* top: 12%; */
    left:1.5%;
    margin-block-start: auto;
    font-size: 60px;
    font-family: Arial,Helvetica, sans-serif;
    background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9 );
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

img {
    display: block;
    max-width: 100%;
}

.filter {
    filter: brightness(0) invert(1);
    height: 100;
}

.container {
    /* position: relative; */
    width: 100%; /* Or specify a fixed width */
    height: 150px; /* Or specify a fixed height */
    /* background-color: lightgray; */
}

.element {
    position: absolute;
    font-family: Arial,Helvetica, sans-serif;
    left: 1.5%; /* Position 1.5% from the left */
    top: 55%; /* Example: Center vertically */
    /* transform: translateY(-50%); /* Example: Center vertically */
    /* background-color: blue; */
    color: white;
    /* padding: 10px; */
}