/*Made by Ers[Erlénio.RS]*/
*{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body{
        height: 100vh;
        background-color: black;
    }
    /*background: linear-gradient(200deg, #14ffe9,#ffeb3b, #ff00e0, #ff34, #2332);*/
    .clock{
        background: linear-gradient(200deg, #14ffe9,#ffeb3b, #001aff, #ff34, #2332);
        height: 320px;
        width: 320px;
        animation: animate 2s linear infinite;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        box-sizing: content-box;
        box-shadow: 15px 15px 35px rgba(0,0,0,0.2), inset 0 0 30px rgba(0,0,0,0.4);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .inner{
        position: absolute;
        height: 310px;
        width: 310px;
        border-radius: 50%;
        display: flex;
        background: rgb(0, 0, 0);
        justify-content: center;
        align-items: center;

        border: 2px solid rgb(34, 156, 71);
    }
    .number{
        position: absolute;
        font-size: 20px;
        font-weight: bold;
        color: white;
    }
    .number.twelve{
        top: 5%;
    }
    .number.three{
        right: 5%;
    }
    .number.six{
        bottom: 5%;
    }
    .number.nine{
        left: 5%;
    }
    .center{
        position: absolute;
        height: 8px;
        width: 8px;
        border-radius: 50%;
        background: blue;
        z-index: 2;
    }
    .num{
        position: absolute;
        background-color: white;
        height: 5px;
        width: 1px;
    }
    .num.one{
        right: 30%;
        top: 14%;
        transform: rotate(20deg);
    }
    .num.two{
        right: 14%;
        top: 30%;
        transform: rotate(60deg);
    }
    .num.four{
        right: 14%;
        bottom: 30%;
        transform: rotate(-60deg);
    }
    .num.five{
        right: 30%;
        bottom: 14%;
        transform: rotate(-20deg);
    }
    .num.eleven{
        left: 30%;
        top: 14%;
        transform: rotate(-20deg);
    }
    .num.ten{
        left: 14%;
        top: 30%;
        transform: rotate(-60deg);
    }
    .num.eight{
        left: 14%;
        bottom: 30%;
        transform: rotate(60deg);
    }
    .num.seven{
        left: 30%;
        bottom: 14%;
        transform: rotate(20deg);
    }
    .author{
        position: absolute;
        bottom: 25%;
        font-size: 40px;
        letter-spacing: 1px;
        background: linear-gradient(45deg, #184281, rgb(26, 131, 78));
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    #second{
        position: absolute;
        height: 90px;
        width: 1.5px;
        background: blue;
        border-radius: 10px;
        top: 21%;
        z-index: 23;
        transform-origin: bottom;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #second::after{
        position: absolute;
        content: "";
        height: 20px;
        width: 5px;
        top: 100%;
        background: blue;
    }
    #minute{
        position: absolute;
        height: 70px;
        width: 6px;
        background: rgb(35, 167, 18);
        border-radius: 20px 20px 0 0;
        top: 27%;
        transform-origin: bottom;
        transform: rotate(120deg);
    }
    #minute::after{
        position: absolute;
        content: "";
        height: 6px;
        width: 6px;
        
        background-color: rgb(35, 167, 18);
        transform: rotate(45deg);
    }
    #hour{
        position: absolute;
        height: 55px;
        width: 5px;
        background-color: chartreuse;
        transform-origin: bottom;
        top: 33%;
        transform: rotate(-90deg);
    }
    #hour::after{
        position: absolute;
        content: "";
        height: 5px;
        width: 5px;
        top: -5%;
        background-color: chartreuse;
        transform: rotate(45deg);
    }
    span{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: 100%;
        background: inherit;
        border-radius: 50%;
    }
    span:first-child{
        filter: blur(10px);
    }
    span:last-child{
        filter: blur(20px);
    }
    span.outer{
        background: blue;
    }
    #time{
        font-size: 17px; 
        font-weight: 900;
        letter-spacing: 1px;
        background: linear-gradient(135deg,#ff00e0, #14ffe9,#ffeb3b );
        -webkit-background-clip: text;
        background-clip: text;
        bottom: 18%;
        position: absolute;
        -webkit-text-fill-color: transparent;
        animation: animate 1.5s linear infinite;
    }
    .wrapper{
            height: 50px;
            width: 150px;
            box-shadow: 0 5px 10px rgba(0,0,0,0.4);
            background: linear-gradient(135deg, #14ffe9,#ffeb3b, #ff00e0);
            position: absolute;
            bottom: 16px;
            left: 50%;
            border-radius: 10px;
            cursor: default;
            animation: animate 2s linear infinite;
            transform: translateX(-50%);
        }
        .display{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            background: rgb(0, 0, 0);
            height: 45px;
            width: 145px;
            display: flex;
            border-radius: 10px;
            align-items: center;
            justify-content: center;
        }
        #follow-bt{
            color: white;
            font-weight: 500;
            font-size: 26px;
            text-decoration: none;
            font-family: cursive;
            background: linear-gradient(90deg,#ff00e0, #14ffe9,#ffeb3b );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: animate_reverse 5s linear infinite;
        }
    @media (max-width: 350px),(max-height: 350px) {
        .clock{
            width: 250px;
            height: 250px;
        }
        .inner{
            width: 240px;
            height: 240px;
        }
        #second{
            height: 60px;
            top: 24%;
        }
        #minute{
            top: 29%;
            height: 50px;
        }
        #hour{
            height: 35px;
            top: 36%;
        }
    }
    @keyframes animate {
        100%{
            filter: hue-rotate(360deg);
        }
    }
    @keyframes animate_reverse {
        100%{
            filter: hue-rotate(-360deg);
        }
    }
    span.f{
        border-radius: 10px;
    }
/*Made by Ers[Erlénio.RS]*/