canvas {
    cursor: default;
    outline: none;
}

body {
    background-color: #222222;
}

.superdev {
    color: rgb(37, 37, 37);
    text-shadow: 0px 1px 1px rgba(250, 250, 250, 0.1);
    font-size: 50pt;
    display: block;
    position: relative;
    text-decoration: none;
    background-color: rgb(83, 87, 93);
    box-shadow: 0px 3px 0px 0px rgb(34, 34, 34), 0px 7px 10px 0px rgb(17, 17, 17), inset 0px 1px 1px 0px rgba(250, 250, 250, .2), inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
    width: 70px;
    height: 70px;
    border: 0;
    border-radius: 35px;
    text-align: center;
    line-height: 68px;
}

.superdev:active {
    box-shadow: 0px 0px 0px 0px rgb(34, 34, 34), 0px 3px 7px 0px rgb(17, 17, 17), inset 0px 1px 1px 0px rgba(250, 250, 250, .2), inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83, 87, 93);
    top: 3px;
    color: #fff;
    text-shadow: 0px 0px 3px rgb(250, 250, 250);
}

.superdev:hover {
    background-color: rgb(100, 100, 100);
}

<style>@media screen {
    html {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        /* min-height: 100vh; */
        max-height: fit-content;
    }
}

.ontop {
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    position: absolute;
    background-color: #000000;
    color: #000000;
    opacity: .9;
    filter: alpha(opacity=100);
}

#fname {
    background-color: rgb(219, 206, 188);
    font-weight: bold;
    color: rgb(88, 66, 18);
    border: 2px solid goldenrod;
}

#popup {
    width: 300px;
    height: 100px;
    position: absolute;
    /* color: #000000; */
    color: rgb(88, 66, 18);
    ;
    font-weight: bold;
    background-color: tan;
    /* To align popup window at the center of screen*/
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    border-style: outset;
    border: 4px solid #c56d08d8;
    border-radius: 8px;
}

.button {
    padding: 15px 20px;
    font-size: 15px;
    font-weight: bolder;
    /* -webkit-text-stroke: 1px rgb(19, 102, 26) ; */
    text-align: center;
    cursor: pointer;
    outline: none;
    color: white;
    /* text-shadow: 1px 1px 2px black, 0 0 25px greenyellow, 0 0 5px green; */
    background-color: #65e969;
    border: none;
    border-radius: 15px;
    box-shadow: 0 3px rgb(54, 52, 52);
    height: 40px;
}

.button:hover {
    background-color: green
}

.button:active {
    background-color: #65e969;
    box-shadow: 0 3px rgb(54, 52, 52);
    transform: translateY(2px);
}

</style>