@font-face {
    font-family: "Rayman Origins";
    src: url('Rayman Origins.ttf') format('truetype'),
        url('Rayman Origins.eot'),
        url('Rayman Origins.eot?#iefix') format('embedded-opentype'),
        url('Rayman Origins.woff2') format('woff2'),
        url('Rayman Origins.woff') format('woff'),
        url('Rayman Origins.svg#RaymanOrigins') format('svg'),
        url('Rayman Origins.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: antialiased;
}
*{
 font-family: "Rayman Origins" !important;
 color: black;
}
h1, h2, p, h3, h4
{
    text-align: center;
}
.box
{
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}
menu .counter
{
display: inline-block;
}
.counter
{
display: inline-block;
width:200px;
text-align: center;
}
.edit
{
display: inline-block;
padding-left: 15%;
margin-left: 0px;
margin: 20px;
}
main
{
    margin-left: auto;
    margin-right: auto;
    width: 360px;
}
table
{
    margin-top: 20px;
border: 1px solid black;
border-collapse: collapse;
margin-bottom: 20px;
}
td
{
border: 1px solid black;
padding: 10px;
text-align: center;
}
td input
{
margin: 10px;
}
.closed{
    display: none;
}
img
{
width: 64px;
height: 64px;
margin: 0;
}

footer
{
margin-left: 42%;
margin-right: auto;
}

table:nth-child(2)
{
text-transform: lowercase;
}
@media only screen and (max-device-width: 480px) 
{

h1
{
    text-align: center;
    margin-left: 5%;
}
.box
{
    margin-left: auto;
    margin-right: auto;
    width: 270px;
}
.counter
{
  padding-left: 13%;
}
.edit
{
padding-left: 0%;
}
td
{
border: 1px solid black;
padding: 2px;
}
main
{
    margin-left: auto;
    margin-right: auto;
    width: 270px;
}
menu
{
    padding: 0;
}
img
{
width: 64px;
height: 64px;
margin: 0;
}
footer
{
margin-left: 31%;
margin-right: auto;
}
}