body {
    font-family: "DynaPuff", sans-serif;
    background: linear-gradient(135deg, #5749a0 0%, #000000 100%);
    color: rgb(255, 255, 255);
    scale: 0.5;
    transform-origin: top left;
    text-shadow: 0px 5px 2px #2c2068;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #fdcd78;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #5749a0;
    width: 30px;
    height: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #5749a0;
    width: 30px;
    height: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #5742bd;
  }

  .tiklama:active {
    /* When the button is clicked */
    transform: translateY(5px);
    transition: ease 0.1s;
    border-bottom-width: 2px;
  }
  .arkaplan_ortala {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .header_bg {
    position: absolute;
    width: 100%;
    height: 180px;
    background-size: 100% 100%;
  }

  #anamenu {
    width: 900px;
    height: 1600px;
    background-size: 900px;
    background-position: top;
    position: absolute;
    background-color: #44a5c8; 
    left: 0;
    z-index: 1;
  }

  #yumurta_koleksiyon {
    width: 900px;
    height: 1130px;
    left: 0;
    background-size: 900px;
    background-position: top;
    position: absolute;
    background-color: #44a5c8;
    z-index: 1;
  }

  #shop_ekrani {
    width: 900px;
    height: 1600px;
    background-size: 900px;
    background-position: top;
    position: absolute;
    background-color: #44a5c8;
    left: 0;
    z-index: 1;
  }

  #liderbord_ekran {
    width: 900px;
    height: 1600px;
    left: 0;
    background-size: 900px;
    background-position: top;
    position: absolute;
    background-color: #44a5c8;
    z-index: 1;
  }

  #ayarlar_ekran {
    width: 900px;
    height: 1600px;
    left:0;
    background-size: 900px;
    background-position: top;
    position: absolute;
    background-color: #44a5c8;
    z-index: 1;
  }

  #anamenu_logo_alan {
    width: 100%;
    height: 365px;
  }

  #menu_alan {
    width: 100%;
    height: 670px;
    background-image: url("h10/assets/ana_container_bg.png");
    background-size: 740px;
    background-position: center;
    background-repeat: no-repeat;
  }

  #alt_menu_alan {
    width: 100%;
    height: 300px;
  }

  #sol_alt_menu {
    width: 190px;
    height: 320px;
    float: left;
  }

  #orta_alt_menu {
    width: 520px;
    height: 320px;
    float: left;
  }

  #sag_alt_menu {
    width: 190px;
    height: 320px;
    float: left;
  }

  #gunluk_gorevler_container {
    width: 190px;
    height: 160px;
  }

  #oduller_container {
    width: 190px;
    height: 160px;
  }

  #anamenu_logo {
    background-image: url("h10/assets/logo_bg.png");
    width: 100%;
    position: absolute;
    height: 370px;
    background-size: 680px;
    border: 1px soid #000000;
  }

  #sonraki_boss_img {
    position: relative;
    width: 100%;
    height: 230px;
    top: 10px;
    background-image: url("h10/assets/monster.png");
    background-size: 350px;
  }

  #anamenu_para_elmas {
    width: 100%;
    height: 160px;
    margin-top: 30px;
    border-radius: 10px;
  }

  #anamenu_para {
    width: 220px;
    height: 160px;
    border-radius: 10px;
    background-color: #00000035;
    float: left;
    margin-left: 200px;
  }

  #anamenu_elmas {
    width: 220px;
    height: 160px;
    float: left;
    margin-left: 55px;
    border-radius: 10px;
    background-color: #00000035;
  }

  #anamenu_level {
    width: 420px;
    height: 160px;

    margin-left: 240px;
    margin-top: 20px;
    border-radius: 10px;
  }

  #anamenu_para_icon {
    width: 100%;
    height: 90px;
    background-image: url("h10/assets/coin.png");

    background-position: center;
  }

  #anamenu_para_yazi {
    width: 100%;
    height: 70px;
    text-align: center;
    font-size: 60px;
    text-shadow: 2px 5px 0px #54488d;
    box-shadow: 0px 1px rgb(64, 3, 193);
    border-bottom: 6px solid #ffffff;
    border-radius: 10px;
  }

  #anamenu_elmas_icon {
    width: 100%;
    height: 90px;
    background-image: url("h10/assets/elmas.png");
  }

  #anamenu_elmas_yazi {
    width: 100%;
    height: 70px;
    text-align: center;
    font-size: 60px;
    text-shadow: 2px 5px 0px #54488d;
    box-shadow: 0px 1px rgb(64, 3, 193);
    border-bottom: 6px solid #ffffff;
    border-radius: 10px;
  }

  #anamenu_level_icon {
    width: 100%;
    height: 280px;
    background-image: url("h10/assets/level_icon.png");
    background-size: 280px;
  }

  #anamenu_level_yazi {
    width: 100%;
    height: 100px;
    padding-top: 65px;
    text-align: center;
    font-size: 80px;
    -webkit-text-stroke: 2px #010661;
  }

  #gunluk_gorevler_button {
    width: 126px;
    height: 140px;
    left: 30px;
    position: absolute;
    background-image: url("h10/assets/gunluk_gorev.png");
    background-size: 155px;
    cursor: pointer;
  }

  #oduller_button {
    width: 126px;
    height: 140px;
    background-image: url("h10/assets/oduller_button.png");
    left: 30px;
    position: absolute;
    background-size: 155px;
    cursor: pointer;
  }

  #oyna_buton {
    width: 455px;
    height: 210px;
    left: 222px;
    top: 1110px;
    position: absolute;
    background-image: url("h10/assets/sari_buton.png");

    background-size: 525px;
    cursor: pointer;
  }

  #oyna_buton_yazi {
    margin-top: 30px;
    font-size: 100px;
    text-align: center;
    font-weight: bolder;
    text-shadow: 0px 6px 1px #54488d;
  }

  #karakter_buton {
    width: 126px;
    height: 140px;
    background-image: url("h10/assets/karakter_img.png");
    left: 746px;
    top: 1130px;
    position: absolute;
    background-size: 155px;
    cursor: pointer;
  }

  .borderli {
    box-shadow: inset 0px 0px 0px 1px rgb(0, 0, 0);
  }

  #yumurta_koleksiyon_ust {
    width: 100%;
    height: 400px;
    display: flex;
    background-image: url("h10/assets/koleksiyon_ust_bg.png");
    background-size: 80% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  #yumurta_koleksiyon_orta {
    width: 100%;
    height: 530px;
  }

  #yumurta_koleksiyon_kullanici_para {
    width: 50%;
  }

  #y_k_para_arkaplan {
    background-image: url("h10/assets/para_ust_bg.png");
    width: 50%;
    height: 80px;
    margin-left: 20%;
    margin-top: 5%;
  }

  #y_k_para_yazi {
    font-size: 60px;
    margin-left: 20%;
    text-align: center;
  }

  #yumurta_koleksiyon_kullanici_elmas {
    width: 50%;
    height: 100%;
  }

  #y_k_elmas_arkaplan {
    background-image: url("h10/assets/elmas_ust_bg.png");
    width: 50%;
    height: 80px;
    margin-left: 30%;
    margin-top: 5%;
  }

  #y_k_elmas_yazi {
    font-size: 60px;
    margin-left: 26%;
    text-align: center;
  }

  .menu_baslik {
    width: 100%;
    height: 200px;
  }

  #y_k_baslik_bg {
    background-image: url("h10/assets/collection_bg.png");
  }

  #y_k_baslik_yazi {
    font-size: 80px;
    text-shadow: 0px 7px 2px #f15a29;
    -webkit-text-stroke: 0.5px #f15a29;
    text-align: center;
    padding-top: 27px;
  }

  #y_k_ust_sol {
    width: 35%;
    height: 100%;
  }

  #y_k_ust_sag {
    width: 65%;
    height: 100%;
  }

  #y_k_secili_yumurta_bg {
    width: 100%;
    height: 60%;
    margin-top: 50px;
    background-image: url("h10/assets/yumurta_bg.png");
  }

  #y_k_secili_yumurta {
    background-image: url("h10/assets/yumurtalar/1.png");
    width: 100%;
    height: 100%;
    margin-top: -50px;
    margin-left: 70px;
  }

  #y_k_secili_yumurta_adet {
    width: 100%;
    height: 140px;
    text-align: center;
    font-size: 60px;
    color: #00316d;
    padding-top: 100%;
    font-weight: 500;
    text-shadow: none;
  }

  #y_k_yumurta_bilgi_ekrani {
    width: 80%;
    height: 100%;
    background-size: 100% 100%;
  }

  #y_k_bilgi_baslik {
    width: 100%;
    height: 30px;
    text-align: center;
    font-size: 70px;
    padding-top: 15px;
    margin-left: 00px;
    color: #00316d;
    text-shadow: none;
    font-weight: bolder;
  }

  #y_k_secili_yumurta_aciklama {
    width: 100%;
    height: 140px;
    text-align: center;
    font-size: 28px;
    color: #194582;
    margin-top: 15%;
    text-shadow: none;
    font-weight: 500;
  }

  #y_k_secili_yumurta_skill_icon {
    width: 20%;
    height: 55px;
    margin-left: 40%;
    background-image: url("h10/assets/skill_icons/buz.png");
  }

  #y_k_secili_yumurta_ekle {
    background-image: url("h10/assets/ekle_bg.png");
    width: 100%;
    height: 100px;
    position: relative;
    left: 30%;
    top: -20px;
  }

  #y_k_secili_yumurta_ekle_yazi {
    font-size: 50px;
    padding-top: 15px;
    text-align: center;
    text-shadow: 2px 5px 2px #54488d;
    cursor: pointer;
    color: #ffffff;
  }

  #y_k_koleksiyon_bg {
    width: 88%;
    margin-left: 6%;
    margin-top: 15px;
    height: 80%;
    background-size: 100% 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow-x: auto;
  }

  .y_k_yumurta_listesi_eleman {
    width: 180px;
    height: 250px;

    margin-bottom: 35px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    background-image: url("h10/assets/yumurta_liste_bg.png");
    background-size: 100% 100%;
  }

  .y_k_liste_yumurta_icon {
    width: 100%;
    height: 100%;
    background-image: url("h10/assets/yumurtalar/1.png");
    background-size: 180px;
    margin-top: -45px;
  }

  .y_k_liste_yumurta_isim_yazi {
    width: 100%;
    text-align: center;
    font-size: 35px;
    margin-top: -60px;
    text-shadow: none;
    font-weight: 500;
    overflow: hidden;
    color: #00316d;
  }

  .y_k_liste_yumurta_adet_yazi {
    width: 100%;
    text-align: center;
    font-size: 40px;
    margin-top: 4px;

    color: #ffffff;
    text-shadow: 1px 3px 2px #000000;
  }

  .para_elmas_ust_bar {
    height: 7%;
    width: 100%;
    display: flex;
  }

  #shop_baslik_bg {
    background-image: url("h10/assets/shop/header_bg.png");
  }

  #shop_baslik_yazi {
    font-size: 80px;
    text-shadow: 0px 7px 2px #6f7413;
    -webkit-text-stroke: 0.5px #63661c;
    text-align: center;
    padding-top: 17px;
  }

  #shop_ana_listeler {
    display: flex;
    justify-content: space-around;
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .shop_ana_liste_baslik_bg {
    margin-top: 10px;
    width: 18%;
    background-color: #feac13;
    border-radius: 30px 30px 30px 30px;
    height: 70%;
    box-shadow: 0px 5px 3px #906007;
    border: 4px solid rgba(0, 0, 0, 0.663);
    cursor: pointer;
  }

  .shop_ana_liste_baslik_secili {
    background-color: #4956cf;
    scale: 1.1;
  }

  .shop_ana_liste_baslik_yazi {
    text-align: center;
    font-size: 30px;
    margin-top: 10px;
    text-shadow: 0px 3px 4px #906007;
  }

  #gunluk_ozel_paket {
    width: 80%;
    height: 300px;
    background-image: url("h10/assets/shop/ozel_satin_al_bg.png");
    background-size: 100% 100%;
    margin-left: 10%;
    margin-top: 30px;
    border: 2px solid #00000074;
    border-radius: 30px 30px 30px 30px;
    display: flex;
  }

  #ozel_paket_sol {
    width: 50%;
  }

  #paket_adi {
    font-size: 45px;
    text-shadow: 0px 7px 2px #8f4d0d;
    width: 70%;
    text-align: center;
    margin-left: 15%;
    margin-top: 2%;
    font-weight: bold;
  }

  #paket_icerigi_bg {
    width: 80%;
    margin-left: 10%;
    margin-top: 10px;
    height: 160px;
    background-color: #fae6bf;
    border-radius: 20px;
    box-shadow: 0px 5px 0px rgb(88, 86, 86);
  }

  #ozel_paket_sag {
    width: 50%;
    height: 100%;
  }

  #paket_gorsel {
    width: 80%;
    margin-left: 10%;
    height: 65%;
    background-image: url("h10/assets/shop/test_ozel_icon.png");
  }

  #ozel_satin_al_buton {
    width: 50%;
    margin-left: 25%;
    height: 50%;
    background-image: url("h10/assets/shop/satin_al_bg.png");
    margin-top: -30px;
    cursor: pointer;
    display: flex;
  }

  #ozel_satin_al_para_birimi {
    width: 37%;
    height: 50%;
    margin-top: 32px;

    background-image: url("h10/assets/elmas.png");
  }

  #ozel_satin_al_text {
    font-size: 45px;
    width: 35%;
    height: 50%;
    text-align: center;
    margin-top: 45px;
    margin-left: 0px;
    text-shadow: 0px 3px 1px black;
  }

  #shop_liste {
    width: 85%;
    margin-left: 7%;
    height: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow: auto;
  }

  .shop_item_eleman {
    margin-top: 30px;
    width: 30%;
    height: 200px;
    background-image: url("h10/assets/shop/liste_item_bg.png");
  }

  .shop_item_baslik_bg {
    width: 80%;
    margin-left: 10%;
    height: 45px;
    background-image: url("h10/assets/shop/liste_nadirlik_bg.png");
  }

  .shop_item_baslik_yazi {
    width: 80%;
    margin-left: 10%;

    height: 50px;
    text-align: center;
    font-size: 22px;
    padding-top: 6px;
    text-shadow: 0px 3px 1px black;
  }

  .shop_item_icon {
    width: 100%;
    height: 100px;
    background-image: url("h10/assets/shop/test_ozel_icon.png");
    top: 35px;
  }

  .shop_item_satin_al_bg {
    width: 90%;
    margin-left: 5%;
    margin-top: 5px;
    height: 45px;
    background-image: url("h10/assets/shop/satin_al_bg_2.png");
    display: flex;
    cursor: pointer;
  }

  .shop_item_para_birimi_coin {
    width: 60px;
    height: 40px;
    margin-left: 13%;
    background-image: url("h10/assets/shop/coin.png");
  }

  .shop_item_para_yazi {
    width: 10px;
    height: 40px;
    font-size: 28px;
    margin-top: 1px;
    margin-left: -10px;
    text-align: center;
    text-shadow: 0px 3px 1px black;
  }

  #liderbord_baslik_bg {
    background-image: url(assets/liderbord/header_bg.png);
  }

  #liderbord_baslik_yazi {
    font-size: 80px;
    text-shadow: 0px 7px 2px #630404;
    -webkit-text-stroke: 0.5px #4d010f84;
    text-align: center;
    padding-top: 27px;
  }

  #liderbord_secim {
    display: flex;
    justify-content: space-around;
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .liderbord_secim_buton {
    margin-top: 2px;
    width: 30%;
    background-color: #71002b;
    border-radius: 30px 30px 30px 30px;
    height: 70%;
    box-shadow: 0px 5px 3px #000000;
    border: 4px solid rgba(0, 0, 0, 0.663);
  }

  .liderbord_secim_yazi {
    font-size: 50px;
    text-align: center;
    margin-top: 5px;
    cursor: pointer;
  }

  .liderbord_secim_buton_secili {
    background-color: #ea0c27;
    scale: 1.1;
  }

  #liderbord_tablo {
    width: 85%;
    height: 880px;
    margin-left: 7%;
    margin-top: 20px;
    overflow: auto;
  }

  #liderbord_tablo_baslik {
    width: 100%;
    height: 80px;
    display: flex;
    flex-wrap: wrap;
  }

  #tablo_siralama_baslik {
    width: 5%;
    height: 40px;
    text-align: center;
    font-size: 40px;
  }

  #tablo_isim_baslik {
    width: 76%;
    height: 40px;
    text-align: center;
    font-size: 42px;
  }

  #tablo_puan_baslik {
    width: 15%;
    height: 40px;
    text-align: center;
    font-size: 42px;
    color: #ffffff;
  }

  .liderbord_satir {
    width: 100%;
    height: 80px;
    background-image: url("h10/assets/liderbord/satir.png");
  }

  .liderbord_satir_siralama {
    width: 5%;
    height: 10px;
    text-align: center;
    font-size: 60px;
    margin-left: 48px;
  }

  .liderbord_satir_isim {
    width: 80%;
    height: 10px;
    text-align: center;
    font-size: 42px;
    margin-left: 40px;
    margin-top: 4px;
  }

  .liderbord_satir_puan {
    width: 5%;
    height: 10px;
    text-align: center;
    font-size: 42px;
    margin-left: 620px;
    margin-top: -11px;
    color: #ffffff;
  }

  #ayarlar_baslik_bg {
    background-image: url(assets/ayarlar/header_bg.png);
  }

  #ayarlar_liste {
    width: 85%;
    margin-left: 7%;
    height: 1000px;
    overflow: auto;
    background-color: #fae6bf;
    border-radius: 40px;
    box-shadow: 0px 10px #553f89;
  }

  #ayarlar_kullanici {
    width: 100%;
    margin-top: 30px;

    height: 20%;
    display: flex;
  }

  #ayarlar_kullanici_pp {
    background-image: url("h10/assets/karakter_img.png");
    width: 120px;
    height: 100%;
    margin-top: 50px;

    margin-left: 55px;
  }

  #ayarlar_kullanici_isim {
    width: 650px;
    height: 100%;
    background-image: url("h10/assets/ayarlar/kullanici_isim_bg.png");
    margin-top: 40px;
  }

  #kullanici_isim_input {
    width: 70%;
    margin-left: 15%;
    height: 50%;
    margin-top: 8%;
    border: none;
    color: #010661;
    opacity: 1;
    background: none;
    font-size: 50px;
  }

  #ses_muzik {
    width: 100%;
    margin-top: 30px;

    height: 20%;
    display: flex;
  }

  #ses_muzik_buton {
    background-image: url("h10/assets/ayarlar/ses_acik_buton.png");
    width: 120px;
    height: 70%;
    margin-top: 85px;
    margin-left: 55px;
    cursor: pointer;
  }

  #ses_muzik_ayar {
    width: 650px;
    height: 100%;
    margin-top: 40px;
  }

  #muzik_yazi {
    width: 80%;
    text-align: center;
    height: 50%;
    margin-top: 2%;
    border: none;
    color: #ffffff;
    opacity: 1;
    background: none;
    font-size: 60px;
  }

  .slider {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: 80%;

    margin-left: 40px; /* Full-width */
    height: 25px; /* Specified height */
    background: #fdcd78; /* Grey background */
    outline: none; /* Remove outline */
    border: 4px solid #5551b3;
    border-radius: 10px;
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
    transition: opacity 0.2s;
  }
  .slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 56px; /* Slider handle height */
    background: #5551b3; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }

  .slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 56px; /* Slider handle height */
    background: #5551b3; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }

  #ses_efekt {
    width: 100%;
    margin-top: 30px;

    height: 20%;
    display: flex;
  }
  #ses_efekt_buton {
    background-image: url("h10/assets/ayarlar/ses_kapali_buton.png");
    width: 120px;
    height: 70%;
    margin-top: 85px;
    margin-left: 55px;
    cursor: pointer;
  }

  #ses_efekt_ayar {
    width: 650px;
    height: 100%;
    margin-top: 40px;
  }

  #efekt_yazi {
    width: 80%;
    text-align: center;
    height: 50%;
    margin-top: 2%;
    border: none;
    color: #ffffff;
    opacity: 1;
    background: none;
    font-size: 60px;
  }

  #uygula_cikis_alan {
    width: 100%;
    height: 20%;
    margin-top: 70px;
    display: flex;
  }
  #uygula_buton {
    width: 50%;
    margin-left: 100px;
    background-image: url("h10/assets/ayarlar/uygula_buton.png");
    height: 90%;
    cursor: pointer;
  }
  #uygula_buton_text {
    width: 100%;
    height: 80%;
    font-size: 60px;
    text-align: center;
    display: grid;
    align-items: center;
  }
  #iptal_buton {
    width: 20%;
    background-image: url("h10/assets/ayarlar/carpi_buton.png");
    height: 50%;
    margin-top: 40px;
    cursor: pointer;
  }