:root {
    --color-primary: #304770;
    --color-alternate: #45aaff;
    --color-background: #FFF;
    --color-text: #000;
    --margin-standard: 0.5em;
    --margin-compact: 0.3em;
    --margin-half-standard: 0.25em;
    --margin-half-compact: 0.15em;
    --header-height: 2.5rem;
    --header-font-size: 1.15rem;
    --header-shadow: 0 0 16px 0px rgba(0, 0, 0, 0.3);
    --header-title-bg: #EFEFEF;
    --header-button-bg: #585868;
    --header-button-bg-hover: #686878;
    --header-button-bg-open: #585868;
    --panel-button-size: 10rem;
    --panel-size: 25rem;
    --header-animation-speed: 0.2s;
    --border-standard: solid 2px;
    --border-standard-primary: var(--border-standard) var(--color-primary);
    --border-elevated: solid 1px #888;
    --radius-elevated: 0.5em;
    --shadow-elevated: 2px 3px 10px -2px rgba(0, 0, 0, 0.3);
}

html, body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
}
#title-header>h2 { 
    color: var(--color-alternate);
}


#title-header {
    z-index:100;
    font-size:var(--header-font-size);
    height:var(--header-height);
    box-shadow: var(--header-shadow);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--header-title-bg);
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    font-weight:bold;
    padding:0 var(--panel-button-size);
}
#title-header>:is(h1,h2,h3,h4,h5,h6) {
    font-size:1em;
}
#title-header>:is(h1,h2,h3,h4,h5,h6)+:is(h1,h2,h3,h4,h5,h6):not(:empty) {
    padding-left: 0.25em;
    margin-left: 0.25em;
    border-left: var(--border-standard) #CCC;
}

#notification-header {
    cursor:pointer;
    z-index:300;
    font-size:var(--header-font-size);
    height:var(--header-height);
    box-shadow: var(--header-shadow);
    position: fixed;
    top: 0;
    left: 0;
    width: var(--panel-button-size);
    max-width: 50%;
    background: var(--header-button-bg);
    display:flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    font-weight:bold;
    color: #CCC;
    border-radius: 0em 0.5em 1.5em 0em;
    cursor: pointer;
    transition: border-radius var(--header-animation-speed), width var(--header-animation-speed);
}

#notification-header.open {
    width:var(--panel-size);
    border-radius:0;
}


#notification-box {
    z-index:200;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height);
    left: -50%;
    bottom: 0;
    width: var(--panel-size);
    max-width: 50%;
    background: #282828;
    color: #FFF;
    transition: left var(--header-animation-speed);
    overflow-x:hidden;
    overflow-y:auto;
}

#notification-box.open {
    left: 0;
}

#menu-header {
    cursor:pointer;
    z-index:300;
    font-size:var(--header-font-size);
    height:var(--header-height);
    box-shadow: var(--header-shadow);
    position: fixed;
    top: 0;
    right: 0;
    width: var(--panel-button-size);
    max-width: 50%;
    background: var(--header-button-bg);
    display:flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    font-weight:bold;
    color: #CCC;
    border-radius: 0.5em 0em 0em 1.5em;
    cursor: pointer;
    transition: border-radius var(--header-animation-speed), width var(--header-animation-speed);
}

#menu-header:is(.open, :focus-within) {
    width:var(--panel-size);
    border-radius:0;
}

#menu-box {
    z-index:200;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height);
    right: -50%;
    bottom: 0;
    width: var(--panel-size);
    max-width: 50%;
    background: #282828;
    color: #FFF;
    transition: right var(--header-animation-speed);
    overflow-x:hidden;
    overflow-y:auto;
}

#menu-box:is(.open, :focus-within) {
    right: 0;
}

:is(#notification-header, #menu-header):hover {
    background:var(--header-button-bg-hover);
}

:is(#notification-box, #menu-box)>hr {
    margin-left:1em;
    margin-right:1em;
    width:auto;
}

hr {
    border: 0;
    border-left: var(--border-elevated);
    border-bottom: var(--border-elevated);
}



#menu-box>:is(a, div) {
    padding: calc(var(--margin-standard) * 1.5);
    text-align: center;
    text-decoration: none;
    font-size: 1.15em;
}
#menu-box>a {
    color: #AAA;
    font-weight: bold;
}
#menu-box>div {
    color: #FFF;
}
#menu-box>.small {
    font-size:0.9em;
}
#menu-box>a:hover {
    color: #FFF;
    background: #474748;
}


.home-nav {
    display:flex;
    flex-direction:row;
    gap:calc(var(--margin-standard) * 2);
    margin:var(--margin-standard);
    flex-wrap: wrap;
}
.home-nav-section {
    container-type: inline-size;
    flex:1 1 30%;
    min-width: 18em;
    max-width: 100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    /* border:solid 1px #000; */
    border: var(--border-elevated);
    border-radius: var(--radius-elevated);
    box-shadow: var(--shadow-elevated);
    gap:calc(var(--margin-standard)*2);
    padding:calc(var(--margin-standard)*2);
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
.home-nav-section>:is(a, div) {
    display: block;
    font-size:1.3em;
    width: 100%;
    flex: 1 1 auto;
}
.home-nav-section>.small {
    font-size:1em;
}
.home-nav-section>a {
    padding:calc(var(--margin-standard)*1.5);
    background: var(--color-primary);
    box-shadow: 0.2em 0.2em 0.5em 0 rgba(0,0,0,0.5);
    color: #CCC;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
}
.home-nav-section>a:hover {
    background: #5c7299;
    color: #FFF;
}



.notification-group {
    display:flex;
    flex-direction:column;
    padding:var(--margin-standard);
}
.notification-item {
    padding:var(--margin-standard) 0;
    position:relative;
    padding-right:1.5em;
}
.notification-group:nth-child(n+2) {
    border-top:solid 1px #888;
}
.notification-time {
    font-weight: bold;
}
.notification-content {
    margin-left:calc(var(--margin-standard)*2);
}
.notification-clear,
.notification-link {
    display:none;
    position:absolute;
    right: 0;
    text-decoration:none;
    background:none;
    border:0;
    font-size:1em;
    margin:0;
    padding:0.25em;
    width:1em;
    text-align:center;
    box-sizing:content-box;
    cursor:pointer;
}
.notification-clear {
    color:#F00;
    top: 0;
}
.notification-link {
    color:#08F;
    bottom: 0;
}
.notification-clear:hover {
    color:#F88;
}
.notification-link:hover {
    color:#8CF;
}
.notification-item:hover :is(.notification-clear,.notification-link) {
    display:block;
}

.notification-controls {
    display:flex;
    margin:var(--margin-standard);
}

/* @TODO notification control button :3 */
.notification-clearall-popover {
    border: var(--border-standard-primary);
    padding: var(--margin-standard);
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
    border-radius: var(--margin-standard);
}

.notification-clearall-popover .notification-input-button {
    align-self: flex-end;
}


dialog, [popover] {
    border: var(--border-standard-primary);
    padding: var(--margin-standard);
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
    border-radius: var(--margin-standard);
}

::backdrop {
    background: #00000040;
}



@media not print {
    body.logged-in {
        padding-top:calc(var(--header-height));
    }
}


@media print {
    #title-header,
    #notification-header,
    #menu-header, 
    #menu-box,
    #notification-box {
        display:none;
    }
}


@container (min-width: 640px) {
    .home-nav-section>:is(a, div) {
        width: 30%;
    }
}