@import "vars";

/* Fonts */

@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); font-display: swap; }
@font-face { font-family: Twemoji; src: url(../fonts/TwitterColorEmoji.ttf); font-display: swap; }
@font-face { font-family: Cantarell; font-weight: normal; src: url(../fonts/Cantarell-Regular.otf); font-display: swap; }
@font-face { font-family: Cantarell; font-weight: bold; src: url(../fonts/Cantarell-Bold.otf); font-display: swap; }

/* Whole page */

* {
    box-sizing: border-box;
    /* This transition value is replicated everywhere transitions are customized,
       make sure to track them when editing */
    transition: .15s ease;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: 'DejaVu Sans', sans-serif;
    font-size: 13px;

    @media screen and (min-width: @normal) {
        font-size: 14px;
    }
}

/* General */

a {
    text-decoration: none;
    color: var(--links);

    &:hover, &:focus {
        text-decoration: underline;
        outline: none;
    }
}

section {
    p {
        line-height: 20px;
        word-wrap: anywhere;
    }

    ul {
        line-height: 24px;
    }

    h1 {
        margin-top: 0;
        border-bottom: var(--hr-border);
        font-family: Cantarell; font-weight: bold;
        font-size: 26px;
        color: var(--text-light);
    }

    h2 {
        margin: 24px 0 16px 0;
        border-bottom: var(--hr-border);
        font-family: Cantarell; font-weight: bold;
        font-size: 18px;
        color: var(--text-light);
        padding-bottom: 2px;
    }
}

/* Buttons */
.button, input[type="button"], input[type="submit"] {
    padding: 6px 10px; border-radius: 2px;
    cursor: pointer;
    font-family: 'DejaVu Sans', sans-serif; font-weight: 400;
    border: 0;

    &:hover, &:focus {
        text-decoration: none;
    }
}


/* Bootstrap-style rules */
.flex {
    display: flex;
}

.bg-ok {
    background: var(--ok);
    color: var(--ok-text);

    &:hover, &:focus, &:active {
        background: var(--ok-active);
    }
}

.bg-error {
    background: var(--error);
    color: var(--error-text);

    &:hover, &:focus, &:active {
        background: var(--error-active);
    }
}

.bg-warn {
    background: var(--warn);
    color: var(--warn-text);

    &:hover, &:focus, &:active {
        background: var(--warn-active);
    }
}


.skip-to-content-link {
    height: 30px;
    left: 50%;
    padding: 8px;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
    background: var(--links);
    color: var(--warn-text);
    border-radius: 1px;

    &:focus {
        transform: translateY(0%);
    }
}