/* :::: metal Button stylesheet @konrad-von-wittich :::: */
*{margin: 0; padding: 0; box-sizing: border-box;}

:root{
    font-family: monospace;
    font-size: 100%;
}

body{ 
    width: 100%;
    height: 100%;
    margin: 0em auto;
    background-image: linear-gradient(180deg,
    rgb(56, 56, 56), 
    rgb(133, 131, 131)20%,
    rgb(160, 160, 160)30%,
    rgb(255, 255, 255, 0.25)46% 50%,
    rgb(199, 199, 199)60%,
    rgb(160, 160, 160)70%,
    rgb(133, 131, 131)80%,
    rgb(71, 71, 71));
}

.wrap{ 
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100vh;
}

.button{ 
    position: relative;
    flex-basis: auto;
    cursor:pointer;
    width: 32rem;
    height:14rem;  
    border: 0.12rem solid rgb(82, 82, 82);  
    border-radius: 2rem;
    background-image: 
    linear-gradient(180deg,
    rgb(99, 99, 99)3%, 
    rgb(36, 36, 36, 0.4)6%,
    rgb(133, 131, 131)8%,
    rgb(160, 160, 160, 0.6)10%,
    rgb(255, 255, 255, 0.4)14%,
    rgb(199, 199, 199, 0.4)16%, 
   
    rgb(160, 160, 160)30%,
    rgb(255, 255, 255, 0.4)49%,
    rgb(199, 199, 199)50%,
    rgb(255, 255, 255, 0.4)52%,

    rgb(199, 199, 199, 0.4)58%, 
    rgb(160, 160, 160)70%,
    rgb(255, 255, 255, 0.4)88%,

    rgb(133, 131, 131, 0.6)90%,
    rgb(99, 99, 99, 0.1)95%,
    rgb(133, 131, 131)95.5%,
    rgb(87, 87, 87));
    
    box-shadow:
    inset 
    0.6rem 0.8rem 1rem 
    rgb(231, 231, 231),
    
    0.4rem 0.4rem 0.9rem 
    rgb(0, 0, 0),

    -0.04rem -0.04rem 0.6rem 
    rgb(0, 0, 0),

    -0.3rem -0.02rem 0.4rem 
    rgb(255, 255, 255), 

    inset 
    -0.4rem -0.6rem 0.12rem
     rgba(0, 0, 0, 0.4);



     transition: border 0.1s ease;
}

.button::before{
    content: '';
    z-index: -1;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
    background-image: linear-gradient(
    rgb(43, 43, 43),
    rgb(58, 58, 58)5%,
    rgb(71, 71, 71)10%,
    rgb(196, 196, 196));
    width: 33em;
    height: 15em;
  
    box-shadow: 
    0.2rem 0.4rem 2rem 
    rgb(82, 82, 82), 
    -0.8rem -0.8rem -1.5rem
    rgba(10, 10, 10, 0.25);
}

.button::after{
    content: '';
    z-index: -2;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
    width: 33.3em;
    height: 15.3em;
    box-shadow: 
     0.1rem 0.1rem 8rem 
     rgba(68, 68, 68, 0.4),
     0.1rem 0.1rem 8rem
     rgba(10, 10, 10, 0.4);
}

.text{ 
    font-size: 8rem;
    font-weight: 700;
    color: rgb(95, 95, 95);
    text-shadow: 
    -0.01em -0.02em 0.025em
     rgba(0, 0, 0),
     0.02em 0.01em 0.03em
     rgb(245, 245, 245);
}

/* :::: toggle classList for Java Script :::: */
.pushButton{
    border: 0.25rem solid rgba(255, 255, 255, 0.4);
    transition: border 0.1s ease; 
}
.pushText{
    color: rgba(0, 0, 0);
}