@import url('tokens.css');

a { text-decoration: none; }
body a { color: var(--color-accent-primary); }
body a:hover { color: var(--color-accent-secondary); }

header {
    font-family:        var(--font-header);;
    position:           sticky;
    top:                0;
    padding-top:        1em;
    padding-bottom:     0;
    padding-left:       0;
    text-align:         center;
    margin:             0;
    color:              var(--color-text-header);
    background-color:   var(--color-background-header);
}

header :is(h1, a) {
    margin:             0;
    padding:            0;
    color:              var(--color-text-header);
    text-decoration:    none;
    text-align:         center;
}

.rasQals {
    display:            grid;
    grid-template-columns: 1fr 1fr 1fr;
    white-space:        nowrap;
    align-items:        center;
    text-decoration:    none;
    color:              var(--color-text-header);
}

.rasQals h1 {
    justify-self:       center;
    margin: 0;
}

.rasQals .options {
    display:            flex;
    flex-wrap:          nowrap;
    flex-direction:     row;
    justify-content:    flex-end;
    text-decoration:    none;
    fill:               var(--color-text-header);
    vertical-align:     middle;
    position:           relative;
    gap:                1em;
    padding-right:      1em;
}

.rasQals .mode-toggle, .rasQals .account {
    height:             3em;
    width:              1.7em;
    top:                0em;
}


.navigation {
    padding-top:        0;
    padding-bottom:     0;
    margin:             0;
    border:             0;
    height:             2.5em;
    align-items:        center;
    display:            flex;
    gap:                2em;
    flex-direction:     row;
    flex-wrap:          nowrap;
    white-space:        nowrap;
    justify-content:    space-evenly;
}

mu-dropdown {
    position:           relative;
    overflow:           visible;
}

menu {
    position:           absolute;
    top:                100%;
    right:              0;
    z-index:            9999;
    background:         var(--color-background-card);
    border-radius:      0.75em;
    border-style:       solid;
    border-width:       5px;
    border-color:       var(--color-accent-primary);
    color:              var(--color-text);
    font-family:        var(--font-body);
    justify-content:    space-around;
    padding-right:      1.5em;
    padding-left:       1.5em;
    padding-top:        0.25em;
    padding-bottom:     0.25em;
}

menu div.one-link:is(:hover, :active, .current) {
    color:              var(--color-accent-primary);
    fill:               var(--color-accent-primary);
    cursor:             pointer;
}

menu div.one-link {
    display:            flex;
    flex-direction:     row;
    align-items:        center;
    justify-content:    space-between;
    gap:                0.75em;
    border-bottom:      2px solid var(--color-border);
    text-decoration:    none;
    color:              inherit;
}

menu div.one-link:last-child {
    border-bottom:      none;
}

menu div.one-link h2 {
    flex:               1;
    text-align:         right;
}

body {
    margin:             0;
    color:              var(--color-text);
    background-color:   var(--color-background-page);
    font-family:        var(--font-body);
}

.main-box {
    display:            flex;
    flex-direction:     column;
    background-color:   var(--color-background-card);
    border-radius:      1em;
    padding:            2em;
    text-align:         left;
    margin:             1em;
}

.hero-box {
    display:            grid;
    grid-template-columns: 5fr 2fr;
    background-color:   var(--color-background);
    padding:            2em;
    gap:                1em;
}

.hero-box div {
    background-color:   var(--color-background-card);
    border-radius:      1em;
    padding:            1em;
    gap:                1em;
    text-align:         center;
}

.navigation a {
    color:              var(--color-text-header);
}

.navigation a:is(:hover, :active, .current) {
    color:              var(--color-accent-primary);
}

.rasQals .account:hover {
    fill:               var(--color-accent-primary);
}

.rasQals .mode-toggle {
    transform:          translate(0em,-0.1em);
    scale:              0.98;
    cursor:             pointer;
}

.rasQals .mode-toggle .light { 
    display:            none;
}
.rasQals .mode-toggle:hover .dark {
    display:            none;
    fill:               var(--color-accent-primary);
}
.rasQals .mode-toggle:hover .light {
    display:            inline;
    fill:               var(--color-accent-primary);
}


header h1 svg.icon {
    display:            inline;
    height:             1em;
    width:              1em;
    fill:               currentColor;
    position:           relative; 
    top:                0.265em;
}

header .navigation svg.icon {
    display:            inline;
    vertical-align:     middle;
    fill:               currentColor;
    position:           relative;
    height:             2em;
    width:              1.7em;
    top:                0em;
}

.title {
    border-bottom:      2px solid var(--color-accent-primary);
}