@import "bulma.min.css";

:root {
    --bulma-primary: hsl(306, 56%, 43%);
    --bulma-primary-h: 306;
    --bulma-primary-s: 56%;
    --bulma-primary-l: 43%;

    --bulma-info: hsl(55, 86%, 36%);
    --bulma-info-h: 55;
    --bulma-info-s: 86%;
    --bulma-info-l: 56%;

    --bulma-navbar-height: 2.5em;

    --ksc-background-color: hsl(177, 35%, 67%);
    --ksc-green: hsl(121, 68%, 58%);
    --ksc-green-light: hsl(121, 58%, 85%);
    --ksc-green-light-trans: hsla(121, 58%, 85%, 95%);
    --ksc-purple: hsl(272, 90%, 35%);
    --ksc-purple-light: hsl(272, 90%, 60%);
    --ksc-black: hsl(282, 50%, 8%);
}

html {
    background-image: url('../content/bg-tile.png');
    background-repeat: repeat;
    background-size: 17%;
}

body { 
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.hero-body > p {
    font-family: 'Courier New', monospace;
    color: hsl(121, 68%, 58%);
}

.banner {
    padding: 0;
    border: 0;
    margin: 0;
}

.banner > img {
    display: block;
    border-color: var(--ksc-black);
    border-style: inset;
}

.hero .navbar {
    background-color: var(--ksc-purple);
}

.navbar-brand, .navbar {
    background-color: var(--ksc-purple);
}

.banner-navbar-item:link, .banner-navbar-item:visited {
    color: var(--ksc-green);
    background-color: var(--ksc-purple);
    font-weight: 800;
    font-size: 1em;

    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-top: 0.125em;
    padding-bottom: 0.125em;

    border-color: var(--ksc-black);
    border-width: 8px;
    border-style: outset;
}

.banner-navbar-item:hover {
    border-color: var(--ksc-green);
    background-color: var(--ksc-black);
}

.blog-paragraph {
    padding-bottom: var(--bulma-size-small);
    text-indent: 2ch;
}

.has-text-shadow-black {
    text-shadow: 2px 2px 4px var(--ksc-black);
}

.ksc-card {
    background-color: var(--ksc-green-light-trans);

    border-radius: 2em;
    margin: 1em;
}

.is-padded-card {
    padding: 1em;
    padding-top: 0;
}