/*******************************************************************************
 * Font faces
 ******************************************************************************/
@font-face {
    font-family: WorkSans;
    font-style: normal;
    font-weight: 400;
    /* font-display: swap; */
    /* font-display: block; */
    src: url("/static/Work_Sans/static/WorkSans-Regular.ttf");
}

@font-face {
    font-family: WorkSans;
    font-style: normal;
    font-weight: 700;
    /* font-display: swap; */
    /* font-display: block; */
    src: url("/static/Work_Sans/static/WorkSans-Bold.ttf");
}

@font-face {
    font-family: WorkSans;
    font-style: normal;
    font-weight: 900;
    /* font-display: swap; */
    /* font-display: block; */
    src: url("/static/Work_Sans/static/WorkSans-Black.ttf");
}


/*******************************************************************************
 * Colors
 ******************************************************************************/

:root {
    --fdf-blå:      #5F8CB4;
    --nat-blå:      #003255; /* Leder */
    --hvid:         #FFFFFF;
    --efterårsrød:  #D22832; /* Tumling */
    --syren:        #9182C8; /* Numling */
    --korngul:      #FFB91E; /* Pusling */
    --græsgrøn:     #7DC855; /* Pilt */
    --søblå:        #4678C8; /* Væbner */
    --granit:       #7D878C; /* Seniorvæbner */
    --flammefarvet: #FF733C; /* Senior */
}


/*******************************************************************************
 * core
 ******************************************************************************/
* {
    box-sizing: border-box;
}
html {
    /* font-family: "WorkSans", sans-serif; */
    font-family: WorkSans;
    font-size: 16px;
}

body {
    /* background-color: red; */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}
h1 {
    font-size: 1.6em;
}
h2 {
    font-size: 1.5em;
}
h3 {
    font-size: 1.4em;
}
h4 {
    font-size: 1.3em;
}
h5 {
    font-size: 1.2em;
}
h6 {
    font-size: 1.1em;
}


/*******************************************************************************
 * Brev
 ******************************************************************************/
body.brev {
    background-color: var(--fdf-blå);
}

body.brev main {
    background-color: var(--hvid);
    margin: 50px 100px 100px 100px;
    padding: 40px;
}

@media (width < 600px) {
    body.brev main {
        margin: 2px;
        padding: 2px;
    }
}
body.brev input {
    display: block;
    margin-bottom: 10px;
}
body.brev input[type="text"] {
    width: 100%;
    height: 30px;
    border: 2px solid var(--fdf-blå);
    border-radius: 8px;
}
body.brev input[type="date"] {
    height: 30px;
    border: 2px solid var(--fdf-blå);
    border-radius: 8px;
}
body.brev textarea {
    display: block;
    margin-bottom: 10px;
    width: 100%;
    height: 500px;
    border: 2px solid var(--fdf-blå);
    border-radius: 8px;

}

body.brev input[type="submit"] {
    padding: 0.5em 1em;
    border-radius: 5px;
    border: 0px transparent;
    background-color: var(--fdf-blå);
    cursor: pointer;
    font-weight: 900;
    color: var(--hvid);
}
body.brev input[type="submit"]:hover {
    filter: brightness(1.2);
    box-shadow: 2px 2px 5px var(--nat-blå);
}
body.brev input[type="submit"]:active {
    filter: brightness(0.8);
    box-shadow: 0px 0px 2px var(--nat-blå);

}


/*******************************************************************************
 * Postmester
 ******************************************************************************/

body.postmester {
    /* margin: 5px; */
    /* background-color: red; */
}
body.postmester section.head {
    background-color: var(--fdf-blå);
    page-break-after: always;
    color: var(--hvid);
    padding: 20px;
    text-align: center;
    margin: 0px 0px 100px 0px;
}

body.postmester section.head h1{
    /* background-color: var(--fdf-blå); */
    font-size: 5em;
}

body.postmester article > div.head {
    /* border: 2px solid var(--fdf-blå); */
    border-radius: 4px;
    background-color: var(--fdf-blå);
    color: var(--hvid);
    padding: 10px;
    margin: 0px 0px 20px 0px;
}

body.postmester article > div.head > h1 {
    margin: 0px;
    /* margin: 5px 0px 5px 10px; */
}
body.postmester article > div.head > h2 {
    /* margin: 5px 0px 5px 10px; */
    margin: 0px;
    font-size: 1em;
}

body.postmester article {
    page-break-after: always;
    margin: 0px 0px 20px 0px;
}

body.postmester article img.small {
    width: 49%;
}
body.postmester article img.large {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

body.postmester .text {
    width: 100px;
    width: 100%;
    /* overflow: scroll; */
    white-space: pre-wrap;
}
/*******************************************************************************
 * Print
 ******************************************************************************/

@media print {
    @page {
        size: A4;
    }
}