/*
  CSS Reset
  http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

button {
  padding: 0;
  color: inherit;
  background-color: inherit;
  border: 0px;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* VARIABLES */
@font-face {
  font-family: "AbrilFatface";
  src: local("AbrilFatface-Regular"), local("AbrilFatfaceRegular"), local("AbrilFatface"), url(./fonts/AbrilFatface-Regular.ttf) format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-Thin"), local("RobotoThin"), url(./fonts/Roboto-Thin.ttf);
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-ThinItalic"), local("RobotoThinItalic"), url(./fonts/Roboto-ThinItalic.ttf);
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-Light"), local("RobotoLight"), url(./fonts/Roboto-Light.ttf);
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-LightItalic"), local("RobotoLightItalic"), url(./fonts/Roboto-LightItalic.ttf);
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-Regular"), local("RobotoRegular"), local("Roboto"), url(./fonts/Roboto-Regular.ttf);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-Italic"), local("RobotoItalic"), url(./fonts/Roboto-Italic.ttf);
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Medium.ttf");
  src: local("Roboto-Medium"), local("RobotoMedium"), url(./fonts/Roboto-Medium.ttf);
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-MediumItalic"), local("RobotoMediumItalic"), url(./fonts/Roboto-MediumItalic.ttf);
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-Bold"), local("RobotoBold"), url(./fonts/Roboto-Bold.ttf);
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-BoldItalic"), local("RobotoBoldItalic"), url(./fonts/Roboto-BoldItalic.ttf);
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-Black"), local("RobotoBlack"), url(./fonts/Roboto-Black.ttf);
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-BlackItalic"), local("RobotoBlackItalic"), url(./fonts/Roboto-BlackItalic.ttf);
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
/* Older browsers */
html {
  font-size: 16px;
}

/* Modern browsers only need this one */
@media screen and (min-width: 25em) {
  html {
    font-size: calc(16px + (24 - 16) * (100vw - 400px) / (800 - 400));
  }
}
/* Safari <8 and IE <11 */
@media screen and (min-width: 25em) {
  html {
    font-size: calc(16px + (24 - 16) * (100vw - 400px) / (800 - 400));
  }
}
@media screen and (min-width: 50em) {
  html {
    font-size: calc(16px + (24 - 16) * (100vw - 400px) / (800 - 400));
  }
}
html {
  height: 100%;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html {
  font-size: 0.8rem;
}
@media screen and (min-width: 20rem) {
  html {
    font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));
  }
}
@media screen and (min-width: 50rem) {
  html {
    font-size: 2rem;
  }
}

body {
  line-height: 1.5rem;
  padding: 1.5rem 0;
  margin: 0 auto;
  background-image: linear-gradient(rgba(200, 50, 50, 0.25) 1px, transparent 1px);
  background-size: 1px 1.5rem;
  width: 22rem;
}

p {
  line-height: 1.5rem;
  margin-bottom: 1.5rem;
}

h1,
h2 {
  font-weight: 600;
  text-align: center;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.6rem;
  margin-bottom: calc((1.5rem - 1.6rem) + 1.5rem);
  font-variant: small-caps;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-bottom: calc((1.5rem - 1.5rem) + 1.5rem);
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25rem;
  margin-bottom: calc((1.5rem - 1.25rem) + 1.5rem/3);
}

h4 {
  font-size: 1rem;
  line-height: 1rem;
  margin-bottom: calc((1.5rem - 1rem) + 1.5rem);
}

h5 {
  font-size: 0.875rem;
  line-height: 0.875rem;
  margin-bottom: calc((1.5rem - 0.875rem) + 1.5rem);
}

h6 {
  font-size: 0.75rem;
  line-height: 0.75rem;
  margin-bottom: calc((1.5rem - 0.75rem) + 1.5rem);
}

p {
  font-size: 0.7rem;
}

a {
  text-decoration: none;
  font-size: 0.7rem;
}

/* BASE */
html {
  max-width: 100vw;
}

body {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  background-image: radial-gradient(#ece0ec 10%, transparent 0);
  background-size: 20px 20px;
}

header {
  text-align: center;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 95vw;
  align-self: center;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 2rem;
  border-radius: 6px;
  background: #fefefe;
  box-shadow: inset 6px 6px 9px #f1f1f1, inset -6px -6px 9px #ffffff;
  margin-bottom: 2rem;
}

article {
  margin-bottom: 0.5rem;
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* LAYOUT */
.foto {
  max-height: 95%;
  min-width: 275px;
  max-width: 350px;
}

.tekst {
  max-height: 95%;
  min-width: 350px;
  max-width: 600px;
}

.foto p {
  width: inherit;
  font-size: 0.4rem;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.tekst {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.tekst h2 {
  width: 100%;
}

.tekst article {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.tekst article {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-bottom: calc((1.5rem - 1.25rem) + 1.5rem/2);
  padding: 0.5rem;
}

/*# sourceMappingURL=index.css.map */