/*--------------------------------------------------------------------------
  RESET
--------------------------------------------------------------------------*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}img{border:0}ol,ul{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}


/*--------------------------------------------------------------------------
  TYPOGRAPHY
--------------------------------------------------------------------------*/
@font-face {
  font-family: 'Arek';
  src: url('../fonts/Arek-Bold.woff2') format('woff2'),
      url('../fonts/Arek-Bold.woff') format('woff'),
      url('../fonts/Arek-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Muli';
  src: url('../fonts/Muli-Normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans Math';
  src: url('../fonts/Noto-Sans-Math.woff2') format('woff2');
  }

body {
  color: #111;
  font-size: .9rem;
  line-height: 1.2rem;
  font-family: "Muli", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 { font-size: 2rem; line-height: 2.5rem; margin-block-end: 2rem; }
p { font-size: .9rem; line-height: 1.4rem; margin-block-end: .3rem; }
a, a:visited { color: #333; text-decoration: none; border-bottom: #999 1px solid; line-height: inherit; }
a:hover, a:focus { border-color: #000; }
::selection { background: #fff8d6; color: #000; text-shadow: none; }
em, i { font-style: italic; }
b, strong { font-weight: bold; }
code { font-family: "Noto Sans Math", monospace !important; }

@media screen and (max-width: 669px) {
  h1 { font-size: 1.5rem; line-height: 2rem; margin-block-end: 1rem; }
  p { font-size: .8rem; line-height: 1.1rem; margin-block-end: .5rem; }
}

/*--------------------------------------------------------------------------
  DISPLAY, GRID & MEDIA QUERIES
--------------------------------------------------------------------------*/
.container { position: relative; width: 960px; margin: 0 auto; }
.item { position: relative; overflow: hidden; margin: 0; padding: 0; }
.item img { display: block; max-width: 100%; }

@media screen and (max-width: 1199px) {
  .container { width: 80%; }
}

@media screen and (max-width: 669px) {
  .container { width: 90%; }
}

/*--------------------------------------------------------------------------
  HEADER
--------------------------------------------------------------------------*/
#header { padding: 50px 0; }
#header h1 { font-family: 'Arek'; padding: 0; cursor: pointer; }
#header h1 a { text-decoration: none; border: none; }

@media screen and (max-width: 669px) {
  #header { padding: 30px 0; }
}

/*--------------------------------------------------------------------------
  MOSAIC
--------------------------------------------------------------------------*/
.mosaic {
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  box-sizing: border-box;
  grid-gap: .4vw;
}

@media screen and (max-width: 669px) {
  .mosaic { width: 100%; }
}

/*--------------------------------------------------------------------------
  LIST
--------------------------------------------------------------------------*/
#header.list { text-align: center; }
.list { width: 600px; }
.list .item div { margin: 20px auto 80px auto; }
.list .item p { margin-block-end: 1rem; }
.footer { text-align: center; margin-bottom: 50px; }

@media screen and (max-width: 669px) {
  .list { width: 100%; }
  .list .item div { width: 90%; margin: 15px auto 50px auto; }
  .list .item p { margin-block-end: .8rem; }
}