:root {
    --background: #848C8E;
    --dark: #303036;
    --peach: #FB8B24;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

footer {
  position: absolute;
  bottom:50px;
  margin-left: auto;
  margin-right: auto;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
}

.box{
    position: relative;
    display: inline;
    background: var(--peach);
    border: 0.25rem solid var(--dark);
    height: 8rem;
    width: 8rem;
    outline: 0;
    border-radius: 20%;
    overflow: hidden;
}

.box::before{
    content: url(/images/G.svg);
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}

.box::after{
    content: "";
    position: absolute;
    bottom: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background: var(--background);
    border-radius: 40%;
    animation: water 6s ease-in-out forwards;
}

@keyframes water {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(-100%) rotate(500deg);
    }
}