<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sun Reflection</title>
    
    <link rel="stylesheet" type"text/css" href="style.css">

</head>
<body>
    <div class="sun">
        <div class="water">
            <div class="reflection"></div>
        </div>
    </div>
    <div class="plop"></div>   
<div class="footer"><p>Created by <a href="https://www.rembertdesigns.co/" target="_blank">Richard Rembert</a></p>
    </div>
</body>
</html>
body{
    height: 100vh;
    width: 100vw;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 0px;
}
.sun{
    background: linear-gradient(174deg, rgba(255, 0, 0, 1) 44%, rgba(255, 123, 0, 1) 63%);
    height: 50vmin;
    width: 50vmin;
    margin-left: 25vmin;
    border-radius: 50%;
    box-shadow: 0 -0.5vmin 4vmin red;
    display: flex;
    align-items: center;
    justify-content: center;
}
.water{
    position: relative;
    background: black;
    width: 80vmin;
    height: 25vmin;
    top: 26vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reflection{
    position: relative;
    background: rgba(255, 123, 0, 1);
    color: rgba(255, 123, 0, 1);
    width: 50vmin;
    height: 3vmin;
    border-radius: 50%;
    top: -12vmin;
    box-shadow: 0.5vmin 0 2vmin, 
    -0.5vmin 0 2vmin;
    animation: fade 3s ease-in-out infinite;
}
.reflection::after{
    content: "";
    position: absolute;
    background: rgba(255, 123, 0, 1);
    color: rgba(255, 123, 0, 1);
    width: 50vmin;
    height: 5vmin;
    border-radius: 50% 90% 50% 80%;
    top: 2.5vmin;
    box-shadow: 0.5vmin 0 2vmin,
    -0.5vmin 0 2vmin;
}
.reflection::before{
    content: "";
    position: absolute;
    background: rgba(255, 123, 0, 1);
    color: rgba(255, 123, 0, 1);
    width: 40vmin;
    height: 7vmin;
    border-radius: 50% 90% 50% 80%;
    top: 2.5vmin;
    box-shadow: 0.5vmin 0 2vmin,
    -0.5vmin 0 2vmin;
    animation: tide 3s ease-in-out infinite;
}
.plop{
    background: rgba(255, 123, 0, 1);
    color: rgba(255, 123, 0, 1);
    position: relative;
    height: 10vmin;
    width: 30vmin;
    border-radius: 40% 80% 50% 70%;
    left: -38vmin;
    top: 25vmin;
    box-shadow: 0.5vmin 0 2vmin,
    -0.5vmin 0 2vmin;
    animation: popout 3s ease-in-out infinite;
}
@keyframes fade{
    50%{
        transform: translateY(0.3vmin) scale(1, 1.2);
    }
}
@keyframes tide{
    25%{
        transform: translateY(0.3vmin) scale(1, 1.2);
    }
    50%{
        transform: translateY(0.5vmin) scale(1.1, 1.2);
    }
    100%{
        transform: translateY(-1vmin) scale(0.7, 1.3);
    }
}
@keyframes popout{
    25%{
        transform: translate(0.5vmin, 0.5vmin) scaleX(0.8);
    }
    50%{
        transform: translate(1vmin, 1vmin) scaleX(0.6);
    }
    100%{
        transform: translate(2vmin, 3vmin) scaleX(0.3);
        height: 0vmin;
    }
}
.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #fff;
    text-align: center;
  }
  .footer a {
    text-decoration: none;
    color: red;
  }
  .footer a:hover {
    text-decoration: underline;
    color: #000
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.