<div  role="img" aria-label="glass of water">
  
</div> 

$t: transparent;
$bk: #e8e8e8;
$bkw: #fff;

@mixin for-phone-only {
  @media (max-width: 599px) {
    @content;
  }
}
body {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
   @include for-phone-only {
    font-size: 6px;
  }    
  overflow: hidden;
  font-size: 10px;   
    background: 
      linear-gradient(
        #E8E8E8 70vh,#fff 71vh
      )
      ;
  background-repeat: no-repeat;
  background-position: 50% -20%;
}
div {
    position: absolute;
    width: 22em;
    height: 40em;
    top: 50%;
   @include for-phone-only {
    top: 65%
  }      
    left: 50%;
    transform: translate(-50%, -50%);
 background: 
      linear-gradient(
        to right,
        rgba($t, .0), 
        rgba(#fff,.6),
        rgba($t, .0), 
      ) 
      50% 99% / 8em 1.5em,     
// TOP WATER LINE    
      radial-gradient(
          100% 50% at 50% 100%,
          #C7D2DB 45%,
          rgba($t, 0) 49%,
          rgba($t, .0) 53%
        )
        50% 14% / 19.5em 1.8em,      
// BOTTOM   
      linear-gradient(
        to right,
        rgba($t, .0), 
        rgba(#313B56, .2),
        
      ) 
      74% 99% / 6em 1.5em,  
      linear-gradient(
        rgba(#313B56, .9) 78%, 
        rgba(#313B56, .4) 80%
      ) 
      84% 98% / .9em 1.3em,       
      linear-gradient(
        rgba(#313B56, .9) 78%, 
        rgba(#313B56, .4) 80%
      ) 
      18% 98% / .5em 1.3em,          
// corner     
    radial-gradient(
        150% 100% at 100% 0%,
      $t 1em,
        rgba(#2B4961,.6) 1.4em,
        $bkw 1.5em
      )
      16% 100% / 1.5em 1.5em,  
    radial-gradient(
        150% 100% at 0% 0%,
      rgba($t,0) 1em,
        rgba(#2B4961,.6) 1.4em,
        $bkw 1.5em
      )
      86% 100% / 1.5em 1.5em,   
// end corner  
      
      radial-gradient(
          100% 100% at 50% 0%, 
          $t 6em,
          rgba(#2B4961, 1) 49%,
          rgba($bkw, 1) 53%
        )
        50% 102% / 15.5em 1.8em, 
      radial-gradient(
          100% 100% at 50% 0%, 
          $t 6em,
          rgba(#2B4961, 1) 49%,
          rgba($t, 1) 53%
        )
        50% 104% / 15.5em 1.8em,       
// MIDDLE SHADOW   
      linear-gradient(
        to right,
        rgba($t,0),
        rgba(#fff, .8), 
        rgba($t,0)
      )  
        50% 95% / 64% 80%,       
// TOP     
      radial-gradient(
          100% 100% at 50% 100%,
          $t 45%,
          rgba(#313B56, 1) 49%,
          rgba($t, .0) 53%
        )
        50% -.8% / 20.5em 1.8em,
      radial-gradient(
          100% 100% at 50% 50%,
          $bk 45%, 
          rgba(#B0BEC9, .7) 49%,
          rgba($t, .0) 53%
        )
        50% 1.5% / 20.5em 1.8em,       
// BOTTOM LINE 
  
      radial-gradient(
          100% 20% at 50% 0%,
          $t .4em,
          rgba(#313b56, 1) 6em,
          rgba($t, .0) 11em
        )
        24% 101% / 30% 1.8em,       
      radial-gradient(
          100% 40% at 50% 0%,
          $t 45%,
          rgba(#4F6C80, 1) 49%,
          rgba($t, .0) 90%
        )
        50% 98% / 71% 1.8em,  
      radial-gradient(
          100% 40% at 50% 0%,
          rgba($t,.0) 45%,
          rgba(#646F7C, 1) 70%,
          rgba(#597383, .3) 80%
        )
        50% 99.5% / 71% 2em,          
// BLOCKERS   
      
      linear-gradient(
        -93.8deg,
        rgba($t,0) 76.5%,
        rgba(#313B56, .8) 78%, 
        rgba($bk,1) 80%
      ) 
        -1em 4% / 10.45em 6.2em,       
      // left      
      linear-gradient(
        -93.8deg,
        rgba(#D4DDE3,.5) 40%,
        rgba(#99A9B8, .8) 73%, 
        rgba(#0A2D49, 1) 78%, 
        rgba($t,0) 80%
      ) 
        6.8% 91% / 10.45em 79%,
      // top right      
      linear-gradient(
        93.8deg,
        rgba($t,.0) 76.5%,
        rgba(#313B56, .8) 78%, 
        rgba($bk,1) 80%
      ) 
        110% 4% / 10.45em 6.2em,       
      // right      
      linear-gradient(
        93.5deg,
        rgba(#D4DDE3,.5) 10%,
        rgba(#8293A3, .7),
        rgba(#8293A3, 1) 73%, 
        rgba(#0A2D49, 1) 78%, 
        rgba($t,0) 80%
      ) 
        96% 91% / 10.45em 79%,
// WATER LINE      
      linear-gradient(
        rgba(#313B56, 1) 78%, 
        rgba(#313B56, 1) 80%
      ) 
      52% 18% / 89.3% .8em,
      // top left  
      linear-gradient(
        -93.8deg,
        $t,
        rgba(#798E9F, .2) 78%, 
        rgba($bk,1) 80%
      ) 
        -1em 4% / 11em 6.2em,       
      linear-gradient(
        93.8deg,
        rgba($t,0) 76.5%,
        rgba(#798E9F, .8) 78%,  
        rgba($bk,1) 80%
      ) 
        110% 4% / 11em 6.2em, 
    
      rgba($t,0)
      ;  
  background-repeat: no-repeat;
  &:after {
    content: "";
    position: absolute;
    width: 40em;
    height: 20em;
    top: 103%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: 
// BK BLOCK   
      
// RIGHT      
      linear-gradient(
        93.8deg,
        rgba(#000, .0) 50%, 
        rgba($bkw,1) 52%
      ) 
        23em 39% / 10.45em 1em,        
      linear-gradient(
        93.8deg,
        rgba(#000, .0) 50%, 
        rgba($t,0) 52%
      ) 
        23em 11.6% / 10.45em 6.2em,       
// BK BLOCK     
// LEFT      
      linear-gradient(
        -93.8deg,
        rgba(#000, .0) 50%, 
        rgba($bkw,1) 52%
      ) 
        7.1em 39% / 10.45em 1em,        
      linear-gradient(
        -93.8deg,
        rgba(#000, .0) 50%, 
        rgba($t,0) 52%
      ) 
        7.1em 11.6% / 10.45em 6.2em,       
// BLOCKERS    
// left      
      linear-gradient(
        95.6deg,
        rgba($bkw,1) 13%,
        rgba(#0A2D49, .2) 15%, 
        rgba(#8293A3, .1) 38%, 
        rgba(#D4DDE3,.1) 60%
      ) 
        33.4% 100% / 6em 11.3em,         
// right      
      linear-gradient(
        -95.6deg,
        rgba($bkw,1) 13%,
        rgba(#0A2D49, .2) 15%, 
        rgba(#8293A3, .1) 38%, 
        rgba(#D4DDE3,.1) 60%
      ) 
        68% 100% / 6em 11.3em,      
      
      rgba($t,0)
      ;
    background-repeat: no-repeat;
  }
  &:before {
    content: "";
    position: absolute;
    width: 25em;
    height: 40em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   background: 
     
// TOP      
      linear-gradient(
        -93.8deg,
        rgba($t, .0) 50%, 
        rgba($bk,1) 51%
      ) 
      .45em 20% / 5em 6.2em,      
     ;
    background-repeat: no-repeat;
  }
}