* {
            margin: 0px;
            padding: 0px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            transition: transform 1s;
        }

        .etkinlik_canvas {
            z-index: -1;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        #ekran_boyutlari {
            height: 100vh;
            width: 100vw;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: -999;
        }

        #ekran_surukle {
            height: 100vh;
            width: 100vw;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
            cursor: grab;
        }

        body {
            background-color: #535565;
            overflow: hidden;
        }

        #defaultCanvas0 {
            z-index: 499;
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
        }

        #sayfa_resim {
            width: auto;
        }

        .page_1 {
            position: absolute;
            top: 0px;
            left: 0px;
            margin: 0px;
            padding: 0px;
        }

        .screen {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        /*
        .canvas-container {
            height: 10000px;
            width: 10000px;
        }
        */

        .pages_and_question {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .cevap_goster_btn {
            position: absolute;
            z-index: 2;
            border: none;
            background-image: url('../images/answer.png');
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            cursor: pointer;
        }

        .etkinlik_cevap_goster_btn {
            position: absolute;
            z-index: 2;
            border: none;
            width: 32px;
            height: 32px;
            background-image: url('../images/answer.png');
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            cursor: pointer;
        }

        .yakinlastir_btn {
            position: absolute;
            z-index: 2;
            border: none;
            background-image: url('../images/magnifier.png');
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            cursor: pointer;
        }

        .cevap {
            position: absolute;
        }

        .gizli {
            display: none !important;
        }

        .araclar {
            position: absolute;
            width: 130px;
            top: 0px;
            left: 0px;
            background-color: whitesmoke;
            padding: 12px 0px 12px 0px !important;
            padding: 0px;
            z-index: 1000;
            cursor: grab;
            border-radius: 2px;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            padding: 5px 0px 5px 0px;
            z-index: 9999999;
        }

        .araclar_row {
            display: flex;
            justify-content: center;
        }

        .araclar_column_100 {
            flex: 100%;
            display: flex;
            justify-content: center;
        }

        .araclar_column_50 {
            flex: 50%;
            display: flex;
            justify-content: center;
        }

        .araclar_column_33 {
            flex: 33.3333%;
            display: flex;
            justify-content: center;
        }

        #bos_sayfa_div {
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: white;
            z-index: 3;
            border-radius: 10px;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        }

        #bos_sayfa_ust_menu {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 30px;
            background-color: rgb(191, 193, 196);
            display: flex;
            justify-content: space-between;
            margin: 0px;
            padding: 0px;
            cursor: grab;
            z-index: 1;
        }

        #bos_sayfa_ust_menu label {
            margin: 5px 10px;
            color: white;
            font-weight: bold;
            cursor: grab;
        }

        #bos_sayfa_ust_menu button {
            width: 20px;
            height: 20px;
            margin: 5px;
            cursor: pointer;
            border: none;
            border-radius: 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: transparent;
        }

        #bos_sayfa_kapat {
            background-image: url("../images/butonlar/close.png");
        }

        #bos_sayfa_kucult_buyut {
            position: absolute;
            right: 4px;
            bottom: 4px;
            width: 24px;
            height: 24px;
            transform: rotate(90deg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: white;
            z-index: 1000000;
            background-image: url("../images/butonlar/fullscreen.png");
            cursor: nw-resize;
        }

        #bos_sayfa_ust_menu button:last-child {
            margin-right: 10px;
        }

        #yakinlastir_btn {
            background-image: url("../images/butonlar/buyut.png");
            height: 28px !important;
            width: 28px !important;
        }

        #kucult_btn {
            background-image: url("../images/butonlar/kucult.png");
            height: 28px !important;
            width: 28px !important;
        }

        #sayfa_etkinlik_mod_btn {
            background-image: url("../images/butonlar/tamsayfa.png");
            height: 28px !important;
            width: 28px !important;
        }

        #onceki_sayfa_btn {
            background-image: url("../images/butonlar/oncekisayfa.png");
            height: 64px !important;
            width: 64px !important;
        }

        #sonraki_sayfa_btn {
            background-image: url("../images/butonlar/sonrakisayfa.png");
            height: 64px !important;
            width: 64px !important;
        }

        #kalem_btn {
            background-image: url("../images/butonlar/kalem.png");
            height: 64px !important;
            width: 64px !important;
        }

        #hareket_btn {
            background-image: url("../images/butonlar/hareket.png");
            height: 64px !important;
            width: 64px !important;
        }

        #bos_sayfa_btn {
            background-image: url("../images/butonlar/bossayfa.png");
            height: 64px !important;
            width: 64px !important;
        }

        #boyut_btn {
            background-image: url("../images/butonlar/boyut.png");
            height: 64px !important;
            width: 64px !important;
        }

        #sekiller_btn {
            background-image: url("../images/butonlar/sekiller.png");
            height: 64px !important;
            width: 64px !important;
        }

        #silgi_btn {
            background-image: url("../images/butonlar/silgi.png");
            height: 64px !important;
            width: 64px !important;
        }

        #ortala_btn {
            background-image: url("../images/butonlar/ortala.png");
            height: 64px !important;
            width: 64px !important;
        }

        #menuyu_dondur_btn {
            background-image: url("../images/butonlar/araclaridondur.png");
            height: 64px !important;
            width: 64px !important;
        }

        #renk_sec_btn {
            background-image: url("../images/butonlar/renk.png");
            height: 64px !important;
            width: 64px !important;
        }

        #isaretle_btn {
            background-image: url("../images/butonlar/isaretle.png");
            height: 64px !important;
            width: 64px !important;
        }

        #hepsini_sil_btn {
            background-image: url("../images/butonlar/hepsinisil.png");
            height: 64px !important;
            width: 64px !important;
        }

        .araclar_button {
            border: none;
            background-color: transparent;
            /* Used if the image is unavailable */
            background-position: center;
            /* Center the image */
            background-repeat: no-repeat;
            /* Do not repeat the image */
            background-size: cover;
            /* Resize the background image to cover the entire container */
            cursor: pointer;

        }

        .araclar_kutu {
            position: absolute;
            left: 130px;
            width: 125px;
            height: 41px;
            background-image: url('../images/butonlar/balon.png');
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            padding: 5px 0px 0px 25px;
        }

        .sekiller_kutu {
            top: 250px;
        }

        .kalem_kutu {
            top: 320px;
        }

        .silgi_kutu {
            top: 390px;
        }

        .renkler_kutu {
            top: 110px;
        }

        .boyut_kutu {
            top: 180px;
        }

        .renk_secenek {
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 12px;
            height: 12px;
            border: none;
        }

        .sekil_secenek {
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 16px;
            height: 16px;
            border: none;
            margin-top: 9px;
        }

        .boyut_secenek {
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 16px;
            height: 16px;
            border: none;
            margin-top: 9px;
        }

        #nokta_bir {
            background-image: url('../images/butonlar/nokta_bir.png');
        }

        #nokta_iki {
            background-image: url('../images/butonlar/nokta_iki.png');
        }

        #nokta_uc {
            background-image: url('../images/butonlar/nokta_uc.png');
        }

        #nokta_dort {
            background-image: url('../images/butonlar/nokta_dort.png');
        }

        #daire_sekil {
            background-image: url('../images/butonlar/yuvarlak.png');
        }

        #kare_sekil {
            background-image: url('../images/butonlar/siyah.png');
        }

        #cizgi_sekil {
            background-image: url('../images/butonlar/capraz_cizgi.png');
        }

        #ucgen_sekil {
            background-image: url('../images/butonlar/ucgen.png');
        }

        #siyah_renk {
            background-image: url('../images/butonlar/siyah.png');
        }

        #gri_renk {
            background-image: url('../images/butonlar/gri.png');
        }

        #acik_gri_renk {
            background-image: url('../images/butonlar/acik_gri.png');
        }

        #kirmizi_renk {
            background-image: url('../images/butonlar/kirmizi.png');
        }

        #lacivert_renk {
            background-image: url('../images/butonlar/lacivert.png');
        }

        #yesil_renk {
            background-image: url('../images/butonlar/yesil.png');
        }

        #kirmizi_renk {
            background-image: url('../images/butonlar/kirmizi.png');
        }

        #sari_renk {
            background-image: url('../images/butonlar/sari.png');
        }

        #pembe_renk {
            background-image: url('../images/butonlar/pembe.png');
        }

        .kucuk_nokta {
            background-image: url('../images/butonlar/kucuk_nokta.png');
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 4px;
            width: 4px;
            margin-top: 6px;
        }

        .buyuk_nokta {
            background-image: url('../images/butonlar/buyuk_nokta.png');
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 12px;
            width: 12px;
            margin-top: 2px;
        }

        .araclar_kutu_row {
            display: flex;
        }

        .araclar_kutu_column_25 {
            flex: 25%;
        }

        .boyut_kutu_row {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
        }

        .boyut_kutu_column_70 {
            flex: 70%;
            padding: 0px 10px 0px 0px;
        }

        .boyut_kutu_column_15 {
            flex: 15%;
        }

        #fps_text {
            font-size: 48px;
            position: absolute;
            color: aquamarine;
            font-weight: 600;
            top: 2vh;
            right: 2vw;
        }

        .araclar hr {
            margin: 10px 0px 10px 0px;
        }

        .logo {
            background-image: url("../logo.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            height: 60px;
            width: 90px;
            margin: auto;
        }

        .alt_menu {
            position: fixed;
            height: 40px;
            width: 100%;
            bottom: 0px;
            left: 0px;
            background-color: azure;
            justify-content: space-around;
            display: flex;
            z-index: 3;
            margin: 0px !important;
            padding: 0px !important;
        }

        .alt_menu div {
            display: flex;
            justify-content: space-evenly;
            width: 30%;
        }

        .alt_menu div {
            display: flex;
            justify-content: space-evenly;
        }

        .sayfa_btn_alt_menu{
            margin-top: 10px;
            height: 20px !important;
            width: 20px !important;
        }

        .sonraki_sayfa_alt_menu{
            background-image: url('../images/yon.png');
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            transform: rotate(90deg);
            margin-left: 5px;
        }

        .onceki_sayfa_alt_menu{
            background-image: url('../images/yon.png');
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            transform: rotate(270deg);
            margin-right: 5px;
        }

        .sayfa {
            width: 70px;
            height: 28px;
            border: salmon 2px solid;
            border-radius: 7px;
            margin-top: 5px;
        }

        .sayfa span {
            display: table;
            margin: 0 auto;
            margin-top: 4.5px;
        }

        .sayfa_degistir_menu_row {
            display: flex;
            justify-content: center;
        }

        .sayfa_degistir_menu_row:first-child {
            justify-content: flex-end;
            height: 35px;
            margin-bottom: 4px;
        }

        .sayfa_degistir_menu_ekran {
            padding-right: 15px;
            margin-top: 4px;
            border-bottom: 1px rgb(243, 240, 240);
            text-align: end;
            color: rgb(0, 0, 0);
            font-size: 24px;
            width: 100%;

        }

        .sayfa_degistir_menu {
            position: absolute;
            bottom: 45px;
            left: calc(50% - 75px);
            z-index: 100;
            background-color: rgb(199, 196, 196);
            width: 150px;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        }

        .sayfa_degistir_menu_btn {
            width: 50px;
            height: 50px;
            display: flex;
            margin: 0px 2px 0px 2px;
            box-shadow: rgba(255, 255, 255, 0.07) 0px 3px 8px;
        }

        .sayfa_degistir_menu_btn:hover {
            opacity: 0.6;
            box-shadow: rgba(0, 0, 0, 0.21) 0px 3px 8px;
        }

        .sayfa_degistir_menu_btn span {
            display: flex;
            margin: 0 auto;
            justify-content: center;
            align-items: center;
            color: rgb(0, 0, 0);
        }

        .rotatable {
            transition: transform 1s;
        }