/*

    Craig Butcher - Style.css

    1) Modern CSS Reset
    2) Colors

*/


/*

    1) Modern CSS Reset - Andy Bell
    URL: https://hankchizljaw.com/wrote/a-modern-css-reset/

*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elrements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1rem;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/*
    2) Colors
*/

/*
    Colors
*/


:root {

    --font-size: 62.5%;
    --font-size-default: 1.6rem;

    --color-red: rgb(255,99,71);
    --color-green: rgba(0,170,85,1);

    --color-white: hsla(0, 0%, 100%, 1);
    --color-text: hsla(0, 0%, 16%, 1);

    --color-warning: hsla(9, 100%, 63.9%,1);
    --color-success: hsla(150, 100%, 33%, 1);

    --color-grey: hsla(0, 0%, 66.7%,1);
    --color-shadow: hsla(0, 0%, 80%, 0.5);

    /* SMOKY BLACK */
    --color-smokyblack: hsla(210%, 11%, 4%, 1);

    /* QUICK SILVER */
    --color-quicksilver: hsla(283%, 4%, 65%, 1);

    /* WHITE SMOKE */
    --color-whitesmoke: hsla(140%, 16%, 96%, 1);

    /* DAVY'S GRAY */
    --color-davysgray: hsla(214%, 4%, 35%, 1);

    /* RAISIN BLACK */
    --color-raisinblack: hsla(130%, 8%, 15%, 1);

    /* Hansa Yellow */
    --color-hansayellow: hsla(44.9, 80.9%, 69.2%, 1);

    --color-white: hsla(0, 100%, 100%, 1);
    --color-raisinblack: hsla(130, 8%, 15%, 1);
    --color-hansayellow: hsla(44.9, 80.9%, 69.2%, 1);
    --font-IBM: 'IBM Plex Sans Condensed', sans-serif;

}

html {
    font-size: var(--font-size);   /* 1rem = 10px */
}

body {
    background-color: var(--color-white);
    color: var(--color-smokyblack);
    font-family: 'Open Sans', sans-serif;
    font-size: var(--font-size-default);

}
/*
@media (max-width: 26.563rem) {
    body {
        max-width: 58ch;
    }
}

@media (min-width: 26.564rem) and (max-width: 47.9rem) {
    body {
        max-width: 100ch;
    }
}

@media (min-width: 48rem) {
    body {
        max-width: 150ch;
    }
} */

h1, h2, h3, h4, h5 {
    display: block;
    /* color: var(--color-white); */
    font-family: var(--font-IBM);
    padding: 0.5rem 0;

}

a {
    color: var(--color-white);
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.8rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1rem;
}

a {
    /* background-color: var(--color-raisinblack); */
    color: var(--color-raisinblack);
}

nav {
    margin: 0 0 1rem;
}

ol, ul {
    margin: 0;
    padding: 1rem 1.4rem 0.3rem;
}

.tmpl-post ol li,
.tmpl-post ul li {
    margin: 0 0 1rem 1rem;
}

p {
    margin: 1rem 0;
}

blockquote p {
    line-height: 2.5rem;
}

h1 small {
    display: block;
    font-size: 1.8rem;
    vertical-align: middle;
}

.heart {
    color: red;
}

blockquote {
    border-left: 5px solid;
    padding: 0 0 0 1rem;
    margin: 2rem 0;
}

time {
    display: inline-block;
    margin-bottom: 1rem;
}

.wrapper {
    display: grid;
    justify-content: center;
    max-width: 960px;
}

/* Grid */


@supports (display: grid) {

	.grid {
		display: grid;
		margin: 2rem auto 2rem;
		width: 90%;
		/* max-width: 1440px; */
        max-width: 960px;
	}

	@media (max-width: 47.9em) {
		.box {
			margin: 0 0 1rem;
			width: 100%;
		}
	}

	@media (min-width: 48rem) {

		.grid {
			grid-template-columns: repeat(12, 1fr);
			grid-gap: 5rem;
		}

		.one {
			grid-column: span 1;
		}

		.two {
			grid-column: span 2;
		}

		.three {
			grid-column: span 3;
		}

		.four, .thirty {
			grid-column: span 4;
		}

		.five {
			grid-column: span 5;
		}

		.six, .even {
			grid-column: span 6;
		}

		.seven {
			grid-column: span 7;
		}

		.eight, .sixty {
			grid-column: span 8;
		}

		.nine {
			grid-column: span 9;
		}

		.ten {
			grid-column: span 10;
		}

		.eleven {
			grid-column: span 11;
		}

		.twelve, .full {
			grid-column: 1 / -1;
		}

	}
}


/* Bingo card layout */

.bingo-card {
    background-color: #fff;
    padding: 1rem 2rem 2rem;
}

.bingo-card h3 {
    color: #444;
    text-align: center;
}

.bingo-card ul {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
}

.bingo-card ul li {
    align-items: center;
    border: 1px solid #444;
    color: #444;
    display: flex;
    height: 5rem;
    justify-content: center;
    min-width: 7rem;
    text-align: center;
}

.tmpl-post, .quick-bites {
    background-color: white;
    border: 2px solid #000;
    box-shadow: -4px 4px #000;
    color: #000;
    padding: 1rem;

}

@media (prefers-color-scheme: dark) {

    body {
        background-color: #000;
        color: #fff;
    }

    a {
        color: #fff;
    }

    .tmpl-post, .quick-bites {
        background-color: black;
        border: 2px solid #fff;
        box-shadow: -4px 4px #fff;
        color: #fff;

    }
}