@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");

        :root {
            --border-col: #F83600;
            --base-col: #FFFFFF;
            --btn-col: #000000;
            --base-mid-col: #000000;
            --base-side-col: #F83600
        }

        .ard-sosmed-bar {
            display: flex;
            gap: 5px;
            background-color: transparent;
            width: auto;
            height: auto;
            bottom: 15%;
            left: 0;
            position: fixed;
            z-index: 125;
            transition: all .7s ease;
            font-family: "Raleway", sans-serif;
            font-size: 20px !important
        }

        .ard-sosmed-bar.closed {
            transform: translate(-77%, 0);
            opacity: .8
        }

        .ard-sosmed-bar.closed:hover {
            opacity: .85
        }

        .ard-sosmed-bar.open {
            transform: translate(0, 0)
        }

        .ard-sosmed-bar .left {
            display: flex;
            flex-direction: column;
            background-color: #500086bf;
            border: 2px solid #ffffff;
            z-index: 98;
            width: 135px;
            border-radius: 15px;
            padding: 5px;
            align-items: center;
            justify-items: center;
            gap: 10px
        }

        .left div {
            width: 75%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--btn-col);
            border-radius: 10px;
            padding: 5px
        }

        .headlogo {
            width: 80%
        }

        .left div a {
            text-decoration: none;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: large;
            font-weight: bold;
            color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden
        }

        .ard-sosmed-bar .right {
            display: flex;
            flex-direction: row;
            background: radial-gradient(circle, #71359b 0, var(--base-mid-col) 100%);
            width: 40px;
            padding: 10px 0 10px 0;
            z-index: 99;
            border-radius: 15px;
            align-items: center;
            justify-content: center;
            cursor: pointer
        }

        .ard-sosmed-bar .right span:first-child {
            width: 100%;
            opacity: 1
        }

        .ard-sosmed-bar .right span:last-child {
            width: 0;
            opacity: 0
        }

        .ard-sosmed-bar a,
        .ard-sosmed-bar span {
            text-align: center;
            color: #ca9b18;
            -webkit-text-stroke: 1px black;
            user-select: none
        }

        .ard-sosmed-bar .right span {
            writing-mode: vertical-rl;
            text-orientation: upright;
            color: #ffffff;
            transition: all .4s ease;
            display: flex;
            align-items: center
        }

        .ard-sosmed-bar .left div a img {
            height: 100%;
            overflow: hidden !important
        }

        .bar-footer {
            font-size: medium
        }

        .ard-sosmed-bar.closed.ardhide {
            transform: translate(-75.5%, 0)
        }

        @media screen and (max-width:600px) {
            .ard-sosmed-bar {
                scale: .7
            }

            .ard-sosmed-bar.closed {
                transform: translate(-98.5%, 0)
            }

            .ard-sosmed-bar.open {
                transform: translate(-21%, 0)
            }
        }