body {
    margin: 0;
    padding: 0;
    font-family: Inter, sans-serif;
    overflow-x: hidden;   
}

.Home {
    background-color: rgba(255,155,155,0.5);
    position: relative;
}

.Hero {
    justify-content: space-between;
    max-width: 1300px;
    margin:auto;
    margin-top:100px;
    position: relative;
    height: 1000px;
    background-color: rgba(155,155,255,0.5);
}

.HeroContent {
    position: relative;
    z-index:100;
}

/* style="width: 764px; height: 964px; left: 650px; top: 0px; position: absolute" */
.HeroGraphic {
    position: absolute;
    right:-200px;
    top:0px;
    width: 750px; 
    height: 964px;
    z-index: 50;
    background-color: rgba(250,100,100,.3);
}

.HeroContent h1 {
    padding-left:4px;
    font-size: 133px;
    font-weight: 900;
    white-space: nowrap;
    
    margin:4px;
    
}

.OneOhOne {
    background: linear-gradient(to bottom right, #fad98d, #592c55);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
  /*  height: 105px; left: 52px; top: 197px; position: absolute; font-family: Inter;   */
.HeroContent p {
    width: 400px;
    color: #757575;
    font-size: 18px;
    font-weight: 300;
    line-height: 35.19px; 
    letter-spacing: 0.09px; 
    margin-left:100px;
    margin-top: 40px;
    text-shadow: 0px 0px 20px rgba(255, 255,255, 0.8);

}





/* <img class="Rectangle22" style="     " src="img/Rectangle22.png" />
<img class="Rectangle23" style="   " src="img/Rectangle23.png" />
<div class="Rectangle24" style="  "></div>
<div class="Rectangle25" style="   "></div> */

.Phoneish {
    width: 280px;
    border-radius: 68px;
    position: absolute;
}
.PhoneBlur {
    background: rgba(255, 255, 255, 0.50); 
    border: 0.50px  solid rgba(255, 255, 255, 0.50); 
    backdrop-filter: blur(120px)
}

.TopRight.Phoneish { /* want to ensure is more specific */
    width:278px;
    
}
.TopRight {
    height: 670px;
    left: 326px;
    top: 0px;
}
.BotLeft {
    height: 629px;
    left: 0px;
     top: 171px;
}
.BotLeftCover {
    height: 479px;
    left: 164px;
    top: 485px;  
}
.TopRightCover {
    height: 562px;
    left: 484px; 
    top: 302px;
}

.MouseLine {
    position: relative;
    width:88px;
    height:590px;
    left: 300px;
    top: 45px;
}


.Javascript {
    position:relative;
    background-color:rgba(200,200,200,.5);
    
    width:98vw;
    margin: auto;
}

.OrangeSquare {
    
}