Css konusunda yardım

  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;
}

  body{
  transform: scale(1) !important;
  }