* { box-sizing: border-box; }

h1 {font-family: "Poiret One";
   text-align: center;
   color: #ff8f00;
    outline: 3px white;}

p.a {font-family:"Montserrat";text-align: justify;
padding-right: 30px;
padding-left: 10px;
margin: 5px;}

body {background-image: url('plaid-1.jpg');
  font-family: sans-serif;
  cursor: url('pridegay.cur') 1 1, auto;
}

.poiret-one-regular {
  font-family: "Poiret One", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.header{background: #ffc87c;
padding: 0.5em 0.5em;
border-radius: 7px;}

.filters{background: #ffc87c;
padding: 0.5em 0.5em;
border-radius: 7px;}

/* ---- button ---- */
.button:first-child {
	font-weight: bold;
}

.button.is-checked {
	color: #cd5700;
	background: #ffb347;
}

body button {
	font-family: "Montserrat", garamond, monospace, serif;
	font-size: 15px;
	line-height: 1.4;
	cursor: url("/assets/Normal Select org.cur") 7 5, pointer;
}

.button {
	display: inline-block;
	padding: 0.15em 0.6em;
	background: #ffe5b4;
	border: none;
	border-radius: 7px;
	color: #ff8f00;
	border-radius: 5px;
	margin-left: 0;
	margin-right: 1px;
	margin-bottom: 5px;
	border: 1px solid #ffae42;
	box-shadow: -3px 3px 0px 0px rgba(194, 120, 167, 0.1);
	transition: 0.2s ease;
}

.button:hover {
  background-color: #ed872d;
  color: white;
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- isotope ---- */

.grid {
  background: #ffc87c;
  display: flex;
  align-items: center;}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ui group */

.ui-group {
  display: inline-block;
}

.ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}


/* ---- .rec ---- */

.rec {
  position: relative;
  float: left;
  display: flex;
  flex-direction: row;
  width: 400px;
  min-height: 200px;
  margin: 5px;
  padding: 5px;
  background: #ffefd5;
  color: #262524;
}

.rec__left {background-color: #ffefd5;
  width: 40%;
  margin: 2px;
}

.rec__left img {width: 100%;
  object-fit: fill;}

.rec__title {	font-size: 1em;
	line-height: 1.1;
	margin-bottom: 0.5em;
	font-family: "Syncopate","Montserrat", Trebuchet MS, sans-serif;}

.rec__right {
  width: 60%;
  margin: 2px;
}

.rec__desc{	font-family: "Montserrat", Trebuchet MS, monospace, san-serif;
	font-size: 12px;
	line-height: 1.2;
}