/* stylesheet for windows and buttons */

@media(prefers-color-scheme:light){
    body{
        /* General buttons */
        button{
            background-color:rgb(195, 170, 255);
            color:black;
            border-color:rgb(179, 147, 255);
        }
        button:hover{background-color:rgba(128, 0, 128, 0.5);}
        /* Navigation window */
        .nav-window{border-color:rgb(179, 147, 255);}
        .nav-window-titlebar{
            background-color:rgb(195, 170, 255);
            border-bottom-color:rgb(179, 147, 255);
        }
        .nav-window-icon button{color:black;}
        .nav-window-icon button:hover{background-color:rgba(128, 0, 128, 0.25);}
        .nav-window-content{
            background-color:#dddddd80;
            backdrop-filter:blur(0.25rem);
        }
        .nav-window-content a:hover{background-color:rgb(195, 170, 255);}
        #current-page{background-color:#cbcac1;}
        #current-page:hover{background-color:rgb(195, 170, 255);}
        /* General window */
        .window{border-color:rgb(179, 147, 255);}
        .window-titlebar{
            background-color:rgba(195, 170, 255,0.9);
            border-bottom-color: rgb(179, 147, 255);}
        .window-content{background-color:#dddddda0;}
        .window-bottom-bar{
            background-color:rgba(195,170,255,0.9);
            border-top-color:rgb(179, 147, 255);
        }
        /* Details and summary */
        details{
            background-color:rgba(179,147,255,0.75);
            border-color:rgb(179,147,255);
        }
        details summary{
            background-color:rgba(195,170,255,0.75);
            border-bottom-color:rgb(179,147,255);
        }
    }
}
@media screen and (max-width:800px){
    body{
        .nav-window-icon{
            text-align:left;
            padding-left:0.25rem;
        }
        .nav-window-titlebar{
            flex-direction:row row-reverse;
        }
    }
}

/* Buttons */
button{
    background-color:darkslateblue;
    color:#dedede;
    border-radius:0.25rem;
    border-color:rgb(54, 45, 112);
    font-family:'Times New Roman', Times, serif;
    font-size:1rem;
}
button:hover{background-color:#dddddd50;}

/* Navigation window */
.nav-window{
    border:0.1rem solid;
    border-color:rgb(54, 45, 112);
    border-radius:0.75rem;
    box-shadow:0 0.25rem 0.25rem 0 rgba(0,0,0,0.2);
    overflow:hidden;
    position:sticky;
    top:0;
}
.nav-window-titlebar{
    background-color:darkslateblue;
    padding:0.1rem;
    gap:0.25rem;
    display:flex;
    align-items:center;
    justify-content:left;
    padding-left:0.0625rem;
    border-bottom:0.1rem solid;
    border-bottom-color:rgb(54, 45, 112);
}
.nav-window-icon{
    font-family:'Courier New', Courier, monospace;
    text-align:center;
}
.nav-window-icon button{
    background:transparent;
    border:none;
    font-family:'Courier New', Courier, monospace;
    color:#dedede;
    font-size:1rem;
}
.nav-window-icon button:hover{
    background-color:#dddddd50;
    border-radius:0.25rem;
}
.nav-window-title{
    font-family:'Courier New', Courier, monospace;
    font-size:1.2rem;
    padding-left:0.25rem;
    padding-top:0.25rem;
}
.nav-window-content{
    padding:0.625rem;
    background-color:rgba(37, 37, 37, 0.5);
    backdrop-filter:blur(0.125rem);
    display:flex;
    gap:0.9rem;
    flex-wrap:wrap;
    justify-content:center;
}
.nav-window-content a{
    font-size:1.2rem;
    text-decoration:none;
    padding:0.25rem;
}
.nav-window-content a:hover{
    text-decoration:underline;
    background-color:rgba(71,61,139,0.5);
    border-radius:1rem;
}
.nav-window-collapsed{display:none;}

#current-page{
    background-color:#1a1a1a;
    border-radius:1rem;
}
#current-page:hover{
    text-decoration:underline;
    background-color:rgba(71, 61, 139, 0.5);
}

/* General window */
.window{
    border:0.1rem solid;
    border-color:rgb(54, 45, 112);
    border-radius:0.75rem;
    box-shadow:0 0.25rem 0.25rem 0 rgba(0,0,0,0.2);
    overflow:hidden;
    margin-bottom:1.5rem;
}
.window-titlebar{
    background-color:rgba(71, 61, 139, 0.9);
    border-bottom:0.1rem solid;
    border-bottom-color:rgba(54, 45, 112,1);
}
.window-title{
    font-family:'Courier New', Courier, monospace;
    font-size:1.2rem;
    text-align:center;
    padding:0.25rem;
}
.window-content{
    padding:0.625rem 1.2rem 0.625rem 1rem;
    background-color:#252525b0;
    height:100%;
}
.window-bottom-bar{
    background-color:rgba(71, 61, 139, 0.9);
    border-top:0.1rem solid;
    border-top-color:rgba(54,45,112,1);
    height:2.125rem;
}

.window-collapsed{display:none;}

/* Details and summary */
details{
    background-color:rgba(54,45,112,0.75);
    border-radius:0.25rem;
    border:0.1rem solid;
    border-color:rgb(54,45,112);
    box-shadow:0 0.25rem 0.25rem 0 rgba(0,0,0,0.2);
}
details p{
    padding:0 1.25rem 0 1.25rem;
}
details summary{
    background-color:rgba(71, 61, 139, 0.75);
    border-bottom:0.1rem solid;
    border-bottom-color:rgb(54,45,112);
    padding:0 0 0 0.625rem;
    box-shadow:0 0.25rem 0.25rem 0 rgba(0,0,0,0.2);
}