/* debug only */
.debug{
    outline-color: rgb(187, 18, 147);
    outline-width: 1px;
    outline-style: solid;
}

:root{

    /* color definitions */

    --clr-primary-light: hsl(226,100%,91%);
    --clr-primary-medium: hsl(226,100%,89%);
    --clr-primary-dark: hsl(225,63%,61%);

    --clr-secondary-light: hsl(225,100%,87%);
    --clr-secondary-dark: hsl(225,40%,50%);

    --clr-text-extralight: hsl(225,40%,92%);
    --clr-text-light: hsl(226,100%,90%);
    --clr-text-dark: hsl(225,40%,29%);
    --clr-text-accent: hsl(53,100%,58%);

    /* border radius definition */
    --br: 0.22rem;

}

/* font definitions */
@font-face{
    font-family: 'title-font';
    font-weight: 400;
    src: url('../assets/fonts/amphora.woff2') format('woff2'),
         url('../assets/fonts/amphora.woff') format('woff');
}
@font-face{
    font-family: 'logo-font';
    font-weight: 400;
    src: url('../assets/fonts/courgette.woff2') format('woff2'),
         url('../assets/fonts/courgette.woff') format('woff');
}

/* global properties */

*{
    margin: 0%;
    padding: 0%;
}

img{
    display:block;
    max-width: 100%;
}

/* top nav-bar */

header{
    padding: 0.2rem;
    padding-left: 0.8rem;
    display: flex;
    justify-content: space-between;
    font-family: 'title-font', serif;
    background-color: var(--clr-secondary-dark);
}

header a{
    color: var(--clr-text-extralight);
    text-decoration: none;
}

.nav-bar-logo{
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'logo-font', serif;
}

.nav-bar-button-group ul{
    display: flex;
    list-style: none;
    gap: 0.2rem;
}

.nav-bar-button-group a{
    display:block;
    padding: 0.2rem 1rem;
    border-radius: var(--br);
}

.nav-bar-button-group a:hover,
.nav-bar-button-group a:focus-visible
{
    color: var(--clr-text-dark);
    background-color: var(--clr-primary-light);
}

.nav-bar-button-group .active-page-button{
    color: var(--clr-text-dark);
    background-color: var(--clr-secondary-light);
}

.nav-bar-button-group .accented-button{
    color: var(--clr-text-accent);
}