Html5 bir oyun var ama css bilgim yok.
Ben oyunun oynanırken boyutunun küçük olmasını istiyorum. Ana menü tarayıcı boyutuna göre ayarlıyor.

Css dosyası :

  html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
  article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    display: block;
}
  canvas {
    position:absolute;
    image-rendering:optimizeSpeed;
}
  #background, #textCanvas, #foreground, #cursor {
    margin: 0;
    padding: 0;
}
  #container {
    z-index: 100;
    background: rgba(0, 0, 0, 0.2);
    -moz-transition: 1s opacity linear 0.5s;
    -webkit-transition: 1s opacity linear 0.5s;
    -o-transition: 1s opacity linear 0.5s;
    transition: 1s opacity linear 0.5s;
}
  footer {
    font-family: 'AdvoCut', sans-serif;
    position: absolute;
    bottom: 5%;
    left: 0;
    text-align: center;
    width: 100%;
    color: #c6c0a3;
    -moz-transition: 0.2s opacity linear;
    -webkit-transition: 0.2s opacity linear;
    -o-transition: 0.2s opacity linear;
    transition: 0.2s opacity linear;
    font-size: 16px;
}
  .sub-forum-link {
    color: #c6c0a3;
}
  .link:hover {
    cursor: pointer;
    color: #d83939;
}
  #about-link span:hover, #credits-link span:hover, #git-link span:hover, #forums-link span:hover, .sub-forum-link:hover {
    color: #fcda5c;
    cursor: pointer;
}
  .game footer {
    color: #8a8a8a;
}
  .intro footer, footer:hover {
    opacity: 1;
}
  .game footer {
    opacity: 0;
}
  footer div {
    display: inline-block;
}
  #canvas, #foreground, #background, #textCanvas, #container, #border, #footer, #cursor {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
  #foreground, #background, #entities, #cursor {
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}
  .parchment-left, .parchment-middle, .parchment-right, #respawn {
    background: url('../img/3/spritesheet.png');
    image-rendering: -moz-crisp-edges;
}
  #death p {
    margin-top: 10%;
}
  #respawn {
    margin-top: 5%;
}
  #parchment, #parchment input, #parchment select {
    font-family: 'AdvoCut', sans-serif;
}
  #parchment input {
    width: 50%;
    background: rgba(0, 0, 0, 0.05);
    text-align: center;
    color: #eee;
    -moz-animation: glow 0.5s linear infinite alternate;
    -webkit-animation: glow 0.5s linear infinite alternate;
    -o-animation: glow 0.5s linear infinite alternate;
    animation: glow 0.5s linear infinite alternate;
}
  #parchment input:focus {
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
      -moz-animation: none;
    -webkit-animation: none;
    -o-animation: none;
    animation: none;
}
  #parchment input.field-error {
    background: rgba(255, 0, 0, 0.1);
    border-color: #f84444;
}
  #parchment select {
    width: 25%;
    background: rgba(0, 0, 0, 0.05);
    text-align: center;
    color: black;
}
  #intro {
    -moz-transition: 0.4s opacity linear;
    -webkit-transition: 0.4s opacity linear;
    -o-transition: 0.4s opacity linear;
    transition: 0.4s opacity linear;
}
  #alert {
    height: 50px;
    width: 100%;
    background: #d83939;
    color: #eee;
    font-size: 20px;
    font-family: 'AdvoCut', arial, sans-serif;
    text-align: center;
    line-height: 50px;
    border-bottom: 1px solid #000;
}
  .intro footer {
    opacity: 1;
}
  #intro {
    -moz-transition: 0.4s opacity linear;
    -webkit-transition: 0.4s opacity linear;
    -o-transition: 0.4s opacity linear;
    transition: 0.4s opacity linear;
}
  #parchment {
    opacity: 0;
  }
  .intro #logo, .intro #parchment {
    opacity: 1;
}
  .intro #container {
    opacity: 0;
    pointer-events: none;
}
  #parchment p {
    font-family: 'AdvoCut', sans-serif;
}
  #credits, #git, #about, #loadCharacter, #createCharacter, #death, #ask, #error {
    opacity: 0;
    pointer-events: none;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
  #credits, #about, #git, #death, #ask, #error, #loadCharacter, #createCharacter {
    position: absolute;
    left: 50%;
    text-align: center;
    font-family: 'AdvoCut', sans-serif;
    z-index: 1000;
}
  .credits #credits, .about #about, .git #git, .death #death, .ask #ask, .error #error, .createCharacter #createCharacter, .loadCharacter #loadCharacter {
    opacity: 1;
    pointer-events: auto;
    -moz-transition: 0.5s opacity linear;
    -webkit-transition: 0.5s opacity linear;
    -o-transition: 0.5s opacity linear;
    transition: 0.5s opacity linear;
}
  #credits, #about, #death, #ask, #git {
    top: 50%;
}
  
.parchment-left {
    position: absolute;
    top: 0;
    left: 0;
}
  .parchment-right {
    position: absolute;
    top: 0;
    right: 0;
}
  .parchment-middle {
    position: absolute;
    left: 50%;
    top: 0;
}
  .animate .parchment-left {
    -moz-animation: parchleft 1s ease-in-out 1;
    -webkit-animation: parchleft 1s ease-in-out 1;
    -o-animation: parchleft 1s ease-in-out 1;
    animation: parchleft 1s ease-in-out 1;
}
  .animate .parchment-right {
    -moz-animation: parchright 1s ease-in-out 1;
    -webkit-animation: parchright 1s ease-in-out 1;
    -o-animation: parchright 1s ease-in-out 1;
    animation: parchright 1s ease-in-out 1;
}
  #createCharacter form {
    position: relative;
}
  .loader {
    position: relative;
    margin-top: 25%;
}
  #container {
    top: 48%;
    left: 50%;
}
  
@media only screen and (min-width: 1501px) {
      .intro footer {
        font-size: 28px;
    }
      #credits, #about, #death, #ask, #git {
        width: 1266px;
        height: 546px;
        margin-left: -633px;
        margin-top: -273px;
        font-size: 30px;
    }
      #border {
        position: absolute;
        width: 1470px;
        height: 780px;
        left: 50%;
        top: 0;
        margin-left: -735px;
        border: 0;
        padding: 15px;
        background: url('../img/3/border.png') no-repeat 0 0;
    }
      #container {
        width: 1470px;
        height: 798px;
        margin: -378px auto auto -735px;
        position: absolute;
    }
      .parchment-left, .parchment-middle, .parchment-right, #respawn {
        background: url('../img/3/spritesheet.png');
        image-rendering: -moz-crisp-edges;
    }
      .parchment-left, .parchment-middle, .parchment-right {
        background-size: 1266px;
    }
      .parchment-left {
        width: 114px;
        height: 546px;
        background-position: 0 -882px;
    }
      .parchment-middle {
        width: 1038px;
        height: 546px;
        background-position: -114px -882px;
        margin-left: -519px;
    }
      .parchment-right {
        width: 114px;
        height: 546px;
        background-position: -1152px -882px;
    }
      #parchment, #createCharacter, #loadCharacter, #error {
        width: 1266px;
        height: 546px;
        position: absolute;
        top: 55%;
        left: 50%;
        margin-left: -633px;
        margin-top: -273px;
        font-size: 20px;
        text-align: center;
        z-index: 1000;
    }
      #parchment input, #parchment select {
        padding: 0 15px;
        border: 3px dashed #b2af9b;
        font-size: 30px;
        border-radius: 9px;
    }
      #parchment input {
        margin-top: 30px;
        height: 60px;
    }
      #parchment select {
        margin-top: 24px;
        height: 48px;
        width: 23%;
    }
      #parchment.createCharacter input {
        margin-top: 24px;
        height: 45px;
    }
      .parchment-left, .parchment-middle, .parchment-right, #respawn {
        background-size: 1266px auto;
    }
      .animate .parchment-middle {
        -moz-animation: parchmiddle3 1s ease-in-out 1;
        -webkit-animation: parchmiddle3 1s ease-in-out 1;
        -o-animation: parchmiddle3 1s ease-in-out 1;
        animation: parchmiddle3 1s ease-in-out 1;
    }
      .game.death .parchment-middle, .game.ask .parchment-middle {
        width: 1038px;
        margin-left: -519px;
        background-position: -114px -882px;
    }
      #respawn {
        width: 375px;
        height: 153px;
        margin: 63px auto 0 auto;
        background-position: 0 -1428px;
    }
      #respawn:active {
        background-position: -375px -1428px;
    }
      .loader {
        margin-top: 27%;
        font-size: 26px;
    }
}
  @media only screen and (max-width: 1500px), only screen and (max-height: 870px) {
      #credits, #about, #death, #git {
        width: 844px;
        height: 364px;
        margin-left: -422px;
        margin-top: -182px;
        font-size: 20px;
    }
      #ask {
        width: 644px;
        height: 364px;
        margin-left: -322px;
        margin-top: -152px;
        font-size: 18px;
    }
      #border {
        position: absolute;
        width: 980px;
        height: 520px;
        left: 50%;
        top: 0;
        margin-left: -490px;
        border: 0;
        padding: 10px;
        background: url('../img/2/border.png') no-repeat 0 0;
    }
      #container {
        width: 980px;
        height: 532px;
        margin: -252px auto auto -490px;
        position: absolute;
    }
      .parchment-left, .parchment-middle, .parchment-right, #respawn {
        background: url('../img/2/spritesheet.png');
        image-rendering: -moz-crisp-edges;
    }
      .parchment-left, .parchment-middle, .parchment-right {
        background-size: 844px;
    }
   
      .parchment-left {
        width: 76px;
        height: 364px;
        background-position: 0 -588px;
    }
      .parchment-middle {
        width: 692px;
        height: 364px;
        background-position: -76px -588px;
        margin-left: -346px;
    }
      .parchment-right {
        width: 76px;
        height: 364px;
        background-position: -768px -588px;
    }
      #parchment, #createCharacter, #loadCharacter, #error {
        width: 844px;
        height: 364px;
        position: absolute;
        top: 55%;
        left: 50%;
        margin-left: -422px;
        margin-top: -182px;
        font-size: 20px;
        text-align: center;
        z-index: 2;
    }
      #parchment input, #parchment select {
        padding: 0 10px;
        border: 2px dashed #b2af9b;
        font-size: 20px;
        border-radius: 6px;
    }
      #parchment input {
        margin-top: 20px;
        height: 41px;
    }
      #parchment select {
        margin-top: 16px;
        height: 32px;
        width: 23%;
    }
      #parchment.createCharacter input {
        margin-top: 15px;
        height: 30px;
    }
      .parchment-left, .parchment-middle, .parchment-right, #respawn {
        background-size: 844px auto;
    }
      .animate .parchment-middle {
        -moz-animation: parchmiddle2 1s ease-in-out 1;
        -webkit-animation: parchmiddle2 1s ease-in-out 1;
        -o-animation: parchmiddle2 1s ease-in-out 1;
        animation: parchmiddle2 1s ease-in-out 1;
    }
      .game.death .parchment-middle, .game.ask .parchment-middle {
        width: 692px;
        margin-left: -346px;
        background-position: -76px -588px;
    }
      #respawn {
        width: 250px;
        height: 102px;
        margin: 42px auto 0 auto;
        background-position: 0 -952px;
    }
      #respawn:active {
        background-position: -250px -952px;
    }
}
  @media only screen and (max-width: 1000px) {
      #credits, #about, #death, #git {
        width: 422px;
        height: 182px;
        margin-left: -211px;
        margin-top: -91px;
        font-size: 10px;
    }
      #ask {
        width: 322px;
        height: 182px;
        margin-left: -161px;
        margin-top: -76px;
        font-size: 10px;
    }
      #border {
        position: absolute;
        width: 490px;
        height: 260px;
        left: 50%;
        top: 0;
        margin-left: -245px;
        border: 0;
        padding: 5px;
        background: url('../img/1/border.png') no-repeat 0 0;
    }
      #container {
        width: 490px;
        height: 266px;
        margin: -126px auto auto -245px;
        position: absolute;
    }
      .parchment-left, .parchment-middle, .parchment-right {
        background-size: 422px;
    }
      .parchment-left {
        width: 38px;
        height: 182px;
        background-position: 0 -294px;
    }
      .parchment-middle {
        width: 346px;
        height: 182px;
        background-position: -38px -294px;
        margin-left: -173px;
    }
      .parchment-right {
        width: 38px;
        height: 182px;
        background-position: -384px -294px;
    }
      #parchment, #createCharacter, #loadCharacter, #error {
        width: 422px;
        height: 182px;
        position: absolute;
        top: 55%;
        left: 50%;
        margin-left: -211px;
        margin-top: -91px;
        font-size: 10px;
        text-align: center;
        z-index: 2;
    }
      #parchment input, #parchment select {
        padding: 0 5px;
        border: 1px dashed #b2af9b;
        font-size: 10px;
        border-radius: 3px;
    }
      #parchment input {
        margin-top: 10px;
        height: 20px;
    }
      #parchment select {
        margin-top: 8px;
        height: 16px;
        width: 23%;
    }
      #parchment.createCharacter input {
        margin-top: 8px;
        height: 15px;
    }
      .parchment-left, .parchment-middle, .parchment-right, #respawn {
        background-size: 422px auto;
    }
      .animate .parchment-middle {
        -moz-animation: parchmiddle1 1s ease-in-out 1;
        -webkit-animation: parchmiddle1 1s ease-in-out 1;
        -o-animation: parchmiddle1 1s ease-in-out 1;
        animation: parchmiddle1 1s ease-in-out 1;
    }
      .game.death .parchment-middle, .game.ask .parchment-middle {
        width: 346px;
        margin-left: -173px;
        background-position: -38px -294px;
    }
      #respawn {
        width: 125px;
        height: 51px;
        margin: 21px auto 0 auto;
        background-position: 0 -476px;
    }
      #respawn:active {
        background-position: -125px -476px;
    }
}
  .tablet .animate .parchment-left, .tablet .animate .parchment-right, .tablet .animate .parchment-middle {
    -webkit-animation:none;
    -moz-animation:none;
    -o-animation:none;
    animation:none;
}