@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap"); :root {
        --accent-color: #aefc32;
        --base-color: black;
    }

    .hamburg {
        position: block;
        width: 40px;
        height: auto;
        padding: .6rem;
        background-color: var(--base-color);
        border-radius: 10px;
        z-index: 80;
        box-shadow: 0px 0px 12px 1px rgba(255, 145, 0, 0.7);
    }

    .ard-sosmed {
        display: block;
        cursor: pointer;
        position: fixed;
        bottom: 20%;
        left: 10px;
        font-family: "Raleway", sans-serif;
        z-index: 79;
    }

    .ard-sosmed ul {
        margin: 0;
        padding: 0;
    }

    .ard-sosmed ul li {
        position: absolute;
        text-decoration: none;
        list-style: none;
        transform: translate(0, 0) rotate(360deg);
        transition: all .5s ease;
        opacity: 0;
    }

    .ard-sosmed.open ul li:nth-child(1) {
        transform: translateY(-150px);
        transition-delay: .20s;
        opacity: 1;
    }

    .ard-sosmed.open ul li:nth-child(2) {
        transform: translate(52px, -125px);
        transition-delay: .16s;
        opacity: 1;
    }

    .ard-sosmed.open ul li:nth-child(3) {
        transform: translate(105px, -100px);
        transition-delay: .12s;
        opacity: 1;
    }

    .ard-sosmed.open ul li:nth-child(4) {
        transform: translate(150px, -105px);
        transition-delay: .08s;
        opacity: 1;
    }

    .ard-sosmed.open ul li:nth-child(5) {
        transform: translate(175px, -52px);
        transition-delay: .04s;
        opacity: 1;
    }

    .ard-sosmed.open ul li:nth-child(6) {
        transform: translateX(200px);
        transition-delay: 0s;
        opacity: 1;
    }

    .ard-sosmed ul li a img {
        width: 90%;
        height: auto;
    }

    .ard-sosmed ul li a {
        display: flex;
        width: 55px;
        height: 55px;
        border: solid 2px var(--accent-color);
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        background-color: black;
    }

    .bar1, .bar2, .bar3 {
        width: 80%;
        height: 5px;
        background-color: var(--accent-color);
        margin: 6px auto;
        transition: .4s;
        position: relative;
        transform: translateY(-1px);
    }

    .open .bar1 {
        transform: translate(0, 10px) rotate(-225deg);
    }

    .open .bar2 {
        opacity: 0;
        transform: translate(0, -6px) rotate(-225deg);
    }

    .open .bar3 {
        transform: translate(0, -12px) rotate(-315deg);
    }

    .ard-sosmed ul li div {
        position: absolute;
        transition: all .3s ease;
        opacity: 0;
        scale: .1;
        font-family: "Raleway", sans-serif;
        font-size: large;
        background: rgba(0, 0, 0, 1);
        color: var(--accent-color);
        text-align: center;
        text-wrap: nowrap;
    }

    .ard-sosmed ul li:hover div {
        opacity: 1;
        scale: 1;
    }

    .ard-sosmed ul li:nth-child(1) div {
        transform: translateY(-120px);
    }

    .ard-sosmed ul li:nth-child(1):hover div {
        transform: translateY(-95px);
    }

    .ard-sosmed ul li:nth-child(2) div {
        transform: translateY(-150px);
    }

    .ard-sosmed ul li:nth-child(2):hover div {
        transform: translate(30px, -95px);
    }

    .ard-sosmed ul li:nth-child(3) div {
        transform: translateY(-150px);
    }

    .ard-sosmed ul li:nth-child(3):hover div {
        transform: translate(50px, -90px);
    }

    .ard-sosmed ul li:nth-child(4) div {
        transform: translateX(160px);
    }

    .ard-sosmed ul li:nth-child(4):hover div {
        transform: translate(50px, -90px);
    }

    .ard-sosmed ul li:nth-child(5) div {
        transform: translate(110px, 70px);
    }

    .ard-sosmed ul li:nth-child(5):hover div {
        transform: translate(62px, -80px);
    }

    .ard-sosmed ul li:nth-child(6) div {
        transform: translate(55px, 135px);
    }

    .ard-sosmed ul li:nth-child(6):hover div {
        transform: translate(65px, -65px);
    }

    .attention {
        position: relative;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%);
        width: 80px;
        text-wrap: nowrap;
        height: 30px;
        margin-bottom: 5px;
        left: 15px;
        background-color: var(--base-color);
        cursor: default;
        color: var(--accent-color);
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
        opacity: 0;
    }

    .whore {
        animation: flicker .6s infinite;
        &:hover {
            animation-duration: 10s;
        }
    }

    @keyframes flicker {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @media screen and (max-width: 600px) {
        .ard-sosmed {
            bottom: 10%;
        }
    }