

body { 
padding: 20px;}

.h1 {
    color: green;
}
:root {
    --text: #2B3044;
    --line: #BBC1E1;
    --line-active: #275EFE;
}

:root {
    --text: #2B3044;
    --line: #BBC1E1;
    --line-active: #275EFE;
}

.list {
    font-size: 18px;
    margin: 0;
    color: var(--text);
    a {
        display: inline-block;
        position: relative;
        text-decoration: none;
        color: inherit;
        margin: 0 var(--spacing, 1px);
        transition: margin .35s;
        svg {
            width: 76px;
            height: 40px;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translate(-50%, 7px) translateZ(0);
            fill: none;
            stroke: var(--stroke, var(--line));
            stroke-linecap: round;
            stroke-width: 2px;
            stroke-dasharray: var(--offset, 69px) 278px;
            stroke-dashoffset: 361px;
            transition: stroke .25s ease var(--stroke-delay, 0s), stroke-dasharray .35s;
        }
        &:hover {
            --spacing: 1.5px;
            --stroke: var(--line-active);
            --stroke-delay: .1s;
            --offset: 180px;
        }
    }
}

html {
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

.linkedin {
    height: 20px;
}

.linkedin {
  transition: transform .2s; /* Animation */
  height: 20px;
  margin: auto;
}

.linkedin:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.email {
  transition: transform .2s; /* Animation */
  height: 20px;
    margin: auto;}

.email:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */}

.waving:before {
content: attr(data-hover);
}

.waving:hover {
animation-name: wave-animation;
animation-duration: 3.0s;
animation-iteration-count: infinite;
transform-origin: 70% 70%;
}

@keyframes wave-animation {
0% {
transform: rotate( 0.0deg)
}
10% {
transform: rotate(14.0deg)
}
20% {
transform: rotate(-8.0deg)
}
30% {
transform: rotate(14.0deg)
}
40% {
transform: rotate(-4.0deg)
}
50% {
transform: rotate(10.0deg)
}
60% {
transform: rotate( 0.0deg)
}
100% {
transform: rotate( 0.0deg)
}
}