body{
    justify-content: center;
    justify-items: center;
    align-items: center;
    display: flex;
}

.light{
    background: linear-gradient(45deg, rgb(255, 254, 254), rgb(177, 176, 176), rgb(109, 109, 109)) fixed;

}
.dark{
    background: linear-gradient(45deg, rgb(57, 56, 56), rgb(44, 44, 44), rgb(3, 3, 3)) fixed;
}
/* ================================================================================================================================ */
.h1{
    color: black;
    font-size: 10vmax;
}
.h2{
    color: white;
    font-size: 10vmax;
}
.txt{
    margin: 10vmax;
}
/* ================================================================================================================================== */
.btn_1{
    color: black;
    font-size: larger;
    width:140px ;
    height:70px ;
    background-color:white ;
    border:2px red solid ;
    border-radius:  30px; ;
}
.btn_2{
    color: white;
    font-size: larger;
    width:140px ;
    height:70px ;
    background-color: black;
    border:2px red solid ;
    border-radius:  30px; ;
}

.btn_1:hover{
    background-color: darkgray;
    cursor: pointer;
}
.btn_2:hover{
    background-color: darkgray;
    cursor: pointer;
}

@keyframes for_btn{
    0%{transform: translateY(0px);}
    50%{transform: translateY(2px);}
    100%{transform: translateY(-2px);}
    
}

/* :active = hold */
/* :enabled = at first */

.btn_1:active{
animation: for_btn 0.8s ease;
}
.btn_2:active{
animation: for_btn 0.8s ease;
}