@font-face {
  font-family: 'Kangmas';
  src: url('Kangmas\ DEMO.ttf') format('truetype');
}

body {
  background-color: #fedaf3;
  color: #763503;
  font-size: large;
  font-family: 'Kangmas', Verdana, Geneva, sans-serif;
}

ul {
  text-align: center;
  background-color: #fcecf8;
  margin: 10px 10px 0px 10px;
  list-style-type: none;
  padding: 5px 0px 5px 5px;
}

a:link,
a:visited {
  color: brown;
}

ul li {
  display: inline;
  padding: 5px 10px 5px 10px;
}

ul li a:link,
ul li a:visited {
  text-decoration: none;
  font-weight: bolder;
  color: #f77272;
}

ul li.selected {
  background-color: #f9c3e3;
}

h1,
h2,
h3 {
  font-weight: bolder;
}

img {
  display: inline;
}

header {
  text-align: center;
}

header#frontpage {
  background-color: #8e3f02;
  color: #f9c3e3;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  padding: 0px;
  text-align: left;
}

header#frontpage img {
  max-width: 150px;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
}

header#frontpage h1 {
  margin: 0;
  padding: 0;
  line-height: 1;
}

h2 {
  text-decoration: underline;
}

div#tableContainer {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
}

div#tableRow {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

section#main {
  flex: 2;
  padding: 15px;
  vertical-align: top;
  background-color: #fcecf8;
  text-align: center;
  box-sizing: border-box;
}

aside {
  flex: 1;
  padding: 15px;
  vertical-align: top;
  background-color: #fcecf8;
  box-sizing: border-box;
}

section img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto 0 auto;
}

span {
  font-weight: bold;
  font-style: italic;
}

.disclaimer {
  font-size: 75%;
}

.article-images {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
}

.article-images img {
  max-width: 150px;
  height: auto;
}

.article-images img#banner {
  max-width: 1200px;
}

.image-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.image-caption img {
  width: 250px;
  height: 300px;
  object-fit: cover;
}

.image-caption p {
  margin: 5px 0 0 0;
  font-size: small;
}

.pastry-images {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px auto;
  text-align: center;
}

.pastry-images img {
  max-width: 350px;
  width: 100%;
  height: auto;
}

div.whole h2,
div.whole p,
div.whole h3 {
  text-align: center;
}

footer {
  text-align: center;
  font-size: 50%;
}

@media (max-width: 600px) {
  div#tableRow {
    flex-direction: column;
  }

  ul li {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #f9c3e3;
  }

  ul {
    padding: 5px;
  }

  header#frontpage {
    flex-direction: column;
    text-align: center;
    padding: 10px;
  }

  header#frontpage h1 {
    font-size: 1.3rem;
  }

  body {
    font-size: medium;
  }
}