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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #06181f;
}

.container {
    position: relative;
    width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex-direction: column; */
    flex-wrap: wrap;
}

.container .icon {
    width: 275px;
    cursor: pointer;
}

.container .icon path {
    fill: transparent;
    stroke: #31e8ff;
    stroke-width: 10;
}

.container .icon.heart path {
    stroke-dasharray: 1560;
    stroke-dashoffset: 0;
}

.container .icon.heart:hover path {
    animation: animate-heart 2s linear forwards;
}

@keyframes animate-heart {
    0% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: 1560;
    }

    80% {
        stroke-dashoffset: 3120;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 3120;
        fill: rgb(255, 0, 0);
        stroke: rgb(255, 0, 0);
    }
}

.container .icon.star path {
    stroke-dasharray: 1810;
    stroke-dashoffset: 0;
}

.container .icon.star:hover path {
    animation: animate-star 2s linear forwards;
}

@keyframes animate-star {
    0% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: 1810;
    }

    80% {
        stroke-dashoffset: 3620;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 3620;
        fill: #e6ff05;
        stroke: #eeff05;
    }
}

.container .icon.moon path {
    stroke-dasharray: 1560;
    stroke-dashoffset: 0;
}

.container .icon.moon:hover path {
    animation: animate-moon 2s linear forwards;
}

@keyframes animate-moon {
    0% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: 1810;
    }

    80% {
        stroke-dashoffset: 3120;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 3120;
        fill: white;
        stroke: black;
    }
}

.container .icon.rocket path {
    stroke-dasharray: 1560;
    stroke-dashoffset: 0;
}

.container .icon.rocket:hover path {
    animation: animate-rocket 3.5s linear forwards;
}

@keyframes animate-rocket {
    0% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: 1560;
    }

    80% {
        stroke-dashoffset: 3120;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 3120;
        fill: #31e8ff;
    }
}

.container .icon.sun path {
    stroke-dasharray: 1560;
    stroke-dashoffset: 0;
}

.container .icon.sun:hover path {
    animation: animate-sun 3.5s linear forwards;
}

@keyframes animate-sun {
    0% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: 1560;
    }

    80% {
        stroke-dashoffset: 3120;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 3120;
        fill: yellow;
        stroke: yellow;
    }
}

.container .icon.eagle path {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    stroke-width: 145;
    stroke: #31e8ff;
}

.container .icon.eagle:hover path {
    animation: animate-eagle 1.5s linear forwards;
}

@keyframes animate-eagle {
    0% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: 500;
    }

    80% {
        stroke-dashoffset: 1000;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 1000;
        fill: white;
        stroke: red;
    }
}

@media screen and (min-width: 300px) and (max-width: 800px)  {
    .container {
        width: 100%;
        margin-top: 40px;
        flex-direction: column;
    }
}