@import "../style/fonts/clear-sans.css";
@import "helpers";

:root{
    --field-width: 500px;
    --grid-gap: 15px;
    --grid-size: 4;
    --grid-size-max: 6;
    --tile-size: calc(calc(var(--field-width) - calc(var(--grid-gap) * calc(var(--grid-size) + 1))) / var(--grid-size));
    --tile-border-radius: 3px;

    --game-background: #222;
    --text-color: #e6d2bf;
    --bright-text-color: #f9f6f2;

    --game-container-margin-top: 40px;
    --game-container-background: #3e3933;

    --tile-color: #eee8d5;
    --tile-gold-color: #edc22e;
    --tile-gold-glow-color: lighten($tile-gold-color, 15%);
    --cell-color: rgba(238, 228, 218, .35);

    --break-button-background-false: #c00;
    --break-button-color-false: #222;
    --break-button-background-true: #0c0;
    --break-button-color-true: #ddd;
}

$field-width: 500px;
$grid-spacing: 15px;
$grid-max-size: 10;
$tile-border-radius: 3px;

$mobile-threshold: $field-width + 20px;

$text-color: #776E65;
$bright-text-color: #f9f6f2;

$tile-color: #eee4da;
$tile-gold-color: #edc22e;
$tile-gold-glow-color: lighten($tile-gold-color, 15%);

$game-container-margin-top: 40px;
$game-container-background: #bbada0;

$game-background: #222;


$transition-speed: 100ms;

:global(html, body){
    margin: 0;
    padding: 0;

    background: var(--game-background);
    color: var(--text-color);
    font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;

    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
}

:global(p) {
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.65;
}
  
:global(a, a:visited) {
    color: var(--text-color);
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

:global(strong) {
    &.important {
        text-transform: uppercase;
    }
}