body {
    background-image: url('../assets/bluePurpBKRND5dark5.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.gridcont{
    grid-auto-flow: row;
  gap: 10px;
 height: 85%;
 width: 100%;
display: grid;
grid-template-areas:
"logo  titletext"
"middiv middiv"
"aspire aspire"
"lineani lineani"
;
align-content: center;
justify-content: center;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 1fr .2fr .1fr;
}
.bllogo{
    grid-area: logo;
}
.slideup{
animation: slideupani 1.3s ease-out 200ms forwards;
}
@keyframes slideupani {
from{
    opacity: 100%;
transform: translateY(0);
}
to{
    opacity: 60%;
    transform: translateY(-750px);
}
}


.expandopacity{
    animation: expand .5s ease-out 250ms forwards !important;
    }
   
    @keyframes expand {
        0%{
            opacity: 60%;
       
        }
        100%{
    
            opacity: 1%;
     
        }}

.slidedown{
    animation: slidedownani 1.3s ease-out 200ms forwards;
    }
    @keyframes slidedownani {
    from{
        opacity: 100%;
    transform: translateY(0);
    }
    to{
        opacity: 60%;
        transform: translateY(750px);
    }
    }


    

  .slideleft{
    animation: slideleftani .5s ease-in forwards !important;
    }
    @keyframes slideleftani {
    0%{
        opacity: 60%;
        width: 86px;
        transform: translateX(9.75vmax);
    }
    100%{
        opacity: 10%;
        width: 16px;
        transform: translateX(-20vmax);

        
    }
    }
    





.aspiring{
    font-size: 4vmax;
color: #D6B9A7;
 font-family: "Inter";
 font-weight: 400;
 word-wrap: break-word;
 grid-area: aspire;
 text-align: center;
 margin-top: -2%;
 margin-bottom: auto;
 justify-self: center;
 align-self: flex-start !important;
 text-shadow: 
 -1px -1px 0 black,
 1px -1px 0 black,
 -1px 1px 0 black, 
 1px 1px 0 black;
}
.titletext{
    left: -10%;
    position: relative;
    align-self: center;
    text-align: center;
    grid-area: titletext;
    font-size: 6vmax;
    justify-self: flex-start !important;
    text-shadow: 
    -2px -2px 0 black,  
    2px -2px 0 black,  
    -2px 2px 0 black, 
    2px 2px 0 black; 

}
.midrectangle{
    width: 90%;
   display: flex;
   opacity: .65; 
   box-shadow: -1px -1px 10px -1px #925fc416, 1px 1px 10px -1px #5789bb18; 
   border: 8px solid  rgba(255, 255, 255, .01);
   height: 1px;
grid-area: middiv;
z-index: 1;
justify-self: center;
animation: fadeIn 3.2s ease-in-out alternate;
animation-iteration-count: 2;
}


@keyframes fadeIn {
    from { 
        opacity: .7; 
        box-shadow: -1px -1px 10px -1px #925fc416, 1px 1px 10px -1px #5789bb18; 
        border: 8px solid  rgba(255, 255, 255, .01);
        height: 1px;
    }



    to { opacity: .80; 
        box-shadow: -3px -6px 14px 1px #925fc48d, 3px 6px 14px 1px #5789bb7e;
        border: 8px solid rgba(255, 255, 255, .06); 
        height: 3px;
    }
}
  #midrect {
    position: relative;
  }





.midrectmid{
    height: 90%;
    height: 1px;
    width: 100%;
    opacity: 60%;
    border: 4px solid rgba(0, 0, 0,.85);
box-shadow: -1px -5px 10px 0px #925fc4fd, 1px 5px 10px 0px #5789bb; 
z-index: -2;
align-self: center;
justify-self: center;
}

#ulani{
    position: relative;
}

.underlineani{
    grid-area: lineani;
    background: rgba(188, 188, 188, 0.683);
box-shadow: 4px -3px 10.9px 0px #a672de82, -13px 1px 10.9px 0px #a672de7d, 
3px 3px 11.9px 0px #72a8de7e, 3px -2px 12.4px 0px #7fbbf7b4, 3px 2px 8.4px 0px #6595c46c;
width: 176px;
height: 2px;
position: relative;
justify-self: flex-start;
animation: moveRight 3.5s ease-in-out alternate;
animation-iteration-count: 2;

}

@keyframes moveRight {
    0% { 
        width: 66px;
        height: 2px;
        transform: translateX(10vmax); 
        opacity: 60%;}

        45% {width: 296px;
            opacity: 80%;}
    100% { 
        width: 66px;
        height: 2px;
        transform: translateX(85vmax); 
        opacity: 60%;}
  }
 
  @media (max-width: 768px) {
    .bllogo {
      display: none;
    }
    .titletext{
        left:-35%;
        font-size: 4vmax;
  }
  .aspiring{
  margin-top: -40%;
}}