@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto/Roboto_Default.ttf");
}

body {
font-family: 'Roboto';
background: rgba(0,0,0,0.5), url("../images/wallpapers/characters.jpg");
background-position: top right;
background-repeat: no-repeat;
background-size: fill;

}

h1 {
text-shadow: 10px 0px 10px 0px rgba(0,0,0,0.25);
font-size: 100px;
}

button {
backdrop-filter: blur(3px);
    padding: 5px 25px;
    border: 1px solid rgba(243, 243, 243, 0);
    outline: 2px solid rgba(243,243,243,0.25);
    -moz-box-shadow: 0 0 0 1px #707070;
    -webkit-box-shadow: 0 0 0 1px #707070;
    box-shadow: 0 0 0 1px rgba(112, 112, 112, 1), 0px 5px 15px 0px rgba(150,150,150,0.75);
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
    background: -moz-linear-gradient(top, rgba(242, 242, 242, 0.5)
 0%, rgba(235, 235, 235, 0.5)
 50%, rgba(221, 221, 221, 0.5)
 51%, rgba(207, 207, 207, 0.5)
 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(242, 242, 242, 0.75)), color-stop(0.5,rgba(235, 235, 235, 0.75)),color-stop(0.51,rgba(221, 221, 221, 0.75)),color-stop(1,rgba(207, 207, 207, 0.5)));
    background: linear-gradient(top, rgba(242, 242, 242, 0.75) 0%, rgba(235, 235, 235, 0.75) 50%, rgba(221, 221, 221, 0.75) 51%, rgba(207, 207, 207, 0.75) 100%);
    font-size: 30px;
    transition: all 0.05s ease-out;
cursor: pointer;
display: block;
}

button:hover {
backdrop-filter: blur(7px);
transform: scale(1.025);
}

button:active {
backdrop-filter: blur(1px);
transform: scale(0.98);
}