/* Defines color values */
:root {
   --altBackColor: whitesmoke;

  --textColor: #443;
  --altTextColor: #777;

  --headerTextColor: white;
  --altHeaderTextColor: #fffa;

  --themeColorOne: #ffe4b4;
  --themeColorTwo: #e37b7c;
  --themeColorThree: #726193;
  --themeColorFour: #323459;

  --outlineColor: lightgray;

  --pageMargin: 1rem;
  --wideWidth: 1200px;
  --narrowWidth: 700px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Merriweather', serif;
	font-weight: normal;
}

a {
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
}

.button,
.button-outlined,
.button-contained,
input[type="submit"] {
  transition: all 0.25s;
  display: inline-block;
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  margin: 0;
  text-decoration: none;
  font-weight: bold;
  font-size: inherit;
  font-family: system-ui;
  cursor: pointer;
}

.button {
  border: none;
  background: none;
  color: var(--themeColorThree);
}

.button *[icon] {
  background-color: var(--themeColorThree);
  transition: all 0.25s;
}

.button:hover,
.button-outlined:hover,
.button-contained:hover {
  text-decoration: none;
}

.button:focus,
.button:hover,
.dropdown:hover .button {
  color: white;
  background: var(--themeColorThree);
}

.button:hover *[icon],
.button:focus *[icon],
.dropdown:hover .button *[icon] {
  background-color: white;
}


.button-outlined {
  display: inline-block;
  border: 0.1rem solid var(--themeColorThree);
  color: var(--themeColorThree);
}

.button-outlined *[icon] {
  background-color: var(--themeColorThree);
  transition: all 0.25s;
}

.button-outlined:focus,
.button-outlined:hover,
.dropdown:hover .button-outlined {
  color: white;
  background: var(--themeColorThree);
  border-color: var(--themeColorThree);
}

.button-outlined:hover *[icon],
.dropdown:hover .button-outlined *[icon] {
  background-color: white;
}

.button-contained,
.button-contained[icon],
input[type="submit"] {
  display: inline-block;
  color: white;
  background-color: var(--themeColorFour);
  border-style: none;
}

.button-contained *[icon] {
  background-color: white;
}

.button-contained:focus,
.button-contained:hover,
input[type="submit"]:hover {
  color: white;
  background-color: var(--themeColorThree);
}


/**********************************************************************
 * Dropdown menu
 *********************************************************************/
.dropdown .dropdown-button {
  cursor: pointer;
}

.dropdown .dropdown-button:after {
  content: " ▾";
}

.dropdown ul.dropdown-content {
  font-family: system-ui;
  font-weight: normal;
  font-size: 0.9rem;
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 2px 20px 2px gray;
  position: absolute;
  box-sizing: border-box;
  display: none;
  margin: 0;
  overflow: hidden;
}

.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content {
	display: block;
}


/***********************************************************************
 * MISC LOGO
 **********************************************************************/
*[logo="uimla"] {
  background: url(../img/uimla.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1rem;
  height: 1rem;
  display: block;
}

*[logo="snam"] {
  background: url(../img/snam.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1rem;
  height: 1rem;
  display: block;
}

/***********************************************************************
 * LOGO LAYOUT
 **********************************************************************/
.logo {
  display: grid;
  grid-auto-flow: rows;
  justify-content: center;
  align-content: center;
  font-weight: 300;
  font-size: 1rem;
}

.logo * {
  text-align: center;
  background-color: none;
  line-height: 1;
  margin: 0;
}

.logo:before {
	content: " ";
	background-image: url("../img/logo-white.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 1.4em;
	position: relative;
	top: 0.1em;
}

.logo h1 {
  font-family: 'Oleo Script', serif;
  font-size: 1.5em;
  font-weight: inherit;
  margin: 0;
}

.logo h1 a {
	font-size: inherit;
	font-weight: inherit;
}

.logo .sub-title {
  font-family: 'Merriweather Sans', sans-serif;
  display: none;
}


/***********************************************************************
 * BODY
 **********************************************************************/
body {
  background-color: var(--altBackColor);
  color: var(--textColor);
  margin: 0;
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: 300;
  line-height: 1.5rem;
}


/***********************************************************************
 * BODY HEADER
 **********************************************************************/
body > header {
  background: radial-gradient(circle at top right, var(--themeColorOne), var(--themeColorTwo) 20%, var(--themeColorThree) 85%, var(--themeColorFour));
  color: var(--headerTextColor);
  padding: 1rem;
  display: grid;
  grid-template: auto / auto auto;
  grid-gap: 1rem;
  align-content: center;
  justify-content: center;
}

body > header *[icon] {
  background-color: var(--headerTextColor);
}

body > header a,
body > header a:hover {
  color: inherit;
}

body > header nav {
	font-size: 1.1rem;
	letter-spacing: -0.05em;
}

body > header nav a {
	display: block;
	color: inherit;
	padding: 0.25em 0.5em;
	border-radius: 0.25em;
	transition: all 0.25s;
	cursor: pointer;
}

body > header nav a:hover {
	color: white;
	text-decoration: none;
	background-color: var(--themeColorFour);
}

body > header > nav > ul {
	padding: 0;
	margin: 0;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	list-style: none;
	padding: 0;
}

body > header > nav > ul > li {
	margin: 0 0.25rem;
	line-height: 1;
}

/***********************************************************************
 * Main styles
 **********************************************************************/
main {
	align-self: stretch;
	box-sizing: content-box;
	padding-left: 1rem;
	padding-right: 1rem;
}

main h1 {
  font-size: 3rem;
}

main h2 {
  font-size: 2rem;
  text-align: center;
}

main h3 {
  font-size: 1.5rem;
}


/***********************************************************************
 * ARTICLE LIST
 **********************************************************************/
#article-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, max-content));
  grid-auto-flow: row dense;
  grid-auto-rows: auto;
  grid-gap: 1rem;
  align-items: stretch;
  justify-items: stretch;
  justify-content: center;
}


/***********************************************************************
 * GENERIC POSTCARD
 **********************************************************************/
.post-card {
  padding: 0;
  background-color: white;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 2px 2px lightgray;
  transition: box-shadow 0.25s;
}

.post-card:hover,
.post-card:focus {
  box-shadow: 0 5px 20px 2px lightgray;
}

/***********************************************************************
 * ARTICLE MINIATURE
 **********************************************************************/
article.miniature {
	display: grid;
	grid-template-rows: auto auto 1fr;
	align-content: stretch;
	font-size: 0.9rem;
	line-height: 1.3rem;
	max-width: 30rem;
	width: content;
}

article.miniature > :nth-child(n+2) {
  margin: 0 1rem;
}

article.miniature > :last-child {
	margin-bottom: 1rem;
}

article.miniature > header > * {
  margin: 0 1rem 1rem 1rem;
  padding: 0;
  line-height: 1em;
  letter-spacing: -0.03em;
}

article.miniature > header > h3 {
	font-size: 1.5rem;
	font-family: 'Merriweather Sans', sans;
	font-weight: lighter;
}

article.miniature > header > :last-child {
  margin-bottom: 0;
}

article.miniature header.with-thumbnail img {
  height: 12rem;
  width: 100%;
  object-fit: cover;
  margin: 0 0 0.5rem 0;
}

article.miniature header a {
  color: inherit;
}

article.miniature header .meta {
  font-size: 0.8rem;
  color: var(--altTextColor);
  list-style: none;
  padding: 0;
  display: flex;
}

article.miniature header .meta li {
  margin-right: 1em;
}


article.miniature header .meta [icon] {
  background-color: var(--altTextColor);
}

article.miniature footer {
	margin-top: 1em;
	align-self: end;
}

/***********************************************************************
 * ARTICLE PLACE-HOLDER
 **********************************************************************/
article.place-holder {
	display: grid;
	align-content: center;
	justify-content: center;
	text-align: center;
	font-size: 1.1rem;
	font-style: italic;
	padding: 1rem;
}

ul.caroussel {
  display: grid;
  grid-template: auto / auto auto;
  list-style: none;
  align-items: center;
  justify-items: center;
  background-color: var(--altBackColor);
  border-radius: 0.25rem;
  overflow: hidden;
  padding: 0;
}

ul.caroussel li {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}

ul.caroussel li.previous {
  grid-column: 1 / 2;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: left;
}

ul.caroussel li.next {
  grid-column: 2 / 3;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: right;
}

ul.caroussel li button {
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.5em;
  border: none;
  background-color: transparent;
  color: white;
  border-radius: 0.25em;
  display: block;
  transition: all 0.25s;
}

ul.caroussel li button:hover {
  background-color: #000d;
  color: white;
}


ul.caroussel li[current] {
  z-index: 2;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-play-state: running;
  position: relative;
}

ul.caroussel li[current="next"] {
  animation-name: slide-from-right;
}

ul.caroussel li[current="previous"] {
  animation-name: slide-from-left;
}

@keyframes slide-from-right {
  from { left: 100%; }
  to   { left: 0;    }
}

@keyframes slide-from-left {
  from { right: 100%; }
  to   { right: 0;    }
}

ul.caroussel li img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
}

.article-view > article #content ul.caroussel li:last-child img {
  margin-right: var(--margin);
}


/***********************************************************************
 * FOOTER
 **********************************************************************/
body > footer {
  font-family: "Merriweather Sans", sans-serif;
  background: radial-gradient(circle at top right, var(--themeColorThree), var(--themeColorFour) 33% );
  color: var(--altHeaderTextColor);
  padding: var(--pageMargin);
}

body > footer > section {
  margin-left: auto;
  margin-right: auto;
}

body > footer [icon] {
  background-color: var(--altHeaderTextColor);
}

body > footer a {
  color: inherit;
}

body > footer a:hover {
  color: white;
  text-decoration: none;
}

body > footer a:hover *[icon] {
  background-color: white;
}

body > footer > #main {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 5%;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

body > footer #main h3,
body > footer #main p,
body > footer #main ul,
body > footer #main li {
  margin: 0 0 0.4em 0;
  font-family: inherit;
  font-size: small;
  line-height: 1;
}

body > footer #main h3 {
  font-weight: bolder;
  color: var(--headerTextColor);
}

body > footer #main ul {
  list-style: none;
  padding: 0;
}

body > footer #contact header {
	text-align: center;
}

body > footer #contact ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

body > footer #contact li {
	width: 3rem;
	margin: 0.5rem;
}

body > footer #contact a img {
	display: block;
	object-fit: contain;
	width: 100%;
	filter: saturate(80%) contrast(90%);
}

body > footer #contact a:hover img {
	filter: saturate(200%);
}

body > footer #specific {
  font-size: x-small;
  text-align: center;
  margin-top: var(--pageMargin);
}