@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(120, 58%, 85%, 0.949);
    --ksc-purple: hsl(272, 90%, 35%);
    --ksc-purple-light: hsl(272, 90%, 60%);
    --ksc-purple-light-trans: hsla(272, 90%, 60%, 0.949);
    --ksc-black: hsl(280, 51%, 8%);
    --ksc-white: hsl(282, 69%, 95%);
}

/* For some reason these can't use variables, so I define it here to be close to the variables. */
.is-gradient-background {
    background: radial-gradient(
        circle at center,
        hsla(272, 90%, 60%, 0.949) 1%, 
        hsl(280, 51%, 8%) 29%, 
        hsla(272, 90%, 60%, 0.949) 69%, 
        hsl(280, 51%, 8%) 85%, 
        hsla(272, 90%, 35%, 0) 95%
    ) !important;
}

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

body { 
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-bottom: 150px;
}

.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;
}

.navbar-brand, .navbar {
    background-color: transparent;
}

.navbar .navbar-brand {
  text-align: center;
  display: block;
  width: 100%;
}

.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
  display: inline-block;
  margin-right: -2px;
  margin-left: -2px;
}

.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-green-light {
    color: var(--ksc-green-light)
}

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

.has-text-shadow-white {
    text-shadow: 2px 2px 16px var(--ksc-white),
                 -2px 2px 16px var(--ksc-white),
                 2px -2px 16px var(--ksc-white),
                 -2px -2px 16px var(--ksc-white);
}


.ksc-card-story {
    background: linear-gradient(
        hsla(121, 68%, 58%, 0.949) 1%, 
        hsla(282, 69%, 95%, 0.949) 29%, 
        hsla(121, 68%, 58%, 0.949) 69%, 
        hsla(282, 69%, 95%, 0.949) 85%, 
        hsla(121, 68%, 58%, 0.949) 95%
    ) !important;

    border-style: groove;
    border-color: var(--ksc-white);
    border-radius: 2em;

    margin: 1em;
}


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

    border-style: groove;
    border-color: var(--ksc-white);
    border-radius: 3em;
}

.ksc-card-black {
    background-color: var(--ksc-black);

    border-radius: 0;
    margin: 0;
}

.ksc-card-game {
    border-style: groove;
    border-color: var(--ksc-white);
    border-radius: 3em;

    padding: 1em;
    font-style: italic;
    justify-content: center;
}

.ksc-card-game > img {
    display: block; 
    margin: auto;

    transition: transform 0.3s, filter 0.3s;
    transition-timing-function: cubic-bezier(0,.5,1,.5);
}

.ksc-card-game > img:hover {
    transform: skew(30deg, 20deg) rotateZ(2.5turn) scale(150%);
    filter: grayscale(100%)
}

.is-padded-card {
    padding: 1.5em;
    padding-top: 0.5em;
}

.ksc-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}