@font-face {
    font-family: 'ScreenMatrix';
    src: url("/fonts/ScreenMatrix.ttf") format("truetype");
}

* {
    font-family: 'ScreenMatrix', sans-serif;
    color: #fff;
}

body,html {
    background: #B20101;
    background: linear-gradient(-135deg,rgba(178, 1, 1, 1) 0%, rgba(92, 6, 6, 1) 100%) fixed;
}

body {
    margin: 5%;
}

.baton {
    text-decoration: none;
    display: inline-block;
    margin: 1%;
    background-color: #d96c6c;
    border-radius: 10px;
    padding: 0.5%;
    transition: all 0.3s ease;
}

.baton:hover {
    background-color: #fd9f9f;
    transform: scale(1.25);
    transition: all 0.3s ease;
}

.navbar {
    top: 1%;
    right: 1%;
    position: fixed;
    text-align: right;
}

.navbar-item {
    display: inline-block;
    text-decoration-color: greenyellow;
    transition: all 0.3s ease;
    transform-origin: right;
}

.navbar-item:hover {
    text-decoration-color: yellow;
    transform: scale(1.5);
    transition: all 0.3s ease;
}

.nvbr-down {
    position: fixed;
    bottom: 1%;
    right: 1%;
}

.hry {
    text-align: center;
    background-color: #e49500a1;
    border-radius: 1em;
    margin: 1%;
}

.hra {
    height: 50%;
    width: 50%;
    margin: 1%;
    border-radius: 1em;
    background: #6e2222;
    margin-left: auto;
    margin-right: auto;
}