.button-1 {
            position: relative;
            font-size: 22px;
            text-transform: uppercase;                
            text-decoration: none;
            padding: 1em 2.5em;
            display: inline-block;
            border-radius: 6em;
            transition: all .2s;                
            border: none;
            font-family: inherit;
            font-weight: {font_weight};
            color: inherit;
            background-color: white;
            }

            .button-1:hover {
                transform: translateY(-3px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            }

            .button-1:active {
                transform: translateY(-1px);
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            }

            .button-1::after {
                content: "";
                display: inline-block;
                height: 100%;
                width: 100%;
                border-radius: 100px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                transition: all .4s;
            }

            .button-1::after {
                background-color: #fff;
            }

            .button-1:hover::after {
                transform: scaleX(1.4) scaleY(1.6);
                opacity: 0;
            }



            .button-2 {
            border: 1.5px solid black;
            padding: 10px;
            width: 400px;
            margin: 15px;
            font-size:  22px;
            color: #373746 ;
            background-color: #f5f0f0;
            box-shadow: 3px 3px 6px #101014;
            transition: transform 0.3s ease-in-out;
            }
            
            .button-2:hover {
            background-color: #f5f0f0;
            color: #101014;
            transform: scale(1.2);
            }

            .button-3 {
            color: #090909;
            padding: 1em 2.5em;
            font-size: 22px;
            border-radius: 0.5em;
            background: #e8e8e8;
            border: 1px solid #e8e8e8;
            transition: all .3s;
            box-shadow: 6px 6px 12px #c5c5c5,
                        -6px -6px 12px #ffffff;
            }

            .button-3:hover {
            border: 1px solid white;
            }

            .button-3:active {
            box-shadow: 4px 4px 12px #c5c5c5,
                        -4px -4px 12px #ffffff;
            }

            .button-4 {
            background-color: white;
            color: black;
            border-radius: 10em;
            font-size: 22px;
            font-weight: 600;
            padding: 1em 2.5em;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            border: 1px solid black;
            box-shadow: 0 0 0 0 black;
            }

            .button-4:hover {
            transform: translateY(-4px) translateX(-2px);
            box-shadow: 2px 5px 0 0 black;
            }

            
            .button-4:active {
            transform: translateY(2px) translateX(1px);
            box-shadow: 0 0 0 0 black;
            }

            .button-5 {
                color: #ecf0f1;
                font-size: 22px;
                background-color: #212121;
                border: 1px solid #ffffff;
                border-radius: 5px;
                padding: 1em 2.5em;
                box-shadow: 0px 6px 0px #787878;
                transition: all 50ms;
                width: 400px;
            }

            .button-5:active {
                box-shadow: 0px 2px 0px #787878;
                position: relative;
                top: 2px;
            }