@font-face {
            font-family: Izmir-Bold;
            src: url('/src/fonts/Ahmet Altun - Izmir-Bold.otf');
        }
        @font-face {
            font-family: Izmir-Medium;
            src: url('/src/fonts/Ahmet Altun - Izmir-Medium.otf');
        }
        @font-face {
            font-family: Izmir-Light;
            src: url('/src/fonts/Ahmet Altun - Izmir-Light.otf');
        }       
        *{
            margin: 0px;
            padding: 0px;
        }

        li{
            list-style: none;
        }
        .sceneSelect{
            width: 95%; height: 50px; background-color: rgb(57, 47, 47); border: solid 1px grey; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer;
        }
        .sceneInfo{
            width: 300px; height: auto; background-color: rgba(3, 25, 43, 0.25); display: flex; flex-direction: column; align-items: center; color: white; font-family: 'Izmir-Light';
        }

        .sLiP p{
            display: block;
            font-family: 'Izmir-Light';
            font-size: large;
            color: white;
            opacity: 0.75;
            text-shadow: 2px 2px black;
            transition: 0.2s;
        }

        .sLiP p:hover{
            opacity: 1;
            cursor: pointer;
            font-size: x-large;
            font-family: 'Izmir-Bold';
        }
        .sLiA p{
            opacity: 1;
            cursor: pointer;
            font-size: x-large;
            color: white;
            font-family: 'Izmir-Bold';
        }


        
        #model{
            width: 100%;
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            background-color: rgb(3, 25, 43);
        }
        
        .scenePickerContainer{
            display: flex;
            position: absolute;
            left: 5%;
            top: 0%;
            width: auto;
            height: 100vh;
            z-index: 25;
            cursor: pointer;
            overflow-x: hidden;
            background-color: transparent;
            align-items: center;
        }
        .scenePickerContainer::-webkit-scrollbar{
            display: none;
        }
        
        .scenePickerMenu{
            display: none;
        }
        .scenePickerUl{
            margin-top: 0px;
            margin-left: 0px;
            margin-bottom: 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .sceneInfoMobile{
            display: none;
        }
        .modelContainer{
            width: 100%;
            height: 100vh;
            background-color: gray;
            margin: auto;
            overflow: hidden;
            position: relative;
            transition: 0.5s;
        }
        #rotateIcon{
            transition: 0.5s;
        }
        #rotateIcon:hover{
            transform: rotate(180deg);
        }

        /* Masaüstü Sahne Bilgi Ekranı Penceresi Stil Ayarları*/
            .sceneInfoContainer{
                display: flex;
                align-items: center;
                margin-left: 200px;
            }

            .sceneInfoLine{
                width: 150px;
                height: 2px;
                background-color: white;
                transform: skewY(-45deg);
                transform-origin: 0%;
            }

            .sceneInfoAreaContainer{
                width: 250px;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 0px;
                position: relative;
            }

            .sceneInfoClose{
                width: 50px; height: 50px;
            }
            .sceneInfoClose img{
                width: 100%;
                cursor: pointer;
            }

            .sceneInfoAreaContent{
                width: 100%;
                height: 500px;
                background-color: rgba(3, 25, 43, 0.25);
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 0px;
                position: relative;
            }
            .sceneInfoAreaContent h2{
                margin-top: 20px;
                margin-bottom: 20px;
                font-size: xx-large;
                font-family: 'Izmir-Bold';
                color: white;
            }
            .sceneInfoAreaContent h3{
                margin-top: 10px;
                margin-bottom: 10px;
                font-family: 'Izmir-Bold';
                color: white;
                text-align: center;
            }
            .sceneInfoAreaContent{
                text-align: center;
                margin-bottom: 20px;
                font-family: 'Izmir-Light';
                color: white;
                overflow-x: hidden;
            }
            .sceneInfoAreaContent p{
                width: 95%; margin: auto;
            }
            
            .sceneInfoAreaContent::-webkit-scrollbar{
                background-color: transparent;
                width: 5px;
            }
            .sceneInfoAreaContent::-webkit-scrollbar-thumb{
                background-color: lightgray;
                border-radius: 25px;
            }
            .sceneInfoAreaContent::-webkit-scrollbar-thumb:hover{
                background-color: white;
                border-radius: 25px;
            }

            .sceneInfoAreaSceneImageContainer{
                width: 100%;
                position: relative;
            }

            .sceneInfoAreaSceneImage{
                height: 200px;
            }
            .sceneInfoAreaSceneImage img{
                height: 100%;
            }
            .sceneInfoAreaSceneImage::-webkit-scrollbar{
                display: none;
            }

            .sceneInfoAreaSceneImageHelperContainer{
                position: absolute;
                top: 0px;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(255, 255, 255, 0.4);
                z-index: 1;
                cursor: pointer;
                transition: 0.2s;
            }
            .sceneInfoAreaSceneImageHelperContainer img{
                height: 25%;
                opacity: 1;
                filter: invert(1);
            }
            .sceneInfoAreaSceneImageHelperContainer:hover{
                opacity: 0;
            }

            #sceneInfoMobileSText{
                height: 35%; overflow-x: hidden;
            }
            #sceneInfoMobileSText p{
                margin-top: 5px; margin-bottom: 10px; color: white;
            }

            #sceneInfoMobileSImage{
                height: 35%; overflow-y: hidden;
            }

            #sceneInfoMobileSImage img{
                height: 100%;
            }
            .infoWindowMobile{
                display: none;
                width: 100%;
                height: calc(70vh - 75px);
                text-align: center;
                flex-direction: column;
                background-color: rgb(3, 25, 43);
            }
            .infoWindowList{
                display: block;
                overflow-x: hidden; 
                height: auto;
            }

            .progressbarZeus{
                position: absolute;
                width: 100%;
                height: 100vh;
                background-color: rgb(3, 25, 43);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                z-index: 50;
            }
            .progressbarZeus p{
                font-family: 'Izmir-Bold';
            }
            #progressbarValueZeus{
                width: 30%;
                margin-top: 0.5%;
                height: 2px;
            }
            /*PROGRESS COLOR*/
            progress::-moz-progress-bar { background: white; }
            progress::-webkit-progress-value { background: white; }
            progress { color: white; }
            progress{
                -webkit-appearance: none;
                appearance: none;
            
            }
            progress::-webkit-progress-value{
                background:white;
            }


        @media screen and (max-width: 1000px){
            .progressbarZeus{
                height: 50vh;
            }
            .sceneInfoMobile{
                display: none; width: 100%; height: 50vh; background-color: rgb(3, 25, 43); overflow-x: hidden; text-align: center;
            }
            
            .scenePickerUl{
                display: block;
                text-align: center;
                padding-bottom: 5vh;
                padding-top: 1vh;
            }
            .scenePickerMenu{
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .scenePickerContainer{
                position: absolute;
                display: flex;
                flex-direction: column;
                left: 0%;
                top: 0%;
                width: 100%;
                height: 50vh;
                z-index: 5;
                cursor: pointer;
                background-color: transparent;
                align-items: normal;
                transform: translateY(40vh);
            }
            #model{
                width: 100%;
                height: 100%;
                position: relative;
                display: flex;
                align-items: center; 
            }
            .modelContainer{
                width: 100%;
                height: 50vh;
                background-color: gray;
                margin: auto;
                overflow: hidden;
            }
            .infoWindowMobile{
                display: none;
            }
            .infoWindowList{
                display: none;
                background-color: rgb(3,25,43);
                height: 25vh;
            }
            
        }