@font-face {
    font-family: 'October Crow';
    src: url('fonts/october_crow.ttf');
}

@font-face {
    font-family: 'Yahfie';
    src: url('fonts/yahfie.ttf');
}

::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: none 
}

::-webkit-scrollbar-thumb {
    background: #ffffff60; 
}

::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.phasfont{
    font-family:"October Crow";
    letter-spacing: 1;
}

.yfont{
    font-family:"Yahfie";
}

.white{
    color: white;
}

.back-to-cheat-sheet{
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 6px;
    color: #ffffff !important;
    opacity: 0.3;
    transition: opacity 0.2s ease-in-out;
    top: 0;
    left: 0;
}

.back-to-cheat-sheet:hover{
    opacity: 1.0;
}

.back-to-cheat-sheet img{
    height: 30px;
    padding-right: 5px;
}

.back-to-cheat-sheet span{
    font-size: 12px;
}

@media screen and (pointer: fine) and (min-width: 800px),screen and (pointer: coarse) and (min-device-width: 601px) {
    hr{
        border: 1px dashed rgba(204, 204, 204, 0.26);
        margin: 5px;
        width: 95%;
    }

    body{
        border: 0;
        margin: 0;
        overflow: hidden;
        background-image: radial-gradient(circle, rgba(0,0,0,0.75), rgba(0,0,0,1)), url('https://zero-network.net/phasmophobia/static/imgs/background.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #hover_info {
        position: absolute;
        top:0;
        bottom:0;
        min-width: 150px;
        min-height: 30px;
        max-height: 120px;
        height: min-content;
        padding: 10px;
        border-radius: 5px;
        background-color: #ccc;
        color: #000;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: 0 0 10px 5px #161615
    }

    #verify_delete {
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100vh;
        background-color: #000000cc;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .option_box{
        width: 250px;
        height: auto;
        background-color: #313248;
        padding: 15px;
        border-radius: 15px;
        margin: 15px;
        color: #FFF;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .option_box h3{
        font-size: 14px;
        width: 95%;
    }

    #url-to-delete{
        width: 95%;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: bolder;
    }

    .cancel_button{
        background-color: #ccc;
        color: #000;
        cursor: pointer;
        padding:10px;
        margin: 10px;
        border: none;
    }
    .cancel_button:hover{
        background-color: #858585;
    }

    .delete_button{
        background-color: #cf3636;
        color: #fff;
        cursor: pointer;
        padding: 10px;
        margin: 10px;
        border: none;
    }
    .delete_button:hover{
        background-color: #862222;
    }

    #container {
        width: 80%;
        max-width: 900px;
        min-width: 850px;
        position: relative;
        max-height: calc(100vh - 60px);
        background: linear-gradient(45deg,rgba(49, 50, 72, 1) 25%, rgba(64, 49, 72, 1) 75%);
        padding: 15px;
        border-radius: 15px;
        margin: 15px;
        box-shadow: 5px 0px 10px 0px #000;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
    }

    #header{
        width: calc(100% - 20px);
        margin: 0 10px;
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        align-items: flex-start;
        padding-bottom: 10px;
    }

    #title{
        padding: 15px 0;
        color: #ccc;
        font-size: 20px;
        font-family: 'October Crow';
        font-weight: bold;
        letter-spacing: 4px;
        text-align: left;
    }

    .discord_block{
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    #discord_avatar{
        width: 48px;
        margin-bottom: 2px;
    }

    #discord_name{
        color: #ccc;
        text-decoration: none;
        margin-right: 10px;
        text-align: right;
    }

    .logout{
        color: #757575;
        cursor: pointer;
        text-decoration: none;
        font-size: 12px;
        text-align: right;
    }

    .logout:hover{
        color: rgb(88,101,242);
    }

    #discord_login{
        color: #ccc;
        cursor: pointer;
        text-decoration: none;
        margin-right: 10px;
    }

    #discord_login:hover{
        color: rgb(88,101,242);
    }

    .avatar{
        height: 48px;
        border-radius: 50%;
        border: solid white 1px;
    }

    #controls{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: 40px;
    }

    .controls-section{
        flex:1;
        width: 33%;
        margin:5px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        align-content: stretch;
        color: #ccc;
        font-weight: bold;
    }

    #saved-title{
        width: 50px;
    }

    #saved-ids{
        border: none;
        background: rgba(0,0,0,0.25);
        box-shadow: inset 0 0 10px #161615;
        padding: 5px 10px;
        width: calc(100% - 60px);
        height: 30px;
        color: white;
        font-size: 1em;
        outline: none;
        text-align: center;
        margin-left: 10px;
        cursor: pointer;
    }

    #saved-ids:focus-visible{
        outline: none;
        border: none;
    }

    #saved-ids option{
        background-color: #161615;
        cursor: pointer;
        text-align: left;
    }

    #delete-ids{
        height: 80%;
        cursor: pointer;
        opacity: 0.7;
    }

    #delete-ids:hover{
        opacity: 1.0;
    }

    .disabled{
        opacity: 0.1 !important;
        pointer-events: none !important;
    }

    .zn-input{
        border: none;
        background: rgba(0,0,0,0.25);
        box-shadow: inset 0 0 10px #161615;
        padding: 10px;
        width: calc(100% - 70px);
        height: 30px;
        color: white;
        font-size: 1em;
        outline: none;
        text-align: center;
        margin-right: 10px;
    }

    .zn-button{
        width: 60px;
        height: 30px;
        cursor: pointer;
        border: none;
        margin: 0px 2px;
        padding: 5px;
        background: #ccc;
    }

    .zn_button:hover{
        background: rgb(128, 128, 128);
    }

    .section_title{
        align-self: center;
        padding: 0;
        margin: 5px;
    }

    #custom_data{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: calc(100vh - 300px);
        position: relative;

    }

    #player{
        width: 33%;
        color: #ccc;
        font-family: 'Yahfie';
        box-shadow: inset 0 0 10px #161615;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 5px;
        margin: 0px 5px 20px 5px;
        padding: 5px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
    }

    #ghost{
        width: 33%;
        color: #ccc;
        font-family: 'Yahfie';
        box-shadow: inset 0 0 10px #161615;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 5px;
        margin: 0px 5px 20px 5px;
        padding: 5px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
    }

    #contract{
        width: 33%;
        color: #ccc;
        font-family: 'Yahfie';
        box-shadow: inset 0 0 10px #161615;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 5px;
        margin: 0px 5px 20px 5px;
        padding: 5px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
    }

    #multiplier{
        width: 33%;
        background-color: #ccc;
        font-family: 'Yahfie';
        border-radius: 15px;
        font-size: 42px;
        font-weight: bolder;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 10px;
        align-self: center;
        position: relative;
        cursor:default;
    }

    .info{
        width: 100%;
        overflow-y: scroll;
    }

    .option_title{
        margin-left: 5px;
        min-height: 20px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .option_picker{
        border-radius: 5px;
        border: none;
        color: #FFF;
        background: rgba(0, 0, 0, 0.25);
        box-shadow: inset 0 0 10px #161615;
        height: 30px;
        width: calc(100% - 20px);
        font-size: 24px;
        margin: 2px 10px 20px 10px;
        padding-top: 5px;
        font-family: 'Yahfie';
        cursor: pointer;
    }

    .option_picker:focus-visible{
        outline: none;
        border: none;
    }

    .option_picker option{
        background-color: #161615;
        cursor: pointer;
    }

    #flash_message{
        color: #ccc;
        background-color: #000000dd;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 20;
        right: 0;
        z-index: 14;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        border-radius: 5px;
    }

    .share_icon{
        position: absolute;
        z-index: 20;
        width: 30px;
        bottom: 20px;
        right: 20px;
        cursor: pointer;
        opacity: 0.6;
    }

    .share_icon:hover{
        opacity: 1.0;
    }

    .dot-flashing {
        margin: 10px;
        align-self: center;
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #666;
        color: #666;
        animation: dotFlashing 1s infinite linear alternate;
        animation-delay: .5s;
    }

    .dot-flashing::before, .dot-flashing::after {
        content: '';
        display: inline-block;
        position: absolute;
        top: 0;
    }

    .dot-flashing::before {
        left: -15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #666;
        color: #666;
        animation: dotFlashing 1s infinite alternate;
        animation-delay: 0s;
    }

    .dot-flashing::after {
        left: 15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #666;
        color: #666;
        animation: dotFlashing 1s infinite alternate;
        animation-delay: 1s;
    }

    @keyframes dotFlashing {
        0% {
            background-color: #ccc;
        }
        50%,
        100% {
            background-color: #666;
        }
    }

    #apoc-icon{
        position: absolute;
        height: 40px;
        right: -20px;
        top: 5px;
        transform: rotate(22deg);
    }

    .option-icon{
        height: 20px;
        margin-left: 5px;
        filter: brightness(1.3);
        cursor: pointer;
    }

    #copyright{
        position: absolute;
        bottom: 10px;
        left: 15px;
        font-size: 10px;
        color: #858585;
    }
}

@media screen and (pointer: fine) and (min-width: 800px) and (max-width: 899px),screen and (pointer: coarse) and (min-device-width: 601px) {
    #container {
        min-width: 750px;
    }

    .option_title{
        font-size: 16px;
    }
}

.increase{
    background: linear-gradient(90deg, rgba(0,129,0,0.75) 0%, rgba(0,0,0,0.25) 50%) !important;
}

.decrease{
    background: linear-gradient(90deg, rgba(144,44,0,0.75) 0%, rgba(0,0,0,0.25) 50%) !important;
}

.conflict{
    background: linear-gradient(90deg, rgba(133,99,0,0.75) 0%, rgba(0,0,0,0.25) 50%) !important;
}

.clamp{
    background: linear-gradient(90deg, rgba(102,0,0,0.75) 0%, rgba(0,0,0,0.25) 50%) !important;
}

.global-conflict{
    color: rgba(133,99,0,1) !important;
}

.global-clamp{
    color: rgba(102,0,0,1) !important;
}