:root {
    --default-font: 'inconsolata';
    --border-radius: 7px;

    --light-main-color: #F1EEE9;
    --light-sub-color: #73777B;
    --light-accent-color: #5fba8d;
    --light-accent-sub-color: #2a293b;
    --light-shadow : 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;

    --dark-main-color: #fffeff;
    --dark-back-color: #243447;
    --dark-sub-color: #5fba8d;
    --dark-accent-color: #5fba8d;
    --dark-accent-sub-color: #243447;
    --dark-shadow :   5px 5px 10px #1f2c3c, -5px -5px 10px #293c52;

}

html, body {
    user-select: none;
    font-family: var(--default-font);
    height: 100%;
}

p {
    font-size: 10.5px;
    color: var(--light-sub-color);
    margin: 0px;
    font-family: var(--default-font);
}

a {
    color: #aaa;
    font-size: 10.5px;
    text-decoration: none;
    font-family: var(--default-font);
}

input {
    font-family: var(--default-font);
}

label {
    font-family: var(--default-font);
}

select {
    font-family: var(--default-font);
}

button {
    font-family: var(--default-font);
    width: 100%;
    border: none;
}

nav {
    width: 100%;
    height: 40px;
}

ul {
    display: flex;
}

li {
    list-style: none;
    margin: 2rem 0;
}

label {
    font-size: 10.5px;
}

#main{
    padding: 10.5px;
    background-color: var(--light-main-color);
}

#logo {
    font-size: 15px;
    padding-right: 30px;
    padding-left: 5px;
    font-family: var(--default-font);
    color: var(--light-accent-color);
}

#indicator{
    margin-top: 10px;
    padding: 5px;
    border-radius: var(--border-radius);
    border: 1px solid var(--light-sub-color);
}

#File{
    color: var(--light-sub-color);
    background-color: var(--light-main-color);
    cursor: pointer;
    width: 100%;
    text-align: center;
}

#FileOpen{
    border: 2px solid var(--light-accent-color);
    margin-bottom: 5px;
}

#Download{
    color: #ffffff;
    background-color: var(--light-accent-color);
    cursor: pointer;
    width: 100%;
}

#filterParam{
    padding: 10px;
    box-shadow: var(--light-shadow);
    border-radius: var(--border-radius);
}

#ResetParam{
    margin-top: 20px;
    color: #e0e0e0;
    background-color: var(--light-accent-sub-color);
}

.presetButton{
    margin-top: 10px;
    color: #ffffff;
    background-color: var( --dark-accent-color);
}

#sourceImage  {
    padding-top: 20px;
}

#sourceCanvas {
    border-radius: var(--border-radius);
    width: 100%;
    box-shadow: var(--light-shadow);
}

.croppedCanvas {
    width: 100%;
    box-shadow: var(--light-shadow);
    border-radius: var(--border-radius);
    color: var(--light-sub-color);
}

#controlPanel #PhotoView {
    width: 100%;
    background-color: var(--light-main-color);
    border-radius: var(--border-radius);
}

#PhotoWrapper {
    padding-top: 20px;
}

.editList{
    padding-top: 10px;
}

.StyleBox {
    border: 1px solid var(--light-sub-color);
    border-radius: var(--border-radius);
}

.accordion {
    box-shadow: var(--light-shadow);
    border-radius: var(--border-radius);
}

/* Fontselect*/
/*JP*/
#IPAex{font-family: 'IPAex';}
#Timemachine-wa{font-family: 'Timemachine-wa';}
#Senobi-Gothic{font-family: 'Senobi-Gothic';}
#Kirin{font-family: 'Kirin';}
#Kiwimaru-Regular{font-family:'Kiwimaru-Regular';}
#Kosugi-Maru{font-family:'Kosugi-Maru';}
#KleeOne-Regular{font-family:'KleeOne-Regular';}
#Train-One{font-family:'Train-One';}
#Rampart-One{font-family:'Rampart-One';}

/*World*/
#Archivo-Narrow{font-family:'Archivo-Narrow';}
#CornerStone{font-family: 'CornerStone';}
#Cardo{font-family:'Cardo';}
#inconsolata{font-family:'inconsolata';}
#Lato{font-family:'Lato';}
#Manrope{font-family:'Manrope';}
#Montserrat{font-family:'Montserrat';}
#Neuton{font-family:'Neuton';}
#Oraniebaum{font-family: 'Oraniebaum';}
#Prokopis{font-family: 'Prokopis';}
#Smarta{font-family:'Smarta';}

/* モバイル向けのスタイル */
/* 768px 未満 */
@media not screen and (min-width: 768px) {
    #controlPanel  {
        flex-wrap: wrap;
    }
    .editView  {
        flex-wrap: wrap;
    }
    .output {
        width:100%;
    }
    /* .cropper-container div{
        width:100%;
    } */
}

/* デスクトップ向けのスタイル */
/* 768px 以上 */
@media screen and (max-width: 768px) {
    /*ソースキャンバス*/
    #sourceImage  {
        max-height: 350px;
        width: 100%;
        border-radius: var(--border-radius);
    }

    #sourceCanvas {
        width: 100%;
        max-height: 350px;
        display: none;
    }

    .croppedImage{
        width: 100%;
        max-height: 350px;
        border-radius: var(--border-radius);
    }

    /*クロップ後キャンバス*/
    .croppedCanvas {
        width: 100%;
        max-height: 350px;
        /* padding-top: 26px; */
        /* display: block; */
    }
}

@media (prefers-color-scheme: dark) {
    .accordion {
        --bs-accordion-bg: var(--dark-accent-sub-color);
        --bs-accordion-color: var(--dark-main-color);
        box-shadow: var(--dark-shadow);
    }

    .accordion-item {
        border: none;
    }

    .accordion-button:not(.collapsed){
        box-shadow: none;
    }

    .accordion-button:focus {
        border-color: var(--light-accent-color) !important;
    }

    body {
      background-color: var(--dark-accent-sub-color);
      color: #eeeeee;
    }

    p {
        color: #aaaaaa;
    }
    select {
        background-color: var(--dark-main-color);
    }

    #sourceCanvas {
        box-shadow: var(--dark-shadow);
    }
    
    .croppedCanvas {
        box-shadow: var(--dark-shadow);
    }

    #filterParam {
        box-shadow: var(--dark-shadow);
        background-color: var(--dark-accent-sub-color);
    }

    #indicator{
        border: 1px solid var(--dark-main-color);
    }

    #indicator p{
        color: var(--dark-main-color);
    }

    #logo {
        color: green;
    }

    #main{
        background-color: var(--dark-back-color);
    }

    .PhotoView {
        background-color: var(--dark-sub-color);
    }

    #File{
        color: var(--dark-sub-color);
        background-color: var(--dark-main-color);
        cursor: pointer;
        width: 100%;
    }

    #FileOpen{
        color: #ffffff;
    }
    
    #Download{
        color: #ffffff;
        background-color: var(--dark-accent-color);
        cursor: pointer;
        width: 100%;
    }
    
    #ResetParam{
        color: var(--dark-accent-sub-color);
        background-color: var(--dark-main-color);
    }
}