/*
Main CSS
Name: Tomislav Bartolic
Date: 14.5.2020.
Project: Animation SVG icons
*/
*{
    margin:0;
    padding:0;
}
html, body {
    width:100%;
    height:100%;
}

body{
    display:flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: linear-gradient(-90deg,rgb(9, 84, 105) , rgb(18, 40, 66));
}
.container{
    position: relative;
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container .icon{
    width: 200px;
}

.container .icon path{
    fill:transparent;
    stroke-width:10;
    stroke: #13dde8;
}
/* boy icon */
.container .icon.boy path{
    stroke-dasharray: 4500;
    stroke-dashoffset: 0;
}
.container .icon.boy:hover path{
    cursor: pointer;
    animation: animate-boy 2s linear forwards
}
/* animacija */
@keyframes animate-boy{
    0%
    {
        stroke-dashoffset: 0;
    }
    40%
    {
        stroke-dashoffset: 4500;
    }
    80%
    {
        stroke-dashoffset: 9000;
        fill:transparent;
    }
    100%
    {
        stroke-dashoffset: 9000;
        fill:transparent;
    }
}

/* love icon */
.container .icon.love path{
    stroke-dasharray: 1600;
    stroke-dashoffset: 0;
}
.container .icon.love:hover path{
    cursor: pointer;
    animation: animate-love 2s linear forwards
}
/* animacija */
@keyframes animate-love{
    0%
    {
        stroke-dashoffset: 0;
    }
    40%
    {
        stroke-dashoffset: 1600;
    }
    80%
    {
        stroke-dashoffset: 3200;
        fill:transparent;
    }
    100%
    {
        stroke-dashoffset: 3200;
        fill:#13dde8;
    }
}


/* beer icon */
.container .icon.beer path{
    stroke-dasharray: 2100;
    stroke-dashoffset: 0;
}
.container .icon.beer:hover path{
    cursor: pointer;
    animation: animate-beer 2s linear forwards
}
/* animacija */
@keyframes animate-beer{
    0%
    {
        stroke-dashoffset: 0;
    }
    40%
    {
        stroke-dashoffset: 2100;
    }
    80%
    {
        stroke-dashoffset: 4200;
        fill:transparent;
    }
    100%
    {
        stroke-dashoffset: 4200;
        fill:transparent;
    }
}